Настройка Visual Studio Code

Оглавление статьи

1. Вводная информация
2. Базовая настройка
3. Переопределение горячих клавиш
4. Установка расширений
5. Создание сниппетов
6. Стили кодирования (PHP линтеры)
7. Настройка Xdebug
8. Горячие клавиши

Вводная информация

В серии статей по работе и настройке дистрибутива Pop!_OS был установлен ряд программ, в числе которых редактор кода VSCode. В этой статье мы настроим его для дальнейшего использования. Рассмотрим какие обычно расширения использую в своей работе с VSCode, какие настройки изменяю и какие горячие клавиши использую.

Базовая настройка

Первым делом зададим базовые настройки редактору VSCode. В левом нижнем углу нажмем на иконку шестеренки и выберем пункт Settings или горячие клавиши Ctrl + ,. Откроется вкладка с настройками, чтобы быстро найти интересующую нас настройку вводим в поле поиска Search Settings ключевое слово.

Автоматическое сохранение

В поле поиска вводим слово Auto Save и установим для нее значение onFocusChange.

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

Размер шрифта

В поле поиска вводим слово Font Size и установим значение 15.

Размер табуляции

В поле поиска вводим слово Tab Size и установим значение 2.

Шрифт текста

В поле поиска вводим слово Font Family и установим значение 'Fira Code', 'Droid Sans Mono', 'monospace', monospace, либо оставим по умолчанию.

Ширина строки

В поле поиска вводим слово Word wrap column и установим значение 120.

Эта настройка задаст максимальную длину текста в одну линию, в 120 символов, после которых редактор будет переносить слова на новую строку.

Лигатура шрифта

В поле поиска вводим слово Font Ligatures, нажмем по ссылку Edit in settings.json и добавим значение "editor.fontLigatures": true.

Эта настройка сделает более читабельными некоторые специфичные для программирования символы, например =>.

Настройки Emmit

В поле поиска вводим слово Emmet trigger expansion on tab и активируем переключатель.

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

Переопределение горячих клавиш

Меня не совсем устраивают стандартные горячие клавиши в VSCode, здесь они не такие, как в операционной системе Windows. Приведем их в привычный вид, для этого откроем настройки клавиатуры нажав горячие клавиши Ctrl + K затем сразу же нажимаем Ctrl + S. Откроется вкладка с настройками горячих клавиш.

Замена текста

В поле поиска вводим слово replace и изменяем горячие клавиши Ctrl + H на Ctrl + R.

В поле поиска вводим слово replace in files и изменяем горячие клавиши Ctrl + Shift + H на Ctrl + Shift + R.

Дублирование текста

В поле поиска вводим слово copy line down и изменяем горячие клавиши Ctrl + Shift + Alt + DownArrow на Ctrl + D.

Выделение похожего текста

В поле поиска вводим слово add selection to next find match и изменяем горячие клавиши с Ctrl + D на Alt + J.

Отмена выделение похожего текста

В поле поиска вводим слово move last selection to previous find match и добавляем горячие клавиши Alt + Shift + J.

Обертка контента в указанный тег

В поле поиска вводим слово Wrap with Abbreviation и добавляем горячие клавиши Ctrl + Alt + T.

Форматирование документа

В поле поиска вводим слово format document и добавляем горячие клавиши Ctrl + Alt + L.

Установка расширений

Благодаря всевозможным расширениям редактор кода VSCode позволяет кастомизировать себя до уровня IDE. Расширений для VSCode по истине очень много, все их не представляется возможным разобрать. Те же которые разберем не имеет смысла подключать, если нет надобности в их использовании. Но я надеюсь, что данный пример послужит вектором для подборки собственных расширений, направленных на решения именно ваших потребностей.

Так как в своей работе я использую стек html, pug, css, scss, js, php, то и расширения будут касаться этих технологий.

Для того чтобы установить расширение, нажмем горячие клавиши Ctrl + Shift + X. В появившейся области нажмем на поле поиска Search Extensions in Marketplace и вводим название расширения которое хотели бы найти.

Auto Complete Tag

Автоматически закрывает и переименовывает теги.

Code runner

Запускает в консоле js код.

EditorConfig for VS Code

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

