VSCode - общедоступный, кроссплатформенный редактор, который полюбился программистам и веб-разработчикам. Он быстрый, имеет возможность подключения расширений и индивидуального настраивания, а также он содержит множество функциональных особенностей. Если вы еще не ознакомились с этой программой, то стоит наверстать упущенное.
Для VSCode было сделано множество расширений. В этом списке я расскажу, какие есть VS Code плагины, которые я использую ежедневно. Начнем!
Quokka.js
Quokka.js - быстрая прототипирующая программа для JavaScript и TypeScript. Это значит, что она запускает отладку кода одновременно с тем, как вы его пишете, и выдает различные результаты прямо в редакторе кода. Опробуйте этот плагин сами.
После установки расширения нажмите Ctrl/Cmd + Shift + P, чтобы отобразить командную панель редактора. Затем введите Quokka, чтобы увидеть список доступных команд. Выберите и запустите команду New JavaScript File. Также можно нажать Cmd + K + J, чтобы открыть файл сразу же. Все, что вы будете писать в этом файле, будет тут же проходить отладку.
Похожие расширения:
Code Runner - поддерживает разные языки, такие как C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6 и многие другие;
Runner.
Bracket Pair Colorizer и Indent Rainbow
Круглые и фигурные скобки - неотъемлемая часть многих языков программирования. В таких языках, как JavaScript, на одной странице может быть множество таких скобок, при этом не существует простого механизма, который бы позволял соотносить открывающие и закрывающие скобки. С этим помогут справиться Bracket Pair Colorizer и Indent Rainbow. Это два разных плагина. Однако они очень хорошо работают вместе. Эти VS Code плагины наполнят ваш редактор множеством цветов, благодаря чему вам будет легче различать блоки кода и приятнее на них смотреть. Как только вы к ним привыкнете, без VSCode будет казаться пресным и скучным.
Сниппеты
Сниппеты - это сокращения в редакторе. Вместо того чтобы писать "import React from 'react';", можно напечатать "imr" и нажать Tab, чтобы раскрыть это сокращение. Таким же образом "clg" превращается в "console.log".
Существует большое количество сниппетов для многих вещей: Javascript (или любой другой язык), React, Redux, Angular, Vue, Jest. Лично мне удобнее всего пользоваться сниппетами для JavaScript, ведь я больше всего работаю на JS.
Хорошие расширения со сниппетами:
JavaScript (ES6) code snippets;
React-Native/React/Redux snippets для es6/es7;
React Standard Style code snippets.
Todo Highlighter
Часто бывает такое, что вы прописываете функцию и думаете, что наверняка есть лучший способ сделать то же самое. Вы оставляете комментарий: «// Нужно переделать позже» или что-то подобное. Затем вы забываете об этой заметке и отправляете код в использование. Надеемся, с Todo Highlighter такого не случится.
Этот плагин подсвечивает все заметки о том, что нужно сделать («TODO») или исправить («FIXME»), или любые другие комментарии в коде яркими цветами, чтобы их всегда можно было легко заметить. Одна из удобных функций - List Highlighted annotations. Она высвечивает все заметки в отдельном окне.
Похожие расширения:
Todo+ - более мощный плагин, чем Todo Highlighter, с большим количеством функций;
Todo Parser.
Import Cost
Этот плагин позволяет увидеть размер импортируемого модуля. Это очень помогает в работе с такими пакетами, как, к примеру, Webpack. Вы сможете понять, импортируете ли вы всю библиотеку целиком или же только конкретную утилиту.
Однако остается еще одна проблема: это расширение не показывает вес кастомных файлов или модулей.
REST Client
Веб-разработчикам часто приходится работать с REST API. Чтобы исследовать URL и проверять ответы, используются такие инструменты, как Postman. Однако зачем пользоваться отдельным приложением, если с той же задачей легко сможет справиться сам редактор? Познакомьтесь с REST Client. Он позволяет посылать HTTP-запрос и видеть ответ прямо в Visual Studio Code.
Auto Close Tag и Auto Rename Tag
С момента появления React и популярности, которую он набрал за последние годы, вновь стал использоваться синтаксис, похожий на HTML, в форме JSX. Нам вновь приходится кодить на JavaScript с применением тегов. Любой веб-разработчик расскажет, что теги прописывать очень сложно. Чаще всего нам нужен инструмент, который может быстро и легко генерировать теги и их «детей». Emmet - отличный пример такого приспособления, и он встроен в VSCode. Однако иногда хочется чего-нибудь простого и лаконичного: например, приложения, которое автоматически бы закрывало теги. Оно генерирует закрывающий тег после того, как вы напишете открывающий. Когда вы изменяете этот тег, закрывающий тег тоже автоматически меняется. Данные 2 расширения это и делают. Они также работают с JSX и многими другими языками, такими как XML, PHP, Vue, JavaScript, TypeScript, TSX.
Их можно скачать по ссылкам - Auto Close Tag и Auto Rename Tag.
Похожие расширения:
Auto Complete Tag - объединяет в себе функции Auto Rename и Auto Close Tag;
Close HTML/XML tag.
GitLens
По словам автора, работает с возможностями Git, встроенными в Visual Studio Code. В этом плагине находится неожиданно большое количество функций: авторство кода, показываемое с помощью Code lens, ведение поиска, история и исследователь GitLens. Полное объяснение можно найти по ссылке. Если вы работаете с git, обязательно установите данное расширение.
Есть и другие VS Code плагины, которые фокусируются на конкретном функционале. Вы можете установить их, если GitLens кажется слишком крупным или если вы не пользуетесь большинством его функций.
Похожие расширения:
Git History - отображает отличный график истории версий и т. д. Рекомендуем;
Git Blame - позволяет увидеть информацию Git Blame в статусе выбранной строки. Похожая функция есть в GitLens;
Git Indicators - позволяет увидеть затронутые файлы и то, сколько строк было добавлено или удалено, в статусе;
Open in GitHub / Bitbucket / Gitlab / VisualStudio.com! - позволяет открыть репозиторий в браузере с помощью единственной команды.
Git Project Manager
Git Project Manager(GPM) позволяет открыть новое окно с git-репозиторием прямо из окна VSCode. По сути теперь вы сможете открыть еще одно хранилище, не закрывая VSCode.
После установки расширения вам нужно будет добавить gitProjectManager.baseProjectsFolders в список URL, которые содержат репозитории.
Пример:
{
"gitProjectManager.baseProjectsFolders": [
"/home/user/nodeProjects",
"/home/user/personal/pocs"
]
}
Похожие расширения:
Project Manager - не пользовался им лично, но это расширение было установлено больше миллиона раз, так что обязательно попробуйте его применить.
Indenticator
Этот плагин визуально акцентирует внимание на данной глубине. Теперь вы сможете легко различать разные блоки, которые находятся на разной глубине. Скачать можно по ссылке.
Похожие расширения:
Guides.
VSCode Icons
Иконки, благодаря которым редактор станет выглядеть еще приятнее!
Похожие расширения:
VSCode Great Icons;
Studio Icons.
Dracula (Theme)
Тема, которая мне нравится.
Другие рекомендации
Fira Code - моноширинный шрифт для связок в программировании;
Live Server - локальный сервер с функцией загрузки статических и динамических страниц;
Prettier for VSCode - инструмент форматирования кода;
Settings Sync - позволяет сохранять пользовательские настройки, расширения и привязки клавиш в Gist, так что можно сделать новую VSCode за пару минут;
Multiple clipboards for VSCode - превосходит обычные команды «копировать» и «вырезать», позволяя хранить выбранные участки в буфере обмена. Также добавляет возможность скопировать несколько блоков текста в один буфер;
Path Intellisense - Visual Studio Code плагин, который автоматически заканчивает имена файлов;
Version Lens - показывает информацию о версии пакета для npm, jspm, bower, dub и dotnet core в редакторе Visual Studio Code.
Выше были представлены VS Code плагины, которыми я пользуюсь постоянно. Какие еще расширения и темы вам нравятся? Расскажите о них в комментариях к этой статье.