Полезные расширения VS Code

Здравствуйте, разработчики,

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

Оглавление

1. Введение
2. Список расширений VS Code
3. Заключение

Введение

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

Список расширений VS Code

1. Prettier

Это самое известное и используемое расширение в vs code.
Это расширение используется для форматирования кода, то есть когда мы пишем код, мы иногда не учитываем перевод строки, скобки после пробела и тому подобные вещи. Это расширение автоматически украшает ваш код и делает его чистым и более читабельным.

Оно поддерживает множество языков программирования, таких как JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular, GraphQL, Markdown и др.

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

2. Выделение ToDo

Иногда, когда мы пишем код, в голове возникает много идей и логики, и мы записываем эти идеи в виде комментария в блоке кода, а через несколько дней, если мы хотим их вспомнить, их довольно сложно найти в коде.
Так что это расширение поставляется с замечательной функцией выделения определенных ключевых слов в коде, таких как NOTE, TODO, FIXIT, а также предоставляет возможность настройки ключевых слов, их фона, переднего плана и цвета текста.
Для настройки ключевых слов и прочего, command + , (Windows / Linux: File -> Preferences -> User Settings) откройте файл vscode settings.json.

https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight

3. Живой сервер

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

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

4. Live Share

Это расширение позволяет вам совместно с другими редактировать и отлаживать в режиме реального времени любые языки программирования, которые вы используете, или типы приложений, которые вы создаете. Оно позволяет мгновенно (и безопасно) делиться текущим проектом.

https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare

5. Live Share Audio

Это расширение добавляет возможность аудио звонков в Visual Studio Live Share (обсуждалось в пункте 4).
Участники сеанса Live Share могут автоматически присоединиться к разговору и общаться между собой, без необходимости предварительно согласовывать, какое средство голосовой связи использовать.
Если вы преподаете онлайн или проводите тренинги/наставничество, это расширение будет очень полезно.

https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-audio

6. Проверка орфографии кода

Когда мы пишем код, иногда мы по ошибке вводим неправильное написание какого-либо содержимого в коде (не ключевых слов языка программирования).
Это расширение проверяет орфографические ошибки в исходном коде и хорошо работает с кодом в верблюжьем регистре. Это расширение является одним из обязательных расширений для разработчиков, которые пишут код.

ПРИМЕЧАНИЕ: У этого расширения есть много других версий для различных языков (например, русский, испанский, немецкий, французский и т.д.), проверьте это на vs code marketplace, если вам нужна какая-либо из них.

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

7. Code Snap

Это расширение делает красивые скриншоты вашего кода в VS Code.
Это очень удобно и полезно, когда вы документируете код или делитесь им с кем-то по почте или в социальных сетях.

https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap

8. Code Time

Это расширение в основном отслеживает время в Visual Studio Code.
Вы должны войти в это расширение, и у них есть замечательное веб-приложение для отображения данных метрик.
У них есть как бесплатные, так и платные планы.
Это расширение в основном используется фрилансерами для предоставления отчетов о времени клиентам.

https://marketplace.visualstudio.com/items?itemName=softwaredotcom.swdc-vscode

9. Code Runner

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

Вам просто нужно выделить блок кода, а затем щелкнуть правой кнопкой мыши и запустить.
Расширение поддерживает множество языков программирования, таких как C, C++, Java, JavaScript, Python, PowerShell, BAT/CMD, BASH/SH, Dart и многие другие.
Вы также можете запускать пользовательские команды.

https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

10. Выделение цветом

Это расширение используется для выделения цвета CSS в вашем коде, чтобы он стал более заметным для вас. Это расширение выделяет цветом только границу кода цвета css.

https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

11. Colorize

Это расширение используется для выделения цвета CSS в коде, чтобы он стал более заметным для вас. Это расширение окрашивает код цвета css тем же цветом, что и код заливки.

https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize

12. Радужные палитры отступов

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

https://marketplace.visualstudio.com/items?itemName=evondev.indent-rainbow-palettes

13. Радуга отступов

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

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

14. Peacock

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

Это одно из моих любимых расширений.

https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock

15. Bracket Pair Colorization Toggler

Расширение VS Code, которое дает вам простую команду для быстрого переключения глобальной настройки «Bracket Pair Colorization», добавленной в VS Code v1.60.
Иногда это расширение полезно, если вы используете более старую версию vs code.

https://marketplace.visualstudio.com/items?itemName=dzhavat.bracket-pair-toggler

16. Git Graph

Это расширение является одним из самых полезных в мире разработки.
Это расширение помогает вам просматривать историю git (коммиты, тайники и т.д.) в графическом виде, а также выполнять действия git прямо с панели этого расширения.

https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph

17. Git Lens