Github plus theme

Светлая тема для редактора кода VSCode.

Theme Tinacious

Темная тема для редактора кода VSCode.

Theme

Темная тема для редактора кода VSCode.

vscode icons

Набор иконок для различных типов файлов в редакторе кода.

VSCode Great Icons

Набор иконок для различных типов файлов в редакторе кода.

Live Server

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

Import cost

Показывает вес импортированных библиотек рядом со строкой импорта.

npm intellisense

При импорте библиотек подсказывает название установленных npm пакетов при вводе подстроки, соответствующей этому пакету.

Open In Browser

Позволяет открыть активную вкладку html в браузере.

Git history

Просмотр истории коммитов в интерфейсе редактора кода VSCode.

Сss peek

Быстрый просмотр значений css стиля в html документе. По щелчку Ctrl + Левая кнопка мыши на названии css стиля в html документе, откроется css файл содержащий этот стиль.

IntelliSense for CSS class names in HTML

Помогает с автозаполнением названия css стиля в html документе.

Path Intellisense

Помогает с автозаполнением путей до файлов в html документе.

PHP Intelephense

Помогает при написании PHP кода подсказками и автоматическим дописыванием php конструкций.

phpcs

Линтер для php кода. Как настроить это расширение читайте ниже в разделе Стили кодирования (PHP линтеры).

php cs fixer

Линтер для php кода. Как настроить это расширение читайте ниже в разделе Стили кодирования (PHP линтеры).

Markdown Preview Enchanced

Позволяет визуализировать markdown разметку.

File Peek

Открытие файла по ссылке.

JS Parameter Annotations

Подсказки наименований переменных для JS.

Inline Parameters for VSCode

Подсказки наименований переменных для PHP.

Auto Import - ES6, TS, JSX, TSX

Автоматический импорт в JS.

eCSStractor for VSCode

Извлекает имена классов из HTML и создает из них css стили.

Russian Language Pack

Русский язык для редактора кода VSCode.

es6-string-html

Подсветка html разметки внутри переменной в js коде.

SVG Preview

Предпросмотр svg иконок прям в редакторе кода VSCode.

Windows Default Keybindngs

Горячие клавиши для VSCode как в Windows. Вместо установки этого расширения предпочитаю переопределять горячие клавиши вручную. Благо их не так много.

Sublime Text Keymap and Settings Importer

Горячие клавиши как в Sublime. Вместо установки этого расширения предпочитаю переопределять горячие клавиши вручную. Благо их не так много.

ES Lint

Линтер для JavaScript. Проверяет js код на соответствие параметрам конфигурационного файла .eslintrc. Полезен для поддержания единого стиля кодирования.

HTMLHint

Линтер для HTML. Проверяет html разметку на соответствие параметрам конфигурационного файла .htmlhintrc . Полезен для поддержания единого стиля кодирования.

puglint

Линтер для Pug. Проверяет pug разметку на соответствие параметрам конфигурационного файла .pug-lintrc. Полезен для поддержания единого стиля кодирования.

scss-lint

Линтер для Scss. Проверяет scss стили на соответствие параметрам конфигурационного файла .stylelintrc. Полезен для поддержания единого стиля кодирования.

Prettier Code formatter

Форматор кода.

JS quick console

Быстрая вставка console.log. В принципе этот плагин могут заменить пользовательские сниппеты. Как создать пользовательский сниппет будет далее.

Polacode

Делает скриншот кода.

Gulp Snippets

Короткие строки, разворачивающиеся в целые gulp конструкции, наподобие Emmet.

Live Sass Compiler

Компиляция Sass/Scss в css без использования сборщиков.

WordPress Hooks IntelliSense

Подстановка WordPress функций.

Wordpress snippets

Короткие строки, разворачивающиеся в целые WordPress конструкции, наподобие Emmet.

WooCommerce - Snippets & autocomplete

Сниппеты для WooCommerce.

Pug

Pug сниппеты и поддержка разметки.

Pug beautify

Форматирование Pug разметки.

SQL Server

Администрирование базы данных.

Twig

Добавляет поддержку Twig синтаксиса.

TabNine

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

Создание сниппетов

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

