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

За несколько минут настройте в Visual Studio Code (VS Code) подсветку синтаксиса и автоматическое форматирование: редактор будет различать элементы кода по цвету и приводить файл к выбранному стилю при сохранении. Инструкция ориентирована на VS Code 1.85 и новее; пункты меню в более свежих выпусках могут немного отличаться.

Перед началом

Понадобятся установленный VS Code и файл с кодом. Для примера форматирования используем расширение Prettier — Code formatter. Оно поддерживает распространённые форматы, включая JavaScript, TypeScript, JSON, CSS, HTML и Markdown. Проверьте, что у вас есть доступ к Marketplace расширений или возможность установить расширение другим разрешённым способом.

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

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

1. Откройте файл и проверьте язык. Посмотрите на индикатор языка в правой части строки состояния внизу окна. Если редактор определил тип неверно, нажмите на название языка и выберите нужный, например JavaScript или HTML. Проверка: индикатор показывает выбранный язык, а ключевые слова и строки в файле отображаются разными цветами.
2. Установите форматтер. Откройте раздел Extensions на боковой панели, найдите Prettier - Code formatter от издателя Prettier и установите расширение. Проверка: расширение появилось в списке установленных. Если Marketplace недоступен, не скачивайте случайные копии: уточните у администратора сети или используйте официальный способ установки, доступный в вашей среде.
3. Выберите форматтер для файла. Откройте файл, нажмите Ctrl+Shift+P в Windows или Linux либо Cmd+Shift+P в macOS и запустите команду Format Document With. Выберите Prettier, затем Configure Default Formatter, если редактор предложит закрепить его для этого языка. Проверка: повторно откройте меню Format Document With — Prettier должен отображаться как выбранный форматтер.
4. Проверьте форматирование вручную. В палитре команд запустите Format Document. В файле JavaScript, например, форматтер может переставить отступы и пробелы; точный результат зависит от настроек проекта. Проверка: редактор изменил формат файла, а не только цвет текста. Если изменений нет, файл уже мог соответствовать выбранным правилам.
5. Включите форматирование при сохранении. Откройте настройки через Ctrl+, или Cmd+, и найдите Editor: Format On Save. Включите параметр. Проверка: внесите безвредное изменение в файл, сохраните его и убедитесь, что форматирование применилось. Сначала попробуйте на копии или в тестовом файле, если не хотите менять рабочий код.

Настройка для проекта

Параметр Format On Save можно включить через интерфейс настроек пользователя. Если хотите, чтобы правило действовало только в одном проекте, используйте его настройки рабочей области. В VS Code откройте палитру команд, выполните Preferences: Open Workspace Settings (JSON) и добавьте параметры ниже. Перед изменением существующего файла объедините настройки, а не заменяйте его содержимое целиком.

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

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

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

Если не получилось

• Цвета не соответствуют языку. Сначала проверьте индикатор языка внизу окна и выберите тип файла вручную. Для неизвестного расширения VS Code может не определить язык автоматически. Если язык выбран правильно, но подсветка всё ещё отсутствует, проверьте, включены ли расширения, отвечающие за него.
• Команда форматирования не найдена или ничего не делает. Убедитесь, что файл открыт в редакторе и расширение Prettier установлено и включено. Перезапустите VS Code только если установка расширения этого требует; затем снова вызовите Format Document With и проверьте доступные варианты.
• Появляется сообщение, что форматтер не установлен для типа файла. Установленный форматтер может не поддерживать расширение файла или быть выключен для этого языка. Проверьте язык в строке состояния и список поддерживаемых форматов расширения. Не назначайте Prettier по умолчанию для неизвестного типа, пока не убедитесь, что он его обрабатывает.
• Сохраняете файл, а форматирование не запускается. Проверьте параметр Editor: Format On Save и выбранный форматтер именно для текущего языка. Настройка могла действовать только для другой рабочей области или быть переопределена настройками проекта.
• После форматирования изменились отступы или кавычки. Это может быть результатом правил форматтера, а не поломкой файла. Посмотрите diff до коммита, сравните настройки проекта и не форматируйте весь репозиторий, если хотели изменить только один файл.

Что важно знать о цветах и правилах

Тема оформления влияет на палитру подсветки, но обычно не меняет правила форматирования. Чтобы выбрать тему, откройте палитру команд и найдите Preferences: Color Theme. Если цвета мешают читать код, попробуйте встроенную тему с хорошим контрастом; это визуальное изменение, оно не исправляет ошибки программы.

Термин: форматтер. Это программа или расширение, которое по заданным правилам меняет оформление файла: отступы, пробелы, переносы строк и другие детали. Форматтер не равен линтеру: линтер ищет проблемы и нарушения правил, а форматтер приводит текст к единому виду.

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

Проверьте настройку на одном файле и посмотрите изменения в панели Source Control или через сравнение с сохранённой версией. Если проект командный, согласуйте форматтер и правила в репозитории: одинаковая настройка у участников сокращает шум в diff и конфликты при слиянии. Затем отдельно настройте линтер, если он нужен для поиска ошибок. Подсветка, форматирование и проверка кода решают разные задачи, и подменять одно другим не стоит.