VS Code плагины

Настройка vs code очень простая. Предлагаю Вашему вниманию подборку самых полезных и популярных плагинов для этого редактора.

VS Code - редактор с открытым исходным кодом.

Один из самых известных и любимых редакторов у программистов, особенно в среде веб-разработки. Он достаточно быстрый, расширяемый, обладает спектром возможностей и имеет большой функционал. Для тех, кто не знал его, советую попробовать. Самое приятное, что vs code абсолютно бесплатный.

«Terminal» - вкладка редактора, позволяющая работать с консолью PowerShell, командной строкой CMD или Linux Bash напрямую в окне редактора.

У Visual Studio Code много различных настроек. Например, есть возможность изменить внешний вид или поведение самого редактора.

VS code дает возможность добавлять плагины напрямую из программы.

VSCode очень впечатляет. Впечатляет до такой степени, что я поменял свой редактор на этот. Интеграция Git и отладчик в редакторе – это отличные опции для работы. Никакие проблемы, с которыми обычно сталкиваются в Sublime, не мешают в VSCode. Здесь в плюс и функционал, и производительность, и визуальная составляющая, а также, как бонус, возможность применять к редактору всевозможные темы. Все это делает vs code незаменимым и комфортным в работе. Редактор доступен для понимания начинающим программистам и своим функционалом интересен более опытным.

VS code плагины. Наиболее популярные

eCSStractor for VSCode - Плагин VSCode для извлечения имен классов из HTML и создания таблицы стилей CSS для последующей работы.

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

Установите расширение, зажмите клавиши:

Ctrl/Cmd(⌘) + Shift + P, чтобы отобразить спектр всевозможных команд, наберите Quokka, чтобы посмотреть перечень доступных команд.

Запустите New JavaScript File, либо зажмите сочетание клавиш: ⌘ + K + J для того, чтобы открыть файл напрямую. Все, что вы введете в этот файл, выполняется немедленно.

Подобные расширения:

• Code Runner — плагин, поддерживающий несколько языков, в том числе: C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6 и т.д.
• Runner.

Bracket Pair Colorizer и Indent Rainbow

Различные скобки являются неотъемлемой частью языков для написания кода в программировании. Например, в Java script: на странице может быть много различных скобок, и их сложно идентифицировать, какие закрыты, а какие нет.

Выручает Bracket Pair Colorizer и Indent Rainbow. Это два разных плагина. Но вместе они составляют хорошую, красивую и полезную пару. Эти плагины наполнят VS Code множеством цветов, и делают блоки кода легко различимыми и приятными на вид.

Сниппеты

Сниппеты — это сокращенные команды в редакторе. Для запуска console.log., можно напечатать clg и нажать Tab для того, чтобы сниппет развернулся.

Существуют различные сниппеты для различных направлений: Vue, Jest, JavaScript, React, Angular, Redux. Сниппеты особенно полезны для работы в Javascript.

Подобные расширения:

• React Standart Style code snippets
• JavaScript (ES6) code snippets
• React-Native/React/Redux snippets for es6/es7

Todo Highlighter

Так случается, что после написания функции, вы думаете, что может быть существует более удобный способ реализации. Вы пишите примечание к строчке: // TODO: отредактировать код, Забываете о заметке и сдаете работу заказчику или выкладываете на сервер. Пользуясь Todo Highlighter, этого не случится.

Подобные расширения для vs code:

• Todo+ — более функциональный, чем Todo Highlighter, с гораздо большим количеством функций
• Todo Parser

Import Cost

Это плагин, который дает возможность посмотреть размер модуля, который нужно импортировать. Можно увидеть, импортируете ли вы всю библиотеку или определенную ее часть. Незаменимый помощник для таких программ-упаковщиков, как Webpack.

Rest Client

Веб-разработчикам зачастую приходится работать с REST API. Чтобы изучить URL- адреса и проверки ответов, пользуются такими инструментами, как Postman. Но нет необходимости пользоваться другим приложением, если тоже самое можно реализовать в редакторе vs code. Rest Client позволяет отправлять HTTP-запросы и просматривать ответ в самом коде Visual Studio Code.

Auto Close Tag и Auto Rename Tag

