20+ лучших плагинов для VSCode

На YouTube-канале Coding With Adam вышел обзор 20 лучших плагинов для IDE VSCode.

Вот, какие плагины обозреваются в ролике:

1. Адам представляет лучшие расширения для редактора кода VS Code.
2. Prettier - это инструмент для форматирования кода, который автоматически приводит код к единому стилю при сохранении.
   
3. Code Spellchecker помогает исправлять орфографические ошибки и поддерживает множество языков.
   
4. ESLint - статический анализатор кода для выявления проблем в JavaScript, подсвечивает ошибки в коде.
   
5. ErrorLens улучшает визуализацию ошибок, выделяя весь ряд и отображая сообщение об ошибке в строке.
   
6. Material Icon Theme обновляет иконки в VS Code, делая их более наглядными и красочными.
   
7. Live Server запускает локальный сервер разработки с функцией Live Reload для HTML и JavaScript.
   
8. Auto Rename Tag автоматически переименовывает закрывающий тег при изменении открывающего.
   
9. Peacock позволяет изменять цвет окна VS Code для удобства работы с несколькими проектами.
   
10. Auto Open Markdown Preview автоматически открывает предпросмотр Markdown файлов.
    
11. Markdown All-in-One добавляет полезные горячие клавиши для работы с Markdown.
    
12. Code Runner позволяет запускать фрагменты кода для многих языков программирования.
    
13. Jest и Jest Runner - расширения для удобной работы с тестами в Jest.
    
14. Simple React Snippets увеличивает производительность разработки в React.
    
15. GitHub Copilot - ИИ-помощник в написании кода, требует платной подписки.
    
16. IntelliCode - ИИ-помощник для улучшения автодополнения кода, доступен бесплатно.
    
17. GitLens, Git History и Git Graph - расширения для улучшения работы с системой контроля версий Git.
    
18. VS Code Pets - забавное расширение, добавляющее питомцев в редактор.
    

Ниже — транскрибированный перевод ролика.

В этом видео я покажу вам некоторые из лучших расширений для VS Code. Это Coding with Adam, и давайте перейдем к этим расширениям.

Prettier

На первом месте - Prettier. Prettier - это мнение о форматировании кода. У меня установлено так, что каждый раз, когда я сохраняю, он форматирует мой код.

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

Для более подробной информации, посмотрите мое видео о том, как установить, настроить и настроить Prettier.

Code Spellchecker

Далее у нас есть Code Spellchecker. Это расширение - отличный проверяющий орфографию. Оно действительно сокращает количество орфографических ошибок и предотвращает те неловкие орфографические ошибки в запросах на вытягивание. Оно поддерживает английский и многие другие языки.

Вы даже можете добавить пользовательские словари. Вот небольшая демонстрация проверки орфографии. Как вы можете видеть, я написал слово player неправильно.

Он также учитывает стиль написания "camel case". Если я исправлю это слово, он изменит не только это слово, но и это слово здесь. Так что мы нажмем на лампочку и затем на player, и оба слова будут исправлены. Для более подробной информации о том, как установить и настроить проверку орфографии кода, посмотрите мое видео.

ESLint

Далее у нас есть ESLint. Это инструмент статического анализа кода для выявления проблем в вашем JavaScript-коде. С помощью этого расширения он будет выделять эти проблемы, при условии, что у вас установлен ESLint в рабочем пространстве или глобально.

Вот пример проблемы с ESLint. Как вы можете видеть, он подчеркнул его красным, потому что я поставил две точки, и если мы наведем мышь на это, мы увидим ошибку разбора, неожиданный токен, ESLint. ErrorLens - идеальный компаньон для Spellchecker, ESLint и других расширений, добавляющих языковую диагностику. Он будет выделять всю строку, когда это возможно, и показывать сообщение об ошибке в строке. С включенным error lens, вы можете видеть, что наши строки теперь выделяются. Правила ESLint выделяются красным, и оно показывает нам сообщение справа. Ошибки проверки орфографии выделяются синим, и сообщение также справа.

Это означает, что нам больше не нужно наводить мышь на ошибку, чтобы увидеть сообщение об ошибке. Расширение темы иконок материала обновляет ваши иконки проводника до иконок материала, которые выглядят намного лучше. Плюс, вы получаете лучшую иконку папки. Это тема иконок по умолчанию для VS Code здесь.

Это не так уж и плохо. Я особенно не люблю папки. Давайте переключимся на тему иконок материала. Когда мы это делаем, мы получаем правильные папки. И в зависимости от названия папки, вы можете получить разное изображение.

Live Server

Например, звуки. У нас есть приложение React с компонентами. И мы получаем эти действительно красочные яркие иконки. Расширение Live Server позволяет вам запускать локальный сервер разработки с Live Reload. Это отлично подходит для написания HTML и JavaScript. Лично я использую это для разработки игр на JavaScript.

Возьмем этот пример игры Space Invaders, который я написал, урок вы можете взять с моего канала на YouTube, который я оставлю в описании. Мы можем запустить веб-сервер разработки, щелкнув правой кнопкой мыши по файлу index.html и выбрав открыть с помощью live server. Затем мы можем внести изменение в CSS и нажать кнопку сохранить, и вы увидите, что страница автоматически перезагрузится. Далее у нас есть автоматическое переименование тега, что является функцией, которой мне хотелось бы, чтобы VS Code обладал, но к счастью есть это расширение. Без этого расширения, если я переименую этот div в span, он не переименует закрывающий тег.

С включенным этим расширением, если я переименую это от div к span, он также переименует закрывающий тег. Вы когда-нибудь работали с более чем одним проектом с разными окнами VS Code, это может быть запутанным, какой проект к какому относится.

Peacock

Вот простое решение, чтобы иметь разный цвет для каждого окна VS Code, используя расширение под названием Peacock. С Peacock мы легко можем установить разный цвет для каждого окна. Например, мы можем перейти в командную панель, набрать Peacock и выбрать Изменить на любимый цвет, чтобы выбрать разный цвет для этого окна VS Code.

Auto Open Markdown Preview

Как вы можете видеть здесь, у меня разные окна VS Code, и каждое из них визуально отличается своим разным цветом, что делает легким идентификацию разных проектов. Еще одно экономящее время расширение - Auto Open Markdown Preview. Это расширение автоматически откроет предварительный просмотр markdown.

Давайте посмотрим на это. Если мы перейдем в наш обозреватель и нажмем на файл readme слева, мы увидим, что у нас есть режим редактирования, а справа мы получаем предварительный просмотр. Это отлично для редактирования и когда вы хотите прочитать readme в отформатированном виде.

Markdown All-in-One

Еще одно отличное расширение Markdown - это Markdown All-in-One. Оно добавляет целый ряд отличных быстрых клавиш. Например, мы можем сделать этот текст жирным, как в Word.

Мы также можем сделать текст курсивом. Для заголовков в верхней части экрана здесь я могу переключаться между ними, используя клавиатуру. Для получения дополнительной информации ознакомьтесь с отличной документацией по клавиатурным сочетаниям и множеством функций, которые она предоставляет.

Code Runner

Бывали ли вы в ситуации, когда вам нужно запустить фрагмент кода? В VS Code есть расширение под названием Code Runner.

Code Runner может запускать фрагменты кода для многих разных языков, от C до языка под названием ZIG. После установки расширения CodeRunner у вас появится этот значок воспроизведения вверху. У нас есть этот файл JavaScript здесь, и мы собираемся запустить его. И когда мы его запустим, мы получим вывод в нашей консоли.

Jest

Далее у нас есть расширение Jest, и его приятно использовать. После установки у вас появится этот значок динамика теста слева. После щелчка по нему вы увидите список ваших тестов и статус для каждого теста. Отсюда вы также можете запустить свой тест обычным образом или в режиме отладки.

Внутри вашего тестового файла вы также получите значок рядом с каждым тестом, который указывает на статус. Если вы нажмете на него, он запустит тест, и если вы щелкнете правой кнопкой мыши, вы сможете выбрать между запуском теста и отладкой теста. Следующее расширение также может запускать тесты Jest, и оно называется just runner. Это расширение добавляет кнопку запуска и кнопку отладки над каждым тестом. Используйте простое расширение сниппетов React, чтобы увеличить свою производительность в React, как вы можете видеть из отличной документации, есть множество различных сниппетов, которые вы можете использовать. Давайте скажем, что мы создаем компонент заголовка, и мы хотим быстро его создать. Ну, мы можем ввести FFC, что означает синтаксис функции компонента, нажать вкладку.

Он создает два курсора, где мы можем ввести заголовок, нажать Escape, а затем быстро добавить наш div здесь, который будет нашим заголовком.

GitHub Copilot 

GitHub Copilot - это парный программист на основе искусственного интеллекта прямо в вашей среде разработки. Он может предложить строки или целые функции для написания. GitHub Copilot использует специальную версию GPT-3, которая была обучена на большом объеме общедоступного исходного кода. Я использовал GitHub Copilot в прошлом и нашел его очень полезным.

К сожалению, теперь он больше не бесплатен и требует ежемесячной подписки. Для быстрого введения ознакомьтесь с моим видео о GitHub Copilot.

IntelliCode

Расширение IntelliCode - это помощник на основе искусственного интеллекта для Python, TypeScript, JavaScript и Java. IntelliCode - это улучшенная версия встроенной функции автозавершения кода IntelliSense в VS Code. Он использует искусственный интеллект для предоставления более точных предложений для автозавершения кода.

Он делает это, анализируя контекст кода разработчика, чтобы делать более точные предложения. Он не такой мощный, как GitHub Copilot, однако он бесплатен. Если вы пишете какой-либо YAML в VS Code, установите следующие несколько расширений, сосредоточенных на Git, системе контроля версий.

Gitlan's Git Supercharged

Первое расширение - Gitlan's Git Supercharged. Как вы можете понять из названия, оно добавляет множество функций в VS Code.

Лично я использовал только несколько из них и продолжаю открывать новые. Большинство функций бесплатны, а некоторые требуют план. Первая функция - git blame.

Как вы видите, на каждой строке он сообщает мне, кто был последним разработчиком, который редактировал эту строку. Еще одна функция, которую я нахожу очень полезной в git lens, - это все дополнительные вкладки, которые мы получаем в области управления исходным кодом, чтобы увидеть наши коммиты, ветки, удаленные, тире и многое другое. Следующая функция, которую я люблю, - это графическое представление нашей истории коммитов. К сожалению, для этой функции требуется план.

Git history

Однако мы можем исправить это, используя другое расширение. Расширение git history позволяет вам увидеть графическое представление вашей истории git. Перейдя на вкладку управления исходным кодом и нажав на этот значок, мы можем увидеть графическое представление нашей истории git. С этого экрана вы можете выполнять различные действия, такие как создание новой ветки, тега и многое другое.

В отличие от gitlin's supercharge, эта версия бесплатна.

Git graph

Еще одно расширение, похожее на историю git, - это git graph. Git graph можно получить тем же способом, перейдя на вкладку управления исходным кодом и нажав на эту иконку. Как видите, у нас есть графическое представление нашей истории git.

Отсюда мы можем выполнять различные действия, как и в git history.

VS Code Pets

И, наконец, у нас есть VS Code Pets, что является действительно забавным расширением. С этим расширением вы можете иметь домашних животных в своем VS Code. После установки расширения вы можете перейти в свой проводник, где вы должны увидеть своих питомцев слева. Вы можете добавить больше питомцев, нажав на плюс и выбрав питомца.