Подсветка и форматирование в VS Code: что настроить заранее

За 10–15 минут вы настроите подсветку и форматирование в Visual Studio Code: редактор будет распознавать выбранные языки, а Prettier — приводить JavaScript, TypeScript, JSON, CSS и HTML к единому виду. Инструкция рассчитана на VS Code 1.99 и новее для Windows, macOS и Linux. Перед включением форматирования при сохранении проверьте настройки на тестовом файле: редактор меняет содержимое, а не только его отображение.

Что нужно иметь до начала

Установите VS Code и откройте папку проекта, а не только один файл: так удобнее проверить изменения и не потерять контекст настроек. Для установки расширения нужен доступ к Marketplace или уже установленное расширение Prettier. Если проект важный, убедитесь, что изменения можно отменить: например, сохраните копию файла или проверьте, что рабочая копия Git чистая.

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

Подсветка меняет то, как код выглядит на экране. Форматирование меняет сам файл — и это изменение попадёт в коммит.

Настройте редактор по шагам

1. Проверьте режим языка. Откройте файл и посмотрите на индикатор языка в правой части нижней строки VS Code. Если там указан не тот язык или Plain Text, щёлкните по индикатору и выберите нужный язык, например JavaScript или JSON. Проверка: индикатор показывает выбранный язык, а строки кода получили подсветку.
2. Установите Prettier. Откройте панель расширений сочетанием Ctrl+Shift+X в Windows и Linux или Cmd+Shift+X в macOS. Найдите Prettier - Code formatter от Prettier и установите расширение. Проверка: расширение отображается в списке установленных и включённых.
3. Запустите форматирование вручную. Откройте тестовый файл поддерживаемого типа и вызовите команду Format Document через палитру команд. Стандартное сочетание — Shift+Alt+F в Windows и Linux, Shift+Option+F в macOS. Если редактор спросит, какой форматтер выбрать, укажите Prettier. Проверка: отступы и переносы изменились согласно настройкам форматтера, а в нижней строке остался правильный режим языка.
4. Включите форматирование при сохранении. Откройте палитру команд, найдите Preferences: Open User Settings (JSON) и добавьте настройки ниже. Если в файле уже есть параметры, объедините их с существующим объектом: не создавайте второй JSON-объект и не дублируйте одинаковые ключи. Проверка: файл настроек сохранился без ошибок, а в списке проблем не появилась ошибка разбора JSON.
5. Проверьте сохранение на копии. В тестовом файле измените отступ или разнесите простой объект на несколько строк, затем сохраните его. Проверка: Prettier отформатировал файл, а в обозревателе изменений видно только ожидаемое форматирование. Если файл не изменился, запустите Format Document вручную и проверьте выбор форматтера.

Настройки для VS Code 1.99 и новее. Это полный корректный JSON-объект: если создаёте отдельный тестовый файл настроек, его можно использовать целиком. В пользовательском settings.json объедините содержимое с уже существующими параметрами.

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

В этом примере форматирование при сохранении включено только для пяти типов файлов. Так вы не назначаете Prettier форматтером для языков, которые он не поддерживает. Для других языков настройте подходящее расширение отдельно: проверьте его документацию и идентификатор форматтера, не копируйте настройку наугад.

Если подсветка или форматирование не работают

• Цветов нет или они не подходят. Проверьте режим языка в нижней строке. Если файл открыт как Plain Text, VS Code не будет применять к нему подсветку конкретного языка. Выберите правильный режим; если нужного языка нет в списке, проверьте, требуется ли для него языковое расширение.
• Появляется сообщение вида There is no formatter for this file type installed. Для этого типа файла не найден подходящий форматтер. Убедитесь, что расширение установлено и включено, а сам язык поддерживается этим расширением. Подсветка при этом может работать — она не подтверждает наличие форматтера.
• Сохранение не меняет файл. Вручную вызовите Format Document. Если VS Code предлагает выбрать форматтер, назначьте Prettier; затем проверьте, что языковой блок в настройках совпадает с режимом файла. Например, блок [javascript] не применяется к файлу, который редактор считает Plain Text.
• Форматирование запускается не тем расширением. Для языка может быть доступно несколько форматтеров. Выберите Prettier при ручном форматировании и проверьте editor.defaultFormatter в соответствующем блоке. Настройки проекта могут влиять на поведение редактора, поэтому сравните пользовательские настройки с настройками рабочей папки.

Сноска. Форматтер — инструмент, который автоматически меняет пробелы, отступы, переносы строк и другие элементы оформления кода по заданным правилам. Он не исправляет логику программы и не гарантирует, что код работает правильно.

Что проверить перед работой в проекте

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

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

Что делать дальше

Сохраните изменения только после проверки diff и убедитесь, что правильно распознаны все файлы, с которыми вы работаете. Затем проверьте настройки форматирования в репозитории и договоритесь с командой о едином форматтере. Для языков, которых нет в примере, откройте официальную документацию VS Code и документацию выбранного расширения: назначайте форматтер только после проверки поддержки нужного языка.