Перевод статьи «10 Top Visual Studio Code Extensions in 2020».
Visual Studio Code от Microsoft это один из самых популярных редакторов кода. Он и сам по себе обладает целым рядом достоинств, но помимо этого позволяет расширять функционал и таким образом увеличивать продуктивность. VSCode это результат работы Microsoft в сфере открытого исходного кода: редактор в готовой сборке доступен бесплатно, а его исходный код открыт.
Расширяемость за счет плагинов и расширений — одна из причин популярности VSCode. Благодаря этим расширениям можно существенно улучшить базовый функционал редактора и сделать процесс разработки более эффективным и удобным.
1. Import Cost
В процессе разработки мы часто добавляем в свои проекты различные зависимости. И хотя модульная разработка в настоящее время занимает очень важное место в разработке вообще, лучше все же подходить к импортам с осторожностью. Плагин Import Cost для JavaScript и TypeScript позволяет оценивать зависимости на лету.
Import Cost показывает размер зависимости в той же строке, где вы добавляете ее в свой код. Этот легковесный плагин — хороший вспомогательный инструмент для эффективного управления зависимостями. В документации перечислены разные виды синтаксиса, для которых этот плагин показывает размер зависимостей.
А в этой статье создатель плагина рассказывает, что его мотивировало разработать подобный инструмент.
2. File Utils
В том, что касается написания кода в файле, и сам VSCode работает отлично. Но вам может пригодиться функционал, улучшающий ваши возможности в плане управления многочисленными файлами в проекте и зависимостями. Расширение File Utils позволяет осуществлять операции с файлами прямо в палитре команд.
Вы можете вызвать палитру команд и выбрать в ней файл, с которым хотите что-либо сделать. Например, можно создать дубликат (копию) этого файла, переместить его, удалить, переименовать — и все это в дополнение к базовым операциям, касающимся папок. Это полезный плагин, с помощью которого вы сможете управлять файлами проекта, не выходя из VSCode.
3. Project Manager
Расширение File Utils позволяет осуществлять простые операции с файлами, а с плагином Project Manager вы можете зайти гораздо дальше в деле управления проектами. Для начала этот плагин добавляет новую боковую панель для работы с несколькими проектами. При помощи этого расширения вы сможете работать с Git-, SVN- или Mercurial-репозиториями. Кроме того, вы сможете управлять удаленными репозиториями.
Это расширение предоставляет вам удобный функционал, доступный в графическом интерфейсе, но помимо того оно привносит дополнительные команды для работы над проектами. Для кастомизации этих функций по своему вкусу вы можете покопаться в настройках.
Расширение Project Manager обогащает ваш редактор продвинутым функционалом, таким как управление удаленными репозиториями и интерактивные команды, а это существенно улучшает цикл разработки.
4. SVG Viewer
«SVG» расшифровывается как «масштабируемая векторная графика». По сути SVG это текстовые файлы, которые хранят векторные изображения для веба. При открытии SVG-файла в текстовом редакторе обычно отображается текстовое содержимое. Но когда вы работаете над редактированием этих файлов напрямую, вы можете захотеть увидеть, как выглядит изображение.
Плагин SVG Viewer позволяет вам визуализировать SVG-файлы и таким образом экономить время: вам не придется открывать второе приложение, чтобы просмотреть результаты своей работы. Это особенно важно, когда вы просто вносите быстрые правки в SVG.
5. Code Spell Checker
Значительная часть ошибок, с которыми сталкиваются разработчики, связана с опечатками (или грамматическими ошибками) в именах переменных, функций и пакетов. Опечататься можно и в комментариях, описаниях, документации.
Этот пакет обеспечивает подсветку ошибок в файле. Проверка правописания в нем реализована для различных популярных языков программирования. Если внести некоторые изменения в настройки, Code Spell Checker будет работать с указанными типами файлов.
При установке пакета вы получаете словари для американского и британского английского, но можно добавить еще восемь языков и словарь медицинских терминов.
6. Remote — SSH
В силу того, что разработка сейчас по своей природе является распределенной, вам может понадобиться логиниться на удаленном сервере. Например, чтобы обновить или протестировать ваш код. Это можно легко сделать при помощи стороннего SSH-клиента, но зачем же? Ведь есть специальное расширение VSCode, позволяющее удаленно работать на серверах без необходимости выходить из приложения.
Remote — SSH — это плагин от Microsoft. С его помощью вы сможете устанавливать соединение с удаленной средой разработки, а это значит, что в принципе можно вообще не держать код на своей машине. Также благодаря этому плагину вы сможете переключаться между несколькими удаленными средами разработки и выполнять разные задачи в разных системах.
В плагине реализована поддержка подключения к удаленным системам на Linux, Windows и macOS.
Разработка на удаленных серверах в настоящее время имеет большое значение. В связи с этим плагин Remote — SSH является абсолютно необходимым расширением VSCode.
7. Trailing Whitespace Visualizer
Проверить, что в коде нет повторяющихся пробелов — хорошая практика программирования. Имеются в виду повторяющиеся пробелы (или табы), идущие в конце любой строки перед символом новой строки. Они совершенно не нужны в коде и лишь увеличивают размер файла, так что удалить их будет хорошей идеей.
Плагин Trailing Whitespace Visualizer подсвечивает повторяющиеся пробелы в вашем коде, а также в коде коллег, с которым вы работаете.
8. Debugger for Chrome
При написании кода фронтенда (на JavaScript), для проверки, все ли работает, обычно мы запускаем код в браузере. Инструменты разработчика в Chrome позволяют заниматься отладкой JavaScript в консоли — это очень удобно. Плагин Debugger for Chrome интегрирует VSCode в Chrome или другой браузер на базе Chromium, в котором поддерживается Chrome Dev Tools Protocol.
С этим плагином вы получите много функций для отладки, а чтобы ими воспользоваться, вам не придется выходить из редактора.
9. ESLint
ESLint это статический анализатор кода для JavaScript. Он сканирует ваш код в поиске синтаксических ошибок и неэффективных практик кодинга. Расширение ESLint для VSCode позволит вам пользоваться этим инструментом прямо в редакторе. Правда, придется установить ESLint глобально в свою систему.
10. Live Server
Расширение Live Server позволяет запускать локальный сервер разработки для тестирования кода. В нем есть функция перезагрузки в режиме реального времени как для статических, так и для динамических веб-страниц.
В этом расширении можно настроить номер порта и браузер по умолчанию, оно поддерживает HTTPS и прокси.
Надеемся, расширения из нашего списка помогут вам еще лучше организовать ваш процесс разработки.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
