VSCode — самый популярный редактор кода среди веб-разработчиков. Вы можете использовать его с нуля, однако со временем его базовых функций станет недостаточно. Рассказываю, как сам докрутил этот редактор под свои потребности.
Статья дорабатывается по вашим замечаниям. Спасибо всем за комментарии.
Содержание
Вводная часть
История появления редактора
VSCode разрабатывается в Microsoft и унаследовал имя от их тяжеловесного IDE — Visual Studio. Первый релиз был аж в апреле 2015 года. В 2016 году редактор стал доступен для всех желающих.
Особенности
Сделан с помощью Electron.js, то есть под капотом у него HTML + CSS + JS
Поддерживает разработку на разных языках: Java, JavaScript, Go, Node.js, Python, C++ и так далее (см. Расширения)
Имеет ОГРОМНОЕ количество настроек, которыми удобно управлять
Многие фичи скрыты из графического интерфейса, но их можно найти через Command Pallete (
cmd/win + shift + P)Возможности редактора могут быть дополнены с помощью расширений
Удобный и быстрый магазин расширений внутри редактора и через браузер
Собирает данные и шлёт их в Microsoft, но телеметрию можно отключить в настройках
В среднем скорость отклика медленнее, чем у нативных конкурентов
Преимущества
Быстрее, чем типичное приложение на Electron.js
Сообщество
Плотная интеграция с Github
Плотная интеграция с TypeScript
Open source
Бесплатный
Низкий порог входа
Можно настроить под себя почти что угодно
Настройки
Настройки — это моя любимая часть VSCode. За пять лет я потратил на них десятки часов (если не сотни).
JSON vs UI
У настроек есть два режима просмотра/управления:
Стандартный просмотр через UI с категориями и поиском
Использую для поиска по настройкам или для просмотра возможных значений
Просмотр большого JSON со всеми изменёнными настройками
Использую во всех остальных случаях, к тому же чаще
Забавно, что шоткат для настроек cmd/win + , по умолчанию вызывает именно JSON-режим. А для GUI-режима нужно нажать более длинный cmd/win + shift + ,. Наверное, это исторически так сложилось 🤷♂️
Синхронизация настроек
VSCode сам научился синхронизировать настройки между устройствами. До этого требовалось расширение и пара гистов на Гитхабе.
Кажется, тут нечего добавить, потому что синхронизация легко настраивается через меню «Шестерёнка» (требует логина через Github).
Сортировка и поиск настроек через JSON
В режиме JSON мы видим только те параметры, которые отличаются от настроек по умолчанию. Если вы открыли VSCode впервые, то в файле будет только {}. Со временем, по мере подстройки редактора, он наполнится — в моём сейчас 370 строк.
Чтобы было удобнее ориентироваться, я использую автосортировку по алфавиту (с помощью расширения JSON-sort) и пользуюсь поиском по ключевым словам в файле.
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, // useful for russian symbolsУлучшение JS
Эти настройки позволяют делать статическую типизацию в JS без использования TypeScript.
// подсказки типов ⬇️
"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,Расширения
Я часто ищу новые расширения и отключаю бесполезные. Для того чтобы накопить несколько десятков любимых расширений, мне потребовалось 5 лет. Ищи favorite list ниже ;)
Featured
VSCode помимо хорошего поиска и удобных категорий имеет тэг с отборными расширениями, которые меняются примерно раз в месяц. Рекомендую иногда в него заглядывать, чтобы находить свежие и интересные штуки.
Любимые расширения
Error Lens
Улучшает подсветку ошибок, ворнингов и прочей информации
Change-case
Быстрая замена регистра и стиля написания выделенного текста: CONSTANT_CASE, snake_case, etc.
Material Icon Theme
Иконки в стиле Material Design, но главное что их очень много и они гармоничнее прочих. По-моему лучшие.
Project Manager
Лёгкий способ переключать проекты в редакторе
Quit Control for VSCode
Для тех, кто периодически всё проклинает из-за случайно нажатого
CMD + Q. Спасительная штука.
GitLens — Git supercharged
Git GUI на стероидах прямо в VSCode. Тот случай, когда 80% проблем легче решить из графического интерфейса, чем в терминале.
New Relic CodeStream: GitHub, GitLab, Bitbucket PRs and Code Review
Единый интерфейс для отправки, ревью и приёма ваших PR и MR в VSCode с удобным интерфейсом. Можно даже не заходить на сайт
бесплатного и устаревшего self-hosted GitLab вашей конторывашего хостинга для Гита
Markdown All in One
Всё, что вам надо для написания Markdown (keyboard shortcuts, table of contents, auto preview and more)
Open in browser
🤷♂️
Path Intellisense
Автокомплит для путей до файлов
Prettier - Code formatter
Автоматическое форматирование кода почти без настроек
Quokka.js
JS/TS интерактивная среда исполнения кода прямо в VSCode
REST Client
Как Postman, но в виде файлов в вашем проекте
Tabnine AI
Нейросетевые подсказки кода экономящие вам время
Turbo Console Log
console.logпо шоткату с генерацией подписей. Всё.
WakaTime
Штука, которая считает время написания кода, а не просто время открытого тикета или редактора. Есть подробная статистика.
Auto Rename Tag
Автоматическое переименование парных тэгов в HTML и JSX
Better Comments
Улучшенное комментирование кода с помощью аннотаций с предупреждениями, информацией, TODO и многим другим!
gitignore
Позволяет извлекать шаблоны .gitignore из репозитория https://github.com/github/gitignore.
ESLint
Интегрирует ESLint JavaScript в VS Code.
Babel JavaScript
Продвинутая подсветка для новейшего стандарта JS
Color Highlight
Указание цвета с колорпикером рядом с цветовыми кодами.
Draw.io Integration
Draw.io внутри VSCode
EditorConfig for VS Code
Поддержка EditorConfig
Git Graph
Визуализация ветвления в Git
GitHub Pull Requests and Issues
Работа с Github PRs и Issues внутри VSCode
GitHub Repositories
Управление репозиториями на Github через VSCode
HTML CSS Support
Автодополнение CSS
Intelli Refactor
Продвинутые возможности по авто-рефакторингу кода (как у IntelliJ IDEA)
IntelliSense for CSS class names in HTML
Автодополнение названий стилевых классов в HTML
LeetCode
Возможность поиска, проверки и подтверждения задач из LeetCode не выходя из VS Code
Live Share
Совместное редактирование кода в реальном времени
npm
Поддержка NPM для VS Code
Sort JSON objects
Умная сортировка JSON
Space Block Jumper
Для быстрого перемещения по блокам кода
🚀 Если у вас есть свои хитрости и находки, поделитесь в комментариях. Обсудим вместе!