Чтобы создать сниппет в VSCode нажмем горячие клавиши Ctrl + Shift + P и введем слово Configure User Snippets и нажмем Enter. Откроется список доступных языков. Выберите язык, для которого вы хотите создать сниппет, и VSCode откроет соответствующий файл JSON.

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

{
  // Разместите здесь свои фрагменты для JS. Каждый фрагмент определяется именем фрагмента и имеет префикс, тело и описание.
  // Префикс — это то, что используется для запуска фрагмента, а тело будет расширено и вставлено. Возможные переменные:
  // $1, $2 для позиций табуляции, $0 для конечной позиции курсора и ${1:label}, ${2:another} для заполнителей.
  // Заполнители с одинаковыми идентификаторами связаны.
  // Пример:
  "Вывести консоль лог": {
    "prefix": "log",
    "body": [
      "console.log('$1');",
      "$2"
    ],
    "description": "Вывод console.log"
  }
}

Далее находясь в js файле нажимаем горячие клавиши Ctrl + Shift + P и вводим слово Insert Snippet. Появится список доступных сниппетов, при выборе сниппета он вставится в js код. Так же можно просто написать ключевое слово сниппета, в нашем примере это слово log и нажать клавишу Tab. Ключевое слово развернется в заданную js конструкцию.

Стили кодирования (PHP линтеры)

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

Не нужно ставить сразу два линтера, выберете какой-то один.

PHP CodeSniffer

Для того чтобы вручную не вводить команды, описанные в статье про установкой линтеров, настроим VSCode на работу с PHP_CodeSniffer. Зайдем в расширения Ctrl + Shift + X введем в поиске phpcs и установим это расширение.

Войдем в настройки Ctrl + ,, в правом верхнем углу нажмем на иконку в виде листа (Open Settings Json). Добавим в json файл следующие настройки.

"phpcs.autoConfigSearch": true,
"phpcs.executablePath": "/home/username/.config/composer/vendor/bin/phpcs",
"phpcs.standard": "PSR12"

Не забудьте изменить username в пути на имя своего пользователя.

PHP CS Fixer

Для того чтобы вручную не вводить команды, описанные в статье про установкой линтеров, настроим VSCode на работу с PHP CS Fixer. Зайдем в расширения Ctrl + Shift + X введем в поиске php cs fixer и установим это расширение.

Войдем в настройки Ctrl + ,, в правом верхнем углу нажмем на иконку в виде листа (Open Settings Json). Добавим в json файл следующие настройки.

"php-cs-fixer.executablePath": "/home/username/.config/composer/vendor/bin/php-cs-fixer",
"php-cs-fixer.onsave": true,
"php-cs-fixer.rules": "@PSR12"

Не забудьте изменить username в пути на имя своего пользователя.

Настройка Xdebug

Основная статья по установке и настройке Xdebug находится на этой странице. Ознакомьтесь сначала с ней и продолжайте читать далее этот раздел.

Горячие клавиши

Список горячих клавиш, которые я использую при работе с VSCode.

• Ctrl + , — страница настроек
• Alt + Mouse — единичное выделение
• Alt + Shift + Mouse — множественное выделение
• Ctrl + Alt + L — автоформатирование кода (пользовательская настройка "format document")
• Ctrl + D — дублирование строки
• Ctrl + X — удаление строки
• Ctrl + Пробел — автокомплит служебные конструкции
• Ctrl + / — закомментировать строку
• Ctrl + Alt + T — обертка для выделенного слова (пользовательская настройка "Wrap with Abbreviation")
• Alt + Z — перенос строк
• Alt + J — выбор такого же выделенного объекта (пользовательская настройка "add selection to next find match")
• Alt + Shift + J — отмена выбора выделенного объекта (пользовательская настройка "move last selection to previous find match")
• Ctrl + F — поиск
• Ctrl + R — поиск и замена (пользовательская настройка "replace")
• Ctrl + Shift + P — командная палитра
• Ctrl + N — создать новый документ
• Ctrl + K Ctrl + W — закрыть все вкладки
• Ctrl + E — последние файлы
• Ctrl + Tab — переключение между файлами
• Ctrl + Shift + G — меню гит
• Ctrl + Shift + ` — открыть терминал