Это расширение является наиболее популярным на рынке vs code для управления и поддержки исходного кода в vs code. Это расширение предоставляет множество функций, например, вы можете тянуть, толкать, фиксировать, а также сравнивать коды и многое другое.

Это расширение показывает дату фиксации и сообщение о фиксации в каждой строке кода (эта функция действительно очень полезна и полезна).

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

18. История Git

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

https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

19. i18n Ally

Это расширение используется для перевода текста в коде на другой язык.
Оно поддерживает множество языков, таких как английский, испанский, немецкий, французский, голландский и т.д.

https://marketplace.visualstudio.com/items?itemName=Lokalise.i18n-ally

20. ES Lint

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

После установки ESLint в Visual Studio Code, вы заметите разноцветные подчеркивания в ваших .js файлах, выделяющие ошибки. Эти маркеры имеют цветовую кодировку в зависимости от степени серьезности. Если вы наведете курсор на подчеркнутый код, вы увидите сообщение, которое объяснит вам ошибку. Таким образом, ESLint помогает нам находить и устранять ошибки в коде и синтаксисе.

ESLint может сделать для вас еще больше. ESLint можно изменить так, чтобы он автоматически исправлял ошибки при каждом сохранении файла.

Вы также можете изменить конфигурацию этого расширения путем перехода к файлу .vscode/setting.json следующим образом

{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": ["javascript"]
}

Вы также можете настроить правила линтинга.
например, выделять утверждения console.log и многое другое, подобное этому.

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

21. Sonar Lint

SonarLint — это бесплатное расширение IDE, которое позволяет вам устранять проблемы кодирования до их возникновения! Подобно проверке орфографии, SonarLint выделяет ошибки и уязвимости безопасности по мере написания кода, с четким руководством по устранению, чтобы вы могли исправить их еще до фиксации кода. SonarLint в VS Code поддерживает анализ C, C++, HTML, Java, JavaScript, PHP, Python и TypeScript.

Это расширение в основном используется для устранения уязвимостей безопасности в коде.

https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarlint-vscode

22. Веб-доступность

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

https://marketplace.visualstudio.com/items?itemName=MaxvanderSchee.web-accessibility

23. Wallaby.js

Wallaby.js — это инструмент повышения производительности разработчика, который запускает ваши тесты JavaScript и TypeScript прямо во время ввода текста, выделяя результаты в вашей IDE прямо рядом с кодом.

https://marketplace.visualstudio.com/items?itemName=WallabyJs.wallaby-vscode

24. Лучшие комментарии

Это расширение поможет вам писать более удобные для человека комментарии в вашем коде.
С помощью этого расширения вы сможете распределить свои комментарии по категориям:
Предупреждения
Запросы
TODOs
Выделения
Закомментированный код также может быть оформлен так, чтобы было понятно, что код не должен быть там.

и все эти аннотации вы можете окрасить в любой цвет в зависимости от категории.

Любые другие стили комментариев можно задать в настройках.

Вы также можете написать TODO, и это расширение также выделит его.

https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

25. CSS Peek

Это расширение позволяет подглядывать в строки css ID и class.
Допустим, вы задали имя класса или id элементу HTML и хотите увидеть стиль этого класса, вы можете нажать ctl и навести курсор, чтобы увидеть стиль.
а также вы можете
~Peek: Загрузить css-файл в строку и быстро внести правки прямо там. (Ctrl+Shift+F12)
~Go To: перейти непосредственно к css-файлу или открыть его в новом редакторе (F12)
~Hover: показать определение при наведении на символ (Ctrl+hover).

https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

26. DotENV

Это расширение полезно для подсветки синтаксиса .env.

https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

27. Автоимпорт

Автоматически находит, разбирает и предоставляет действия с кодом и завершение кода для всех доступных импортов. Работает с Typescript и TSX.

https://marketplace.visualstudio.com/items?itemName=steoates.autoimport

28. Стоимость импорта

В большинстве фреймворков мы импортируем некоторые внешние или внутренние библиотеки или файлы.
Эта библиотека показывает стоимость импорта, то есть размер импорта в реальном времени в строке кода, куда вы импортировали.

https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

29. Автоматический тег закрытия

Это расширение автоматически добавляет тег закрытия HTML/XML, так же как это делает Visual Studio IDE или Sublime Text.

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

30. Тег автоматического переименования

Это расширение автоматически переименовывает парные теги HTML/XML, как это делает Visual Studio IDE.
Когда вы переименовываете один HTML/XML тег, автоматически переименовывается и парный HTML/XML тег.

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

31. JavaScript ES6 Code Snippet

Это расширение содержит фрагменты кода для JavaScript в синтаксисе ES6 для редактора VS Code (поддерживает как JavaScript, так и TypeScript).

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

32. ReactJS Code Snippet

