⚒️ ТОП-27 плагинов для Visual Studio Code в 2023
Предлагаем список лучших расширений для VS Code в 2023 году: продуктивность, окрашивание сниппетов, контроль версий, форматирование, линтинг и отладка.
Visual Studio Code, или VS Code, — это известный и высоко оцениваемый редактор кода со множеством функций и расширений для улучшения опыта разработки. Одним из главных его преимуществ является гибкость, позволяющая разработчикам кастомизировать приложение в зависимости от их требований.
Более того, VS Code лёгок и быстр, что делает его прекрасным выбором для работы над большими проектами или с ограниченными ресурсами. У него имеются инструменты отладки, терминал и интеграция Git.
Некоторые расширения VS Code также доступны на Visual Studio Marketplace. Эти расширения превратят жизнь любого разработчика в сказку, помогая написать чистый код без багов.
Мы составили список лучших расширений для Visual Studio Code под следующими категориями:
- Расширения для продуктивности.
- Расширения для окрашивания сниппетов.
- Расширения для контроля версий.
- Расширения для форматирования и линтинга.
- Расширения для отладки и устранения неполадок.
- Расширения для JavaScript, React, Java, HTML и CSS.
Приступим!
Расширения для продуктивности
GraphQL
Расширение GraphQL предоставляет инструменты для написания, валидации и теста кода GraphQL. Оно включает в себя функцию автодополнения — предложения полей и аргументов для запросов прямо во время написания. Эта особенность экономит время и уменьшает возможность синтаксических ошибок.
Оно устанавливается со встроенным линтером, который будет проверять код на наличие ошибок и предлагать исправления. Используйте это расширение, чтобы избежать ошибок в коде GraphQL и повысить свою эффективность.
Remote – SSH
С помощью этого расширения вы можете надёжно подключиться к удалённым серверам, избегая необходимости в дополнительном ПО или терминалах. Remote – SSH даёт возможность с лёгкостью получать доступ, редактировать и передавать файлы на удалённый сервер, при этом оставаясь в знакомом интерфейсе VS Code.
Вы можете полностью использовать возможности Visual Studio Code без ограничений локальных настроек — выполнять команды, отлаживать код и даже использовать расширения на удалённом компьютере.
Settings Sync
Разработчики регулярно используют текстовые редакторы для создания веб-приложений. Однако, неудобно на нескольких устройствах поддерживать одни и те же настройки. Синхронизация настроек вручную также может занимать слишком много времени и давать разные результаты на устройствах.
С расширением Settings Sync вы можете с лёгкостью синхронизировать настройки на нескольких устройствах, сократить время конфигурации и даже делиться настройками с другими людьми.
Auto Rename Tag
VS Code автоматически подсвечивает парные теги и добавляет закрывающий тег при каждом использовании открывающего. Расширение Auto Rename Tag переименовывает теги, которые вы меняете, пока пишете код. Например:
- Когда вы переименовываете один HTML/XML-тег, он автоматически переименует все парные теги.
- Вы также можете использовать функцию автоматического переименования тегов в JavaScript — просто сохраните файл с расширением
.js. Расширение автоматически соединится с тегом javascript и переименует его.
Это расширение поддерживает только HTML, XML, PHP и JavaScript.
Tabnine
Расширение Tabnine завязано на продуктивности. Это помощник написания кода на основе ИИ, который ускоряет процесс разработки, дополняя код в реальном времени. Он поддерживает все популярные языки программирования и IDE.
У Tabnine есть функция автодополнения кода с помощью ИИ, примерно как у IntelliSense. Это расширение поможет писать код быстрее, предсказывая и предлагая следующие строки на основании контекста и синтаксиса.
CSS Peek
С расширением CSS Peek вы можете просто навестись на элемент HTML, чтобы открыть всплывающее окно и просмотреть все стили, применённые к элементу. Редактировать стили можно, нажав на окошко, после чего вы перейдёте к коду CSS. Эта функция позволит вам отказаться от того, чтобы каждый раз вручную прочёсывать весь код.
CSS Peek также поддерживает CSS-препроцессоры по типу SCSS, Less и Sass, так что его можно использовать для всех ваших проектов вне зависимости от препроцессора.
Расширения для окрашивания сниппетов
Bracket Pair Color DLW
Расширение Bracket Pair Color DLW автоматически окрашивает конкретные символы, чтобы помочь разработчикам определить уровень вложенности какой-либо части кода.
Оно поддерживает несколько языков и позволяет разработчику самому определить цвет скобок, планируемых к использованию в коде. По умолчанию, (), {} and [] соответствуют друг другу, но можно использовать и другие скобки, а также определить их цвет. С этим расширением легко найти и определить открытые и закрытые скобки и лучше понять структуру кода.
VS Code Icons
Несмотря на то что Visual Studio Code — это мощный редактор кода, его дефолтные иконки могут быть довольно скучными. Вот где могут пригодиться подобные наборы. Расширение VS Code Icons поможет вам определить типы ваших файлов как React, Javascript, HTML, CSS и так далее.
Material Icon Theme
Material Icon Theme — это популярное и широко используемое расширение для VS Code, придающее приложению стильный, современный вид. Данное расширение заменяет дефолтные иконки material design.
Оно включает некоторое количество стилей иконок, включая цветные, монохромные и очерченные иконки. Это значит, что вы можете выбрать стиль, больше соответствующий вашим нуждам и предпочтениям. Так вы убедитесь, что всё, что вам может потребоваться, визуально классифицировано с помощью широкого набора иконок папок и файлов.
Peacock
Peacock — это расширение для VS Code, добавляющее вашему программированию толику цвета. Данное расширение даёт возможность присвоить вкладке редактора цвет на основе какого-либо критерия: типа, папки или рабочего пространства.
Одной из отличительных особенностей Peacock является его адаптивность. Вы можете изменять цвета для каждого критерия и даже составлять собственные цветовые палитры. Это позволит подогнать интерфейс к вашим предпочтениям и лучше различать разные типы файлов и проектов.
Расширения для контроля версий
Live Server
Расширение Live Server автоматизирует перезагрузку веб-страниц, то есть избавляет от необходимости обновлять их вручную.
Вы также можете указать порт и имя хоста, что удобно при работе над несколькими проектами или в команде. Ещё одна полезная функция Live Server — его способность запустить сервер с помощью любого HTML-файла или проекта в рабочей среде.
Git History
Git History показывает историю коммитов в виде дерева, что облегчает понимание прогрессии изменений кода. Этот вид облегчает навигацию через коммиты и нахождение нужных изменений.
Это расширение также имеет мощную функцию поиска, которая позволяет быстро найти нужный коммит по описанию, автору или хэшу. Ещё оно сравнивает коммиты, облегчая проверку различий между версиями.
Git Lens
Расширение Git Lens помогает визуализировать, осмысливать и перемещаться по истории изменений в Git. Помимо прочего, Git Lens предлагает разделение экрана, что позволяет разработчикам лучше визуализировать разницу между коммитами или ветками.
Расширение позволяет осуществлять поиск в истории коммитов проекта по автору, файлу, описанию и другим критериям.
Docker Explorer
Расширение Docker Explorer может распознавать и управлять запущенными контейнерами и образами. Оно даёт возможность легко запускать, останавливать и перезапускать контейнеры, изучать логи и свойства и даже находить определённые контейнер или образ по имени или ID.
Расширение может генерировать новые контейнеры из образов, а также скачивать и загружать образы в реестр. В целом, оно упрощает создание и управление контейнерами.
Расширения для форматирования и линтинга
Prettier
Prettier — это самый популярный инструмент форматирования и линтинга для стандартизации кода. Он гарантирует, что ваши команды будут писать визуально цельный код без споров о количестве табов или пробелов или расположении скобок.
Beautify
Beautify — альтернатива Prettier с семью миллионами установок. Это ещё один «украшатель» кода, который осуществляет линтинг и форматирование кода. Вы можете использовать его на любом языке.
Better Comments
Расширение Better Comments форматирует комментарии в зависимости от их типа. Вы можете использовать различные стили комментариев, включая задачи, вопросы, предупреждения и т. д.
Ещё это расширение позволяет приоритезировать комментарии по степени важности и искать комментарии по ключевым словам или типу.
ESLint
Расширение ESlint определяет ошибки и проблемы до того, как они станут проблемами. Его набор правил можно подстроить под собственные требования, что позволит соблюдать свои стандарты оформления кода.
Оно может взаимодействовать с другими популярными расширениями, такими как Prettier, давая возможность автоматически форматировать код на основе ваших правил линтинга.
MarkdownLint
Расширение MarkdownLint — это удобный в пользовании инструмент для предупреждения и исправления ошибок. Детали ошибок можно посмотреть, нажав на выделенные в редакторе кода проблемы.
MarkdownLint тоже может объединяться с другими расширениями по типу Spell Checker, автоматически проверяя правописание в markdown-файлах.
Расширения для отладки и устранения неполадок
JavaScript Debugger
Расширение JavaScript Debugger создает точки останова и шаги в вашем коде. Это даёт программисту возможность остановить работу кода и изучить переменные и стеки вызовов, облегчая нахождение и исправление ошибок.
Это расширение идёт с итеративной консолью, которая позволяет вычислять выражения, выполнять, тестировать и отлаживать код в реальном времени. Оно даёт полный опыт отладки для любого вида проектов JavaScript.
Code Spell Checker
Избегайте опечаток с помощью расширения Code Spell Checker. Оно выделяет все опечатки, пока вы печатаете. У него лёгкий в использовании интерфейс, куда можно попасть, щёлкнув правой кнопкой мыши по проблемам, подсвеченным в редакторе кода. Расширение проверяет правописание для нескольких языков.
Turbo Console Log
Отлаживайте свой код, не заморачиваясь с ручным добавлением журнальных сообщений. Расширение Turbo Console Log позволяет одним кликом добавлять в код вывод журнальных сообщений в консоль.
У расширения есть интерактивная консоль для вычисления выражений и запуска кода. Оно помогает разработчикам тестировать и отлаживать код в режиме реального времени. Вы также можете кастомизировать вывод журнальных сообщений и достичь более читабельного формата с выделением объектов и переменных.
Regex Previewer
Regex Previewer предоставляет регулярные выражения для вашего кода. Эти выражения в реальном времени тестируются на образце текста, который совпадает с вашим выделенным текстом. С ним вы быстро определите и исправите ошибки в ваших шаблонах.
Более того, это расширение идёт с обширной документацией по синтаксису регулярных выражений и библиотекой распространённых шаблонов, которые можно легко скопировать в ваш код.
Расширения для JavaScript, React, Java, HTML и CSS
JavaScript Code Snippets
Работая над проектами на JavaScript, вы часто будете повторно использовать разные блоки кода. Это может занимать много времени, так что большой список различных сниппетов JavaScript, доступный по простому сочетанию клавиш, поможет вам стать более продуктивным.
Расширение также поддерживает определённые библиотеки и фреймворки JavaScript, такие как Angular, Vue.js и Node.js.
Reactjs Code Snippets
Расширение Reactjs Code Snippets помогает ускорить рабочий процесс, предоставляя готовые и аккуратные шаблоны. Вам всего лишь нужно напечатать команду-триггер для получения нужного сниппета.
Java Language Support
Java Extension Pack включает в себя несколько расширений для помощи в написании кода, отладки, линтинга, форматирования и тестирования. Одними из самых популярных расширений пакета являются:
- Java Development Kit (JDK) 11 или выше: для создания и запуска приложений на Java вам понадобится JDK. Он предоставляет полную поддержку языка, включая подсветку синтаксиса, дополнение кода и отладку.
- IntelliCode Java Test Runner: это расширение облегчает выполнение и отладку модульных тестов в проектах. Он интегрируется с популярными фреймворками для тестирования — JUnit, TestNG и т. п.
- Debugger for Java: это расширение богато функциями, которые позволяют ставить точки останова, изучать переменные, шагать в отладчике и так далее для лучшей отладки.
- Language Support for Java by Red Hat: это расширение помогает поддерживать стабильную и надёжную платформу для разработки на Java и предоставляет инструменты, полезные для создания, развёртывания и управления приложениями Java.
В общем, пакет Java Language Support совершенствует ваш опыт разработки на Java.
HTML CSS Support
Расширение HTML CSS Support используется в текстовых редакторах и IDE для улучшения поддержки разработок на HTML и CSS. Это расширение предоставляет дополнительные функции:
- IntelliSense для HTML и CSS: это функция дополнения кода, которая во время написания кода предлагает теги HTML, атрибуты, свойства CSS, значения и юниты.
- Поддержка Emmet: он генерирует сокращённые записи для HTML и CSS, чтобы помочь в написании краткого синтаксиса и последующего его расширения в полноценный код.
- Функция дополнения имён CSS-классов: она автодополняет имена классов CSS в документах HTML.
- Опции линтинга и форматирования для HTML и CSS: попросту необходимый инструмент форматирования и структурирования кода HTML и CSS для лучшей читабельности.
- Встроенный предварительный просмотр цвета для CSS: если у вас есть проблемы со сложными цветовыми палитрами или регулировкой цвета на вашем сайте, эта функция — ваше спасение. Она показывает предварительный вид цвета в соответствующей части кода CSS.