Visual Studio Code и его улучшения для новичков

Вводная часть

VSCode — Самый популярный редактор кода среди веб-разработчиков. Вы можете использовать его с нуля, однако для опытных программистов его базовых функций недостаточно. Здесь я описал, то как сам докрутил этот редактор под свои потребности.

Я фронтенд-разработчик, но также использую другие диалекты и языки, а также разрабатываю мобильное приложение и делаю простенькие сервера. В этом посте я указал, только то, что использую для разработки на JS.

Так как с недавних пор я ещё и преподаватель, то статья написана с расчётом на начинающих веб-разработчиков.

История появления редактора

VSCode разрабатывается в Microsoft и унаследовал имя от их тяжеловесного IDE — Visual Studio. Первый релиз был аж в апреле 2015. В 2016 редактор стал доступным для всех желающих.

Особенности

Преимущества

Почему не VSCode

Настройки

JSON vs UI

У настроек есть два режима просмотра/управления.

Забавно, что шоткат для настроек cmd/win + , по умолчанию вызывает именно JSON. А для UI нужно нажать более длинный cmd/win + shift + ,. Наверное это исторически так сложилось 🤷‍♂️

Синхронизация настроек

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

Кажется тут нечего добавить, потому что синхронизация легко настраивается через меню «Шестерёнка» (требует логина через Github).

Untitled

Сортировка и поиск настроек в JSON

В режиме JSON мы видим только те параметры, которые отличаются от настроек по умолчанию. Если вы открыли VSCode впервые, то JSON будет пустым. Со временем, по мере подстройки редактора, он станет больше — в моём сейчас аж 370 строк.

Чтобы было удобнее ориентироваться я использую автосортировку по алфавиту (с помощью расширения) и пользуюсь поиском по ключевым словам в файле.

VSCode сам линтит этот JSON: предупреждает об ошибках, подсказывает имена настроек и подсвечивает неиспользуемые опции.

Полезные настройки

Некоторые из моих любимых настроек. Их можно просто скопировать себе в JSON с настройками.

Доводка редактора

"editor.acceptSuggestionOnEnter": "off",
"editor.bracketPairColorization.enabled": true,
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true,
}
"editor.foldingImportsByDefault": true,
"editor.fontFamily": "'Fira Code', 'Courier New', monospace",
"editor.fontLigatures": true,
"editor.guides.bracketPairs": "active",
"editor.inlineSuggest.enabled": true,
"editor.lineNumbers": "interval",
"editor.linkedEditing": true, // doesn’t work for JSX 
"editor.minimap.enabled": false,
"editor.quickSuggestions": false,
"editor.scrollBeyondLastColumn": 0,
"editor.suggest.preview": true,
"editor.suggestSelection": "recentlyUsedByPrefix",
"editor.unicodeHighlight.ambiguousCharacters": false,

Улучшение JS

"javascript.inlayHints.enumMemberValues.enabled": true,
"javascript.inlayHints.functionLikeReturnTypes.enabled": true,
"javascript.inlayHints.parameterNames.enabled": "literals",
"javascript.inlayHints.parameterTypes.enabled": true,
"javascript.inlayHints.propertyDeclarationTypes.enabled": true,
"javascript.inlayHints.variableTypes.enabled": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"js/ts.implicitProjectConfig.checkJs": true,

Прочее

// Работа с файлами
"files.autoSave": "onFocusChange",
"files.defaultLanguage": "markdown",

// Доводка терминала
"terminal.integrated.defaultProfile.osx": "zsh",
"terminal.integrated.fontSize": 10,

// Доводка рабочей области
"workbench.colorCustomizations": {
    "tab.activeBackground": "#fff3"
},
"workbench.editor.limit.value": 5,

// ***
"extensions.ignoreRecommendations": true,

Расширения

Я часто ищу новые расширения и отключаю бесполезные. Чтобы накопить несколько десятков любимых расширения мне потребовалось 5 лет. Список ниже будет состоять на 80% из того, что вы найдёте в любой подобной статье.

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

Untitled

Любимые расширения