Visual Studio Code-один из наиболее широко используемых редакторов кода. Одной из причин популярности VS Code, по мимо его бесплатности, является его множество расширений, которые ускоряют процесс разработки, а также можно полностью перестроить редактор под свои запросы и под ту среду разработки, которую вы используете.
В этой статье мы рассмотрим 10 актуальных расширений VS Code, которые должен знать каждый веб-разработчик в 2021 году. Эти инструменты предназначены для улучшения опыта разработчиков и оптимизации вашей работы различными способами.
1. Auto Rename Tag
Auto Rename Tag - это очень полезное расширение VS Code для веб - разработчиков. Как следует из названий, тег Auto Rename переименовывает второй тег по мере обновления первого и наоборот:
Вы найдете это расширение полезным не только с HTML, но и с React из-за JSX.
В приведенном выше примере внутри тегов есть только текст, но в реальном приложении могут быть вложенные теги и элементы, что делает ручное обновление трудозатратным и неэффективным.
2. Bracket Pair Colorizer
Bracket Pair Colorizer - это расширение, которое сопоставляет соответствующие скобки с тем же цветом. Наличие вложенных компонентов, функций, объектов и т. д. В файле может привести к путанице с многочисленными скобками.
Для наглядности работы расширения, рассмотрим следующий фрагмент кода:
На первый взгляд, довольно сложно различить различные блоки кода в коде, но расширение Bracket Pair Colorizer окрашивает соответствующие скобки и скобки для удобства навигации и доступности.
3. Snippets
Один из лучших способов сэкономить время и повысить производительность. Это не одно расширение, а набор расширений с различными фрагментами для разных языков программирования.
Ниже приведены некоторые популярные расширения snippets кода:
- Angular Snippets (version 11)
- Python
- JavaScript (ES6) code snippets
- HTML Snippets
- ES7 React/Redux/GraphQL/React-Native snippets
- Vue 3 Snippets
4. Better Comments
Better Comments предназначена для того, чтобы помочь вам написать больше удобных для человека комментариев в вашем коде.
Четкие, удобоваримые комментарии полезны не только для тех, кто просматривает ваш код, но и для вас. Довольно часто разработчики теряются в собственном коде, посещая его через некоторое время. Наличие описательных комментариев может сэкономить много времени для вас и вашей команды. Тем более – это считается хорошим тоном комментить свой код, тем более если вы работаете в команде.
С лучшим расширением Better Comments вы можете классифицировать свои аннотации на предупреждения, запросы, задачи, основные моменты и т. д.
Вы можете использовать любой из следующих символов после двойной косой черты (//):
- * для выделенного текста
- ! для ошибок и предупреждений
- ? для запросов и вопросов
- // для зачеркивания
- TODO для задач
5. Markdown All in One
Markdown All in One - это единое расширение, которое заботится обо всех ваших потребностях в markdown, таких как автоматический предварительный просмотр, ярлыки, автозаполнение и т. д.
С момента своего выпуска в 2004 году Markdown стал одним из самых популярных и предпочтительных языков разметки. Технические писатели во всем мире широко используют Markdown для статей, блогов, документации и т. д. Из-за его легкой простоты и кросс-платформенного использования.
Например, чтобы выделить жирным шрифтом какой-то текст в Markdown, вы можете выбрать этот текст и использовать ярлык Ctrl + B для повышения производительности.
6. Icons
Наличие описательных значков (иконок) может помочь вам различать файлы и папки. Иконки также делают разработку более увлекательной и привносит некую эстетику и порядок в проект.
Вот сравнение между двумя вкладками VS Code. У одного есть иконы, у другого нет.
Ниже приведены популярные коллекции значков (иконок)
- vscode-icons
- Material Icon Theme
- Material Theme Icons
- Simple icons
7. Prettier
Популярное расширение с более чем 38.5 k звездами на GitHub, это один из самых популярных доступных форматов кода. Согласованное форматирование и стилизация кода может сэкономить много времени, особенно при совместной работе с другими разработчиками.
8. Import Cost
Расширение, которое показывает предполагаемый размер пакета импорта в вашем коде. При работе над проектом важно не ставить под угрозу пользовательский опыт, импортируя пакеты heft. Один из способов избежать этого-отслеживать размер дополнительных зависимостей в вашем коде.
Когда импорт слишком велик, Import Cost предупреждает вас, отображая размер красным цветом. Вы можете настроить, какой размер следует считать маленьким, средним или большим.
9. Profile Switcher
Profile Switcher позволяет переключаться между несколькими профилями в вашем коде VS и настраивать их с помощью различных конфигураций и настроек.
Это расширение особенно полезно для создателей контента, таких как технические блоггеры, ютуберы и т. д. Вместо того чтобы менять настройки/конфигурации каждый раз, когда вам нужно показать экран VS Code, вы можете настроить необходимые настройки профиля.
Вот как переключаться между двумя профилями: Default Content Creation
10. GitLens
Он сочетает в себе возможности Git с VS-кодом. Одной из лучших особенностей этого расширения является возможность визуализации авторства кода с помощью аннотаций Git blame и объектива кода.
Вот расширенная версия авторства кода:
Вывод
В этой статье мы рассмотрели 10 расширений VS Code, которые могут помочь вам стать лучше в программирование и повысить вашу производительность.
Вот несколько других расширений, на которые стоит обратить внимание:
- Live Server
- Path Intellisense
- Code Spell Checker
- Better Align
- Quokka.js
- indent-rainbow
Спасибо что проявили интерес к статье, если понравилась, то не поскупитесь на лайк и подписку на наш канал. Благодарим за внимание)