С момента появления React и набранной им популярности за последнее время, HTML-подобный синтаксис в виде JSX сейчас стал достаточно модным. Писать вручную коды с тегами Java script надоедает. В большинстве случаев, нужен инструмент, который может быстро и легко генерировать теги и дочерние элементы. Emmet — действительно хороший пример этого. Но всегда хочется чего-то максимально простого и лаконичного.

Они также работают с JSX и различными другими языками, такими как TSX, PHP, Vue, TypeScript, JavaScript, XML.

Получить их можно здесь -  https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Подобные расширения для vs code:

• Auto Complete Tag — объединяет функционал авто- переименования/ закрытия тега
• Close HTML/XML tag

GitLens

GitLens поддерживает возможности Git, встроенные в vs code. Расширение включает в себя множество функций, таких как авторство кода, поиск коммитов, историю и проводник GitLens. Вы можете почитать полное объяснение функций здесь https://github.com/eamodio/vscode-gitlens. Если вы работаете с Git, то этот плагин для вас маст хэв.

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

• Git History — отображает красивый график историй коммитов и многое другое.
• Git Blame — позволяет увидеть информацию Git Blame в текущей строке. Аналогичная функция есть в GitLens.
• Git Indicators — позволяет вам увидеть измененные файлы, количество удаленных и добавленных строк.
• Open in GitHub / Bitbucket / GitLab / VisualStudio.com — позволяет открыть репозиторий в браузере с помощью одной команды.

Git Project Manager

GPM позволяет открывать новое окно для git- репозитория напрямую из редактора. По сути, можно открывать другой репозиторий, не выходя из VS Code.

После установки этого плагина, нужно будет указать gitProjectManager.baseProjectsFolders список URL-адресов, содержащих репозитории.

Пример:

{ "gitProjectManager.baseProjectsFolders": [ "/home/user/nodeProjects", "/home/user/personal/pocs" ] }

Другие подобные расширения для vs code:

• Project Manager —он имеет более миллиона загрузок. Стоит обратить внимание.

Indenticator

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

Другие подобные плагины для VS редактора

• Guides

Auto Import

Плагин автоматически находит, анализирует и обеспечивает действия кода и завершение кода для всех доступных импортов. Работает с JavaScript (ES6) и TypeScript (TS).

IntelliSense for CSS class names in HTML

Расширение Visual Studio, которое Дает вам автозаполнение для определений классов CSS на основе определений, найденных в вашем рабочем пространстве или внешних файлах, на которые ссылается этот link элемент.

Плагин для VSCode, который дополняет название CSS-класса для HTML-атрибута class на основе определений, найденных рабочей области или внешних файлов, на которые ссылается элемент link.

SVG Viewer

Позволяет делать предпросмотр SVG.

Prettier — Code formatter

Расширение VSCode позволяющее форматировать JavaScript, TypeScript, CSS.

React Native Tools

Удобная среда при использовании средств отладки, инструменты React Native помогают в ускорении скорости при разработки приложений.

Color Highlight

Подсветка синтаксиса определяет цвет и стиль исходного кода, отображаемого в редакторе кода Visual Studio. Плагин отвечает за раскрашивание ключевых слов, таких как if или for в JavaScript.

Trailing Spaces

Автоматически находит и удаляет конечные пробелы.

• Fira Code — расширение шрифта Fira Mono. По сути, это функция рендеринга шрифтов: основной код остается ASCII-совместимым. Это помогает быстрее читать и понимать код;
• Live Server — используется для запуска локального сервера разработки с функцией прямой перезагрузки для статических и динамических страниц. Да, он поддерживает динамические страницы, такие как PHP;
• Prettier for VSCode — расширение для форматирование кода, поддерживающее много языков;
• Settings Sync — расширение, которое синхронизирует все параметры кода Visual Studio на нескольких устройствах.
• Multiple clipboards for VSCode — несколько буферов обмена. Удобное расширение для вызова команд «вырезать», «скопировать», «вставить» из буфера обмена.

Темы для vs code

VSCode Icons

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

• Dracula (Theme)

  

• One Dark Pro

  

• Ayu

  

• City Lights Theme

  

• Cobalt2

  

• Rainbow

  

• Spacemacs

  

• Base16

  

• Verdandi

  

• Noctis

  

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