Устанавливаем и настраиваем бесплатный редактор кода Visual Studio Code

VS Code является одним из самых популярных редакторов для верстки и написания кода разных языков программирования. Полноценный редактор делает процесс написания кода на порядок удобнее, чем в блокноте. К тому же редактор является бесплатным и доступен для скачивания на официальном сайте.

Именно по этим причинам мы выбираем VS Code для дальнейшей работы с кодом. Конечно, редактор может использоваться для разных задач. И настройки для работы с разными языками программирования могут отличаться. Мы же сделаем базовые настройки, которых будет достаточно для верстки сайтов. Сделаем упор на минималистичный интерфейс для комфортной работы на ноутбуке.

В конце статьи будет готовый код с моими настройками редактора Visual Studi Code и инструкция по его применению. Воспользовавшись им не придется совершать все манипуляции с настройками. Но, возможно они Вам не подойдут.  

Скачиваем и устанавливаем редактор кода VS Code

Эта часть выглядит максимально просто. Скачиваем редактор на странице для скачивания на официальном сайте редактора. На странице необходимо выбрать операционную систему, на которой он будет работать и процесс скачивания будет запущен.

Установка интуитивно понятна и не потребует изучения дополнительной информации. Обыкновенный пользовательский установщик, где со всем соглашаемся, выбираем место на устройстве куда установить и жмем на кнопку.

Устанавливаем русский язык

По завершению установки будет предложено установить языковой пакет. В правом нижнем углу редактора кода во всплывающем окне будет предложено установить плагин. После установки плагина устройство будет перезагружено и настройки вступят в силу. Конечно, это для тех, кто не знает английский язык и кому удобней использовать именно русский.

Перевести VS Code на русский язык можно в любой момент. Не обязательно это делать сразу после установки. Для этого заходим в репозиторий и в поле поиска плагина вписываем Russian Language Pack. Жмем на кнопку «установить» и ждем. После установки редактор перезагрузится.

Для того, чтоб попасть в репозиторий нужно обратить внимание на панель действий в левой части экрана. Нижняя иконка ведет на нужный нам раздел.

Для минимизации элементов интерфейса позже мы отключим панель действий. В верхнем меню продублированы все необходимые нам функции. Чем мы и воспользуемся.

Отключаем стартовую страницу редактора VS Code

При запуске редактора каждый раз будет появляться стартовая страница, которая нам абсолютно не нужна. Предлагаю ее отключить.

Для того, чтоб манипулировать настройками редактора кода нам нужно попасть в раздел «Параметры». Это можно сделать двумя способами.

В первом варианте нажимаем на шестеренку в левом нижнем углу. В появившемся списке выбираем нужный нам пункт как на скриншоте.

Либо мы можем воспользоваться верхним меню. Для этого кликаем на пункт меню «Файл». В выпадающем меню выбираем «Настройки» — «Параметры». Как на скриншоте.

Практически все последующие манипуляции с настройками будут производиться в этом разделе.

Попав в раздел в поле поиска, прописываем ключевое слово и находим в результатах поиска пункт «Startup Editor».

В выпадающем списке выбираем «newUnittledFile». Вуаля — готово!

Все последующие действия, связанные с настройками, будут производиться аналогичным образом. Каждый раз останавливаться на подробном описании аналогичных я не буду.

Настраиваем плавную прокрутку (скрол)

По умолчанию прокрутка осуществляется рывками, что может выглядеть не очень при работе. Предлагаю сделать прокрутку плавной.

Находим пункт «Editor: Smooth Scrolihg». Для этого в поле поиска впишем ключевое слово «Smooth» и получаем список наиболее релевантных результатов поиска.

Тут нам нужно будет убрать галочку чек бокса как на скриншоте. Готово — едем дальше.

Устанавливаем размер шрифта в редакторе

Воспользуемся уже привычным нам способом и найдем пункт «Editr: Font Size». Для того, чтоб быстро получить нужный нам пункт в поле поиска можно вбивать ключевое слово без учета регистра символов и пробелов. Например, в данном случае нужные нам результаты выведутся если вбить «fontsize».

В поле прописываем нужный нам размер шрифта. По умолчанию стоит значение 14. Э же для себя выбираю размер значением 15.

