Подсветка кастомных файлов/расширений в редакторе 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" } }

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

Ссылочки