Visual Studio Code — это кроссплатформенный редактор с открытым исходным кодом, который стал любимым среди программистов, особенно среди веб-разработчиков. Он быстрый, расширяемый и имеет множество возможностей и настроек. Если вы до сих пор не работали с ним, то советую попробовать.
Для Visual Studio Code создано множество расширений. Я хочу представить несколько из них, которые я использую каждый день. Давайте начнем!
1-Quokka.js: Это плагин для JavaScript и TypeScript, который отображает результаты выполнения кода в редакторе по мере его написания. Попробуйте сами!
2-Bracket Pair Colorizer & Indent Rainbow: Квадратные и круглые скобки — неотъемлемая часть многих языков программирования. В таком языке как JavaScript, простая страница может иметь поток этих символов, среди которых тяжело отличить пары открытых и закрытых скобок. В этом случае нам приходят на помощь Bracket Pair Colorizer и Indent Rainbow. Это два разных расширения. Однако, вместе они представляют отличную комбинацию. Эти расширения наполнят ваш редактор морем красок, сделают блоки кода отличимыми друг от друга и придадут им приятный вид.
Сниппеты: Сниппеты — это сокращения в редакторе, трансформируемые в полноценный код. Например, введя 'imr' и нажав Tab, вы развернете сниппет в 'import React from 'react';'. Существует множество сниппетов для разных направлений: JavaScript, React, Redux, Angular, Vue, Jest. Лично я считаю JavaScript сниппеты очень полезными, особенно с тех пор как начал работать преимущественно с JS.
3-Todo Highlighter: Часто бывает, написав функцию, вы понимаете, что есть лучший способ написать то же самое. Вы оставляете комментарий // TODO: Необходим рефакторинг, но затем забываете об этом и выкладываете код в production. C Todo Highlighter подобного не произойдет. Этот плагин выделяет TODO/FIXME или другие комментарии в яркие цвета, что довольно тяжело не заметить. Новая функция Todo Highlighter — список выделенных комментариев, который выводится в консоли.
Import Cost: Это расширение позволяет увидеть размер импортируемых модулей. Вы сможете понять, в каком месте вы импортируете библиотеку целиком, а в каком конкретную ее часть. Это окажет неоценимую помощь со сборкой проекта в Webpack.
Rest Client: Веб-разработчики часто взаимодействуют с различного рода REST API. Для изучения ссылок и проверки ответов на запрос, применяют такие инструменты как Postman. Но зачем использовать отдельное приложение, когда можно то же самое сделать в редакторе? Добро пожаловать в Rest Client. Он позволяет отправлять HTTP-запросы и просматривать ответ непосредственно в Visual Studio Code.
Auto Close Tag & Auto Rename Tag: С приходом React и той популярностью, которую он набрал за последние несколько лет, HTML-подобный синтаксис, в виде JSX, стал последним писком моды. Любому веб-разработчику быстро надоест вручную писать теги в JS файлах. В таком случае, нам необходим инструмент, который сможет быстро и легко генерировать теги. Emmet — очень полезный плагин, решающий данную задачу. Однако, иногда нам хочется чего-то более простого и лаконичного. Нам бы пригодилось расширение, которое будет добавлять закрывающий тег к его открытой паре, и автоматически изменять закрывающий тег, когда вы изменяете открывающий. Существует два расширения, которые могут справиться с поставленными задачами.
GitLens: Со слов автора, GitLens расширяет возможности Git, встроенного в Visual Studio Code. Плагин включает удивительное количество функций, таких как указание автора, поиск коммитов, история и проводник. Вы можете изучить полное описание этих возможностей здесь. Если вы работаете с Git, то вы обязаны установить этот плагин.
Indenticator: Этот плагин визуально выделяет текущую глубину отступа. С этим плагином, вы легко различите блоки, расположенные на разных уровнях.
VSCode Icons: Новые иконки придадут редактору привлекательности!
Dracula (Theme): Моя любимая тема, которая дает редактору уникальный вид.
Кроме указанных выше плагинов, есть другие расширения, которые могут вам пригодиться:
- Fira Code — моноширинный шрифт с лигатурами для программистов;
- Live Server — локальный сервер. Включает динамическоую перезагрузку для статических и динамических страниц;
- Prettier for VSCode — плагин для форматирования кода;
- Settings Sync — позволяет сохранять пользовательские настройки, расширения и сочетания клавиш. Такая возможность позволит установить VSCode на другом устройстве в течении нескольких минут, и не потерять конфигурацию;
- Multiple clipboards for VSCode — переопределяет стандартные команды «выделить» и «вырезать». Добавляет возможность скопировать несколько блоков текста в единый буфер.
Это те расширения Visual Studio Code, которые я использую регулярно. Какие расширения и темы, кроме указанных, используете вы, пишите в комментариях?