Для разных операционных систем это значение будет отображаться по-разному. Здесь все индивидуально.

Отключаем хлебные крошки

По умолчанию в верхней части редактора VS Code отображается строка с навигацией. В простонародье «Хлебные крошки». Эта навигация призвана помогать ориентироваться пользователю в файловой структуре проекта.

На практике хлебные крошки больше мешают, занимая полезное пространство, чем помогают. По этой причине предлагаю их отключить.

Для того, чтоб отключить отображение хлебных крошек в поле поиска вписываем «breadcrumbs» и находим пункт «Breadcrumbs: Enabled».

Убираем галочку как на скриншоте. Готово — едем дальше.

Устанавливаем размер отступов

Html код в редакторе кода имеет вложенную структуру. Каждый вложенный элемент сдвинут относительно родительского на определенное расстояние. По умолчанию этот отступ равен 4-м «табам». Для небольших дисплеев этот отступ большой и сильно растянет код по горизонтали.

Для того, чтоб это исправить вписываем в поле поиска «tab size» и находим пункт «Editor: Tab Size».

В поле, как на скриншоте меняем значение на свое. Значение в 2 будет самым оптимальным.

Отключаем панель действия

Выше мы уже говорили о том, что ради экономии места отключим active bar. Все, что в нем находится продублировано в верхнем меню. Благодаря этому мы можем добыть себе еще полезного пространства.

Чтоб отключить панель действий в этот раз мы воспользуемся верхним меню. Кликаем на «Вид», переходим «Внешний вид» — «Панель действий».

Здесь нам нужно убрать галочку, стоящую напротив «Панель действий».

Устанавливаем формат страницы в редакторе кода

Если воспользоваться комбинацией клавиш Ctrl + N откроется новая страница. Для того, чтоб страница была в нужном нам формате необходимо этот формат определить по умолчанию.

Вбиваем в поиск «Default Language» и находим пункт «Files: Default Language».

В поле прописываем нужный нам формат. В нашем случае это будет html.

Межстрочный интервал кода

Межстрочный интервал — это текстовый параметр, известный как «Интерлиньяж» или «Lineheight».  Этот параметр устанавливает высоту строки.

По умолчанию это значение в редакторе VS Code равно нулю. Увеличив это значение мы сделаем код более воздушным. Это будет плюсом к удобочитаемости.

Находим пункт «Editor: Line Height» по старой схеме.

В соответствующем поле прописываем свое значение. Я выставлю это значение 20.

Стоит учитывать, что значение будет разным для разных операционных систем. Далеко не для всех подойдет мой выбор.

Отключаем окно «доверия»

При открытии нового проекта или файла в редакторе кода постоянно всплывает надоедливое окно, в котором необходимо подтвердить то, что вы доверяете автору проекта.

Абсолютно бессмысленная опция, которую не плохо будет отключить.

Находим «Trust: Enable» и убираем галочку с чек бокса.

Для того, чтоб изменения вступили в силу, потребуется перезагрузка редактора. Перезагрузка произойдет автоматически.

Автоматическое обновление символов

Тут не о чем говорить. Все и так понятно — нам больше не придется обновлять страницу. Давайте просто настроим обновление символов без лишних слов.

Находим «Editor: Linked Editing» и добавляем галочку чек боксу. Все как на скрине.

Отключаем всплывающее окно с подсказками

При наведении курсора на код перед нами вечно всплывает не нужное окно с подсказками. Это очень неудобно и бесполезно в работе. К тому же оно закрывает собой код выше.

Предлагаю его отключить. Для этого находим «Editor > Hover: Enabled» вписав в поисковую строку «hover».

Убираем установленную галочку и вуаля — готово!

Установка расширений (плагинов)

Нам недостаточно будет базового функционала в редакторе кода VS Code. Для его расширения придется прибегнуть к установке плагинов. Устанавливать будем самые популярные, которые зарекомендовали себя среди разработчиков.

Для того, чтоб установить нужные нам плагины нужно попасть в репозиторий. Как это сделать мы обсуждали в начале статьи.

Плагин Live Server

Слово «Сервер» в названии плагин говорит само за себя. С помощью этого плагина мы сможем открыть html страницу в браузере и посмотреть, что мы там наверстали.

В поисковой строке прописываем название плагина, находим его среди появившихся результатов и жмем установить.

Для того, чтоб открыть страницу в браузере кликаем правой кнопкой мыши странице html документа и выбираем «Open with Live Server».

Установка всех остальных плагинов происходит аналогичным образом.

Плагин HTML CSS Support

Подсказывает при написании классов уже имеющиеся в проекте. В работе довольно удобно и не будет лишним. Установка аналогична той, что была ранее.

Плагин Auto Rename Tag

При изменении открывающего тега синхронно будет меняться и закрывающий тег. Довольно удобно — плагин делает часть работы за нас.

Плагин CSS Peek

Позволяет быстро найти стили элемента прямо из html файла. Теперь не придется заниматься долгими поисками в css файле в поиске нужного нам класса.

Для того, чтоб быстро найти стили тега нужно навести курсор на класс тега в файле html, зажать клавишу Ctrl и кликнуть по этому классу.

Плагин для копирования классов

Плагин eCSStractor for VSCode решает насущную проблему с переносом классов в css файл. Он позволяет скопировать сразу все классы нужного нам куска кода одним кликом и перенести их в css файл.

Для того, чтоб скопировать классы нужного нам участка html кода потребуется выделить этот участок и кликнуть по выделенному участку кода правой клавишей мыши. В появившемся окне выбрать пункт с названием плагина.

Но, это не сильно удобно, и мы настроим горячие клавиши для копирования классов.

 Настраиваем горячие клавиши

Настроим копирование классов в выделенном куске кода сочетанием клавиш Ctrl + Sift + X. Для этого нам нужно попасть в раздел «Сочетание клавиш». Кликаем на пункт верхнего меню «Вид». В выпадающем меню переходим по «Настройки» — «Сочетание клавиш».

Попав в этот раздел нам понадобится перейти дальше, кликнув на иконку в правом верхнем углу экрана. Как на скриншоте.

На странице между квадратными скобками вставьте код, который я оставлю ниже.

Как обещал, оставляю код настройки горячих клавиш.

{

    "key": "ctrl+shift+x",

    "command": "extension.ecsstractor_port_run",

    "when": "editorTextFocus"

 }

Плагин Material Theme для выбора визуального отображения кода

Проще говоря — выбираем свою цветовую тему.

Для того, чтоб выбрать цветовую схему нажимаем на кнопку «Задать цветовую тему» и выбираем из выпадающего списка.

Внедряем мои настройки в один клик

А помните, как в начале статьи я обещал показать способ настроить редактор кода VS Code быстро и без танцев с бубнами.  Оставляю код своих настроек, который можно скопировать и вставить в область редактора.

Процедура полностью аналогична той, в которой мы настраивали горячие клавиши плагина eCSStractor.

Заходим в раздел «Параметры». Напоминаю: «Вид» (верхнее меню) — «Настройки» — «Параметры». Находим в верхней правой части экрана иконку, как и в случае с горячими клавишами ранее и переходим по ней. Вставляем скопированный код из статьи.

Некоторые настройки можно будет изменить.

Важно понимать, что код касается исключительно настроек редактора VS Code. Плагины устанавливать придется самому отдельно.

{

    "workbench.colorTheme": "Material Theme Ocean High Contrast",

    "files.autoSave": "afterDelay",

    "workbench.startupEditor": "newUntitledFile",

    "editor.smoothScrolling": true,

    "editor.tabSize": 2,

    "editor.fontSize": 15,

    "files.defaultLanguage": "html",

    "editor.detectIndentation": false,

    "terminal.integrated.fontSize": 15,

    "editor.lineHeight": 20,

    "explorer.confirmDelete": false,

    "security.workspace.trust.enabled": false,

    "security.workspace.trust.emptyWindow": false,

    "editor.insertSpaces": false,

    "editor.linkedEditing": true,

    "liveServer.settings.donotShowInfoMsg": true,

    "breadcrumbs.enabled": false,

    "workbench.activityBar.visible": false,

    "editor.hover.enabled": false

}

На этом у меня все. Желаю продуктивной работы и хорошего настроения!