Support Ukraine

Подсветка кастомных файлов/расширений в редакторе VS Code

фрагмент кода с яркой подсветкой синтаксиса

Часто в проектах встречаются файлы конфигураций без расширения такие как .postcssrc или .parcelrc. Если ваш редактор кода не знаком с данным типом файла он применит к нему дефолтные стили подсветке синтаксиса, в VS Code это html.

Мы можем поискать и установить новое расширение для VS Code, или можем подсказать едитору что внутри .parcelrc файла лежит именно JSON код. Для этого в корне проекта создадим новую папку .vscode c файлом settings.json внутри.

my-app
├── .vscode
│   └── settings.json
├── src
│   └── index.js
├── .parcelrc
└── .postcssrc

В файле settings.json мы пропишем настройки, которые будут примениться в конкретно данном проекте.

.vscode/settings.json

{
  "files.associations": {
    ".parcelrc": "json",
    ".postcssrc": "json"
  }
}

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

Шаблоны поиска

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

Я работаю на платформе Velo, где есть файлы с расширением .jsw. В этих файлах лежит обычный javascript, а данное расширение нужно только на этапе сборки для спец компиляции.

Здесь нам понадобятся шаблоны поиска, в VS Code используется формат поиска glob.

.vscode/settings.json

{
  "files.associations": {
    "*.jsw": "javascript"
  }
}

Тут мы указали что название файла может содержать любые символы (*) и должно заканчиваться строго на .jsw. Подробно с glob можно ознакомится здесь.

Глобальные настройки

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

Выполним пару команд

{
  /* тут могут быть всякие там настройки .... */

  "files.associations": {
    "*.jsw": "javascript"
  }
}

Теперь ваш редактор знает как работать с нужными вам файлами 🎉

Ссылочки