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
Для быстрого перемещения по блокам кода
🚀 Если у вас есть свои хитрости и находки, поделитесь в комментариях. Обсудим вместе!
