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

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

? С недавних пор я ещё и преподаватель в школе программирования Elbrus Bootcamp, поэтому статья написана с расчётом на начинающих веб-разработчиков – таких, как наши студенты.

Содержание

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

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

  • Особенности

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

  • Почему не VSCode

• Настройки

  • JSON vs UI

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

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

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

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

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

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

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 помимо хорошего поиска и удобных категорий имеет тэг с отборными расширениями, которые меняются примерно раз в месяц. Рекомендую иногда в него заглядывать, чтобы находить свежие и интересные штуки.

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

1. Error Lens

   Улучшает подсветку ошибок, ворнингов и прочей информации

2. Change-case

   Быстрая замена регистра и стиля написания выделенного текста: CONSTANT_CASE, snake_case, etc.

3. Material Icon Theme

   Иконки в стиле Material Design, но главное что их очень много и они гармоничнее прочих. По-моему лучшие.

4. Project Manager

   Лёгкий способ переключать проекты в редакторе

5. Quit Control for VSCode

   Для тех, кто периодически всё проклинает из-за случайно нажатого CMD + Q. Спасительная штука.

6. GitLens — Git supercharged

   Git GUI на стероидах прямо в VSCode. Тот случай, когда 80% проблем легче решить из графического интерфейса, чем в терминале.

7. New Relic CodeStream: GitHub, GitLab, Bitbucket PRs and Code Review

   Единый интерфейс для отправки, ревью и приёма ваших PR и MR в VSCode с удобным интерфейсом. Можно даже не заходить на сайт бесплатного и устаревшего self-hosted GitLab вашей конторы вашего хостинга для Гита

8. Markdown All in One

   Всё, что вам надо для написания Markdown (keyboard shortcuts, table of contents, auto preview and more)

9. Open in browser

   ?‍♂️

10. Path Intellisense

    Автокомплит для путей до файлой

11. Prettier — Code formatter

    Автоматическое форматирование кода почти без настроек

12. Quokka.js

    JS/TS интерактивная среда исполнения кода прямо в VSCode

13. REST Client

    Как Postman, но в виде файлов в вашем проекте

14. Tabnine AI

    Нейросетевые подсказки кода экономящие вам время

15. Turbo Console Log

    console.log по шоткату с генерацией подписей. Всё.

16. WakaTime

    Штука, которая считает время написания кода, а не просто время открытого тикета или редактора. Есть подробная статистика.

17. Auto Rename Tag

    Автоматическое переименование парных тэгов в HTML и JSX

18. Better Comments

    Улучшенное комментирование кода с помощью аннотаций с предупреждениями, информацией, TODO и многим другим!

19. gitignore

    Позволяет извлекать шаблоны .gitignore из репозитория https://github.com/github/gitignore.

20. ESLint

    Интегрирует ESLint JavaScript в VS Code.

21. Babel JavaScript

    VSCode syntax highlighting for today’s JavaScript

22. Color Highlight

    Highlight web colors in your editor

23. Draw.io Integration

    This unofficial extension integrates Draw.io into VS Code.

24. EditorConfig for VS Code

    EditorConfig Support for Visual Studio Code

25. Git Graph

    View a Git Graph of your repository, and perform Git actions from the graph.

26. GitHub Pull Requests and Issues

    Pull Request and Issue Provider for GitHub

27. GitHub Repositories

    Remotely browse and edit any GitHub repository

28. HTML CSS Support

    CSS Intellisense for HTML

29. Intelli Refactor

    Smartly select range for refactoring under cursor, like IntelliJ / Android Studio.

30. IntelliSense for CSS class names in HTML

    CSS class name completion for the HTML class attribute based on the definitions found in your workspace.

31. LeetCode

    Solve LeetCode problems in VS Code

32. Live Server

    Launch a development local Server with live reload feature for static & dynamic pages

33. Live Share

    Real-time collaborative development from the comfort of your favorite tools.

34. npm

    npm support for VS Code

35. npm Intellisense

    Visual Studio Code plugin that autocompletes npm modules in import statements

36. Sort JSON objects

    Sorts the keys within JSON objects

37. Space Block Jumper

    Jump vertically across space-delimited blocks.

? Если у вас есть свои хитрости и находки, поделитесь в комментариях. Обсудим вместе!