Совсем скоро новый год, а значит настала самое время почистить VScode и обновить его новыми плагинами!
В этом сборнике я собрал одни из самых интересных расширений, на мой взгляд, которые облегчат вам жизнь. Все плагины я разделил на категории, так что вы с легкостью сможете ориентироваться в этой статье.
HTML + CSS
Неотъемлемая часть работы фронтенд разработчика это верстка. Разметка и стилизация занимает достаточное время, хоть и не всегда требует высоких знаний и погружения. Эти плагины ускорят вашу разработку!
Intellisense for CSS
Это расширение помогает давать различные предложения и автоматически завершать класс CSS, который мы использовали в нашей рабочей области.
HTML End Tag Labels
Куча HTML кода в компоненте и сложно понять где заканчивается определенный блок? Есть решение!
Colorize
Такие вещи, как шестнадцатеричные коды, rgb или hsl, обычно трудно просмотреть, пока вы не увидите цвет в действии на странице. Данное расширение создает цветной фон вокруг цветов в вашем файле CSS.
Auto Rename Tag
Все очень просто. Вы решили изменить тег <h1> на <h2>? Не нужно париться, что вы забудете переименовать закрывающий тег или наоборот — этот плагин сделает все за вас!
CSS Peek
Теперь не нужно переключаться на вкладку со стилями и искать нужную строчку, чтобы посмотреть стилизацию определенного класса. Просто кликните по нему в вашем HTML шаблоне!
JavaScript
После того как верстка готова ее нужно оживить! В этот момент мы пишем код в файле с расширением .js и эти плагины ускорят вашу разработку.
Code Runner
Хотите запустить определенный код, ничего не настраивая? В этом поможет данное расширение.
Turbo Console Log
Вам больше не нужно тратить время на логирование различных строк кода. Делайте это автоматически!
ESLint
Настройка для интеграции библиотеки ESLint в VS code, помогает находить и устранять проблемы в вашем коде.
Error Lens
Улучшает видимость ваших ошибок в коде.
Tabnine
Говоря об инструментах, которые пишут ваш код для вас, Tabnine использует ИИ, чтобы предложить следующие строки кода, как только вы начнете печатать, на основе синтаксиса. Это расширение, обученное работе с открытым исходным кодом, помогает повысить производительность за счет автоматизации повторяющегося кода, который вы пишете. Tabnine бесплатен, но у него также есть профессиональная версия, которая включает в себя гораздо больше, например, полное завершение строки, предоставляет фрагменты на основе комментариев и записывает ваши функции для вас.
Другое
Расширения, облегчающие повседневные задачки разработчика.
Code Spell Checker
Один из самых страшных кошмаров — это то, что во время проверки кода вы получаете комментарий по исправлению орфографии. Это расширение помогает исправить орфографию при написании кода. Мой лучший компаньон.
GitLens
Лучший инструмент, чтобы узнать, когда и кем был изменен блок кода. Это также помогает проверить, каким был старый код.
Svg Preview
Работаете с кучами SVG иконками? Неудобно ориентироваться по ним опираясь исключительно на название файла. Теперь мы можем прямо в редакторе посмотреть на эту иконку.
Path Intellisense
Можно перестать писать пути до файлов самостоятельно, плагин покажет как файлы лежат у вас в какой папке.
Prettier- Code Formatter
Наверное, самое важное расширение в вашем редакторе кода. Оно форматирует ваш код, превращая его в читабельный вид для любого разработчика. В команде программистов помогает писать код в едином стиле.
CodeSnap
Мы регулярно делимся фрагментами кода. Будь то в социальных сетях или на справочных форумах. Хорошо представленный код обычно лучше понимается, и CodeSnap служит этой цели. Это расширение помогает вам делать скриншоты вашего кода, сохраняя при этом подсветку синтаксиса и отступы. Это бесплатно и поставляется с широким спектром настроек, которые вы можете настроить по своему усмотрению.
Надеюсь вы нашли в моей подборки то, что искали. Удачного кодинга!