Это расширение содержит фрагменты кода для ReactJS и основано на потрясающем пакете babel-sublime-snippets.

https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets

33. Jumpy

Jumpy обеспечивает быстрое перемещение курсора, вдохновленный одноименным пакетом Atom.

https://marketplace.visualstudio.com/items?itemName=wmaurer.vscode-jumpy

34. Path Intellisense

Плагин Visual Studio Code для автозаполнения имен файлов.

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

35. NPM Intellisense

Плагин Visual Studio Code для автозаполнения модулей npm в операторах импорта.

https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

36. Markdownlint

При редактировании Markdown-файла в Code с установленным markdownlint все строки, нарушающие одно из правил markdownlint (см. ниже), будут вызывать предупреждение в редакторе.

https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint

37. Regex Previewer

Показывает совпадения текущего регулярного выражения в документе бок о бок.

https://marketplace.visualstudio.com/items?itemName=chrmarti.regex

38. Stylelint

Это расширение предоставляет правило линтинга для файлов css и scss.

https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint

39. Quokka.js

Quokka.js — это инструмент повышения производительности разработчика для быстрого создания прототипов JavaScript / TypeScript. Значения времени выполнения обновляются и отображаются в вашей IDE рядом с вашим кодом по мере ввода.

Нажмите ctl+shift+p(показать все команды) в VS Code в windows machine.
Отсюда вы можете создать новый js файл с Quokka и начать кодирование JS.

https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

40. Менеджер проектов

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

Это очень удивительное и очень полезное расширение

https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

41. Иконки VS Code

Это расширение просто для развлечения и для того, чтобы ваш vs код выглядел привлекательно. Это расширение создает иконки на основе типа файла, и они действительно выглядят очень здорово.

https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

42. VS Code React Refactor

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

С этим расширением мы можем просто выбрать блок кода, который мы хотим переместить и все остальные вещи это расширение возьмет на себя.

https://marketplace.visualstudio.com/items?itemName=planbcoding.vscode-react-refactor

43. Polacode

Это расширение делает красивые скриншоты вашего кода в VS Code.
Можно сказать, что это расширение является альтернативой CodeSnap.

https://marketplace.visualstudio.com/items?itemName=pnp.polacode

44. Remind Me

Это простое приложение для напоминаний в VS Code,
Это расширение будет напоминать вам о чем-либо наряду с написанием кода в самом vs Code.

https://marketplace.visualstudio.com/items?itemName=cg-cnu.vscode-remind-me

45.Excel Viewer

Редактирование таблиц Excel и CSV файлов в Visual Studio Code и VS Code for the Web

https://marketplace.visualstudio.com/items?itemName=GrapeCity.gc-excelviewer

46. Turbo Console Log

console.log может сделать или сломать вашу производительность. Turbo Console Log — это активный плагин для VS Code, который позволяет вам выбрать переменную для объекта отладки и автоматически добавляет сообщения журнала в ближайшую родственную строку. Это позволяет быстро отлаживать, не записывая никакого кода console.log.

https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log

47. Пользовательский интерфейс Test Explorer

Это расширение предоставляет разработчикам пользовательский интерфейс для запуска их тестов в Visual Studio Code. Расширение поддерживает такие языки, как JavaScript, C, C++, Exlir, Elm, Go, Haxe, Java, Python, Ruby, REST/GraphQL и другие популярные языки и реализации.

https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-test-explorer

48. ES7+ React/Redux/React-Native snippets

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

https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

49. Закладки

Это расширение позволяет добавлять закладки в ваш код, помогая вам быстро ориентироваться и легко переходить назад и вперед.

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

https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks

50. Переключатель профилей

Вы используете VS Code для разработки/кодирования, например, для создания фронтенда на javascript, написания бэкенда на python или часто переключаетесь между техническими стеками? Это расширение позволяет вам создавать различные профили, которые сохраняют определенные расширения, например, один для React, другой для Angular, третий для Python и т.д. Таким образом, вам придется менять конфигурацию для каждого технического стека только один раз.

https://marketplace.visualstudio.com/items?itemName=aaronpowell.vscode-profile-switcher

Заключение

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

Спасибо, что дочитали до этого момента. Это краткое введение в некоторые расширения VS Code.

Если вы нашли эту статью полезной, поделитесь ею. Возможно, кто-то тоже найдет ее полезной. Если вы найдете какие-либо технические неточности, пожалуйста, не стесняйтесь создать проблему.

Надеюсь, эта статья будет для вас приятным и информативным чтением.
ПОСЕТИТЕ САЙТ https://www.capscode.in/blog, ЧТОБЫ УЗНАТЬ БОЛЬШЕ…

Увидимся в моей следующей статье в блоге, берегите себя!!!

Спасибо,

CapsCode