перевод материала codeburst.io
VSCode - это кроссплатформенный open-source редактор, который серьезно облегчает жизнь web-разработчикам. Это быстрый, настраиваемый и очень удобный инструмент.
Сегодня для VSCode существуют тысячи расширений. Мы отобрали десяток самых полезных.
Quokka.js
Quokka.js это удобный инструмент для прототипирования JavaScript и TypeScript. Он сразу же показывает как будет работать ваш код и отображает различные варианты исполнения в код-редакторе.
Установите расширение и при нажатии Ctrl/Cmd(⌘) + Shift + P откроется командное окно редактора, в котором можно отобразить список доступных расширений и их команд.
Похожие расширения —
- Code Runner — поддерживает несколько языков, включая C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6 и другие.
Bracket Pair Colorizer и Indent Rainbow
Скобки - неотъемлемая часть большинства языков программирования. В JavaScript бывает так, что вся страница наводнена скобками и в этом изобилии сложно разглядеть пары открывающих/закрывающих скобок
На помощь приходят Bracket Pair Colorizer и Indent Rainbow. Это два разных расширения, но они блестяще работают в паре. Расширения добавляют в редактор цвета и облегчают восприятие. Попробовав эти инструменты хотя бы раз, вы больше не сможете представить без них свою работу.
без Pair Colorizer и Intent Rainbow
c Indent Rainbow и Bracket Pair Colorizer
Сниппеты
Сниппеты - это сокращения для редактора. Отличный инструмент для экономии времени. Вместо того, чтобы каждый раз писать, import React from 'react';, достаточно написать imr и нажать Tab, чтобы сниппет вставил нужный блок . Точно также сокращение, clg превращается в console.log.
Существуют сниппеты для большинства языков и фреймворков:
Javascript (или любой другой язык), React, Redux, Angular, Vue, Jest. Для тех, кто часто имеет дело с JS сниппеты - просто незаменимый инструмент.
Вот несколько отличных подборок сниппетов
Todo Highlighter
Нередко случаются ситуации, когда в процессе написания кода вам кажется, что какой-то конкретный блок можно было сделать иначе.
Вы делаете заметку // TODO: можно переписать или что-то в этом духе, но в суете рабочего процесса вы забываете про заметку и отправляете свой код тимлиду/в продакшн. С Todo Highlighter такие оплошности должны остаться в прошлом.
Этот инструмент выделяет заметки TODO/FIXME в вашем коде ярким цветом, который всегда отчетливо виден в общей структуре кода.
А еще можно вывести все заметки в консоль.
Похожие расширения —
- Todo+ — Более мощный инструмент, чем Todo с большим количеством дополнительных фишек.
Import Cost
Это расширение позволяет вам увидеть размер импортированного модуля. Это очень помогает при работе с такими инструментами как Webpack. Вы сможете сразу увидеть, импортируете ли вы целую библиотеку или отдельную функцию.
Единственная проблема - расширение не показывает стоимость файлов и модулей.
REST Client
Web-разработчику приходится часто иметь дело с REST API. Для его тестирования используют инструменты вроде Postman. Но зачем пользоваться сторонними приложениями, если всю эту работу можно делать прямо в редакторе кода. Встречайте REST Client. Он позволяет отправлять HTTP-запросы и проверять ответ сервера прямо в редакторе Visual Studio Code.
Auto Close Tag и Auto Rename Tag
С тех пор как появился React появился и получил массовое распространение, HTML-подобный синтаксис в форматах JSX бесит разработчиков. Любой веб-разработчик вам скажет, что для него писать тэги - это боль.
И поэтому нам очень пригодится инструмент, который может быстро и легко создавать тэги и атрибуты.
Emmet отличный пример такого решения, которое уже встроено в VSCode. Но иногда вам нужно что-то совсем простое и функциональное. Например автоматический закрыватель тэгов, который моментально создает закрывающий тэг, как только вы написали открывающий. И если вы изменяете этот тэг, расширение сразу меняет и закрывающий тэг.
Именно это и делают Auto Close Tag и Auto Rename Tag. Они подходят для JSX и многих других языков XML, PHP, Vue, JavaScript, TypeScript, TSX.
Качайте прямо отсюда — Auto Close Tag и Auto Rename Tag.
auto rename tag
auto close tag
Похожие расширения —
- Auto Complete Tag — объединяет функции Auto Rename и Auto Close Tag
GitLens
Сам автор расширения утверждает, что GitLens существенно расширяет возможности Git в редакторе Visual Studio Code. В него входит обширный набор фишек, таких как показ авторства кода через Code lens, поиск, история и проводник GitLens. Полный список фич можно прочитать здесь. Можно с уверенностью сказать, что если вы работаете с git, вам просто необходимо установить этот плагин.
Есть и другие расширения, которые специализируются на конкретных функциях. Можете выбрать из них, если устанавливать GitLens целиком для вас нецелесообразно.
Похожие инструменты —
- 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
Визуально отображает разницу в интервалах между строками. Качать здесь.
Похожие расширения
VSCode Icons
Иконки делают ваш редактор более привлекательным!
Похожие расширения —
Dracula (тема)
Просто прикольная тема
Другие рекомендации:
- Fira Code — Моноширинный шрифт с программирующими лигатурами
- Live Server — Локальный сервер разработки с функцией живой перезагрузки для статических и динамических страниц.
- Prettier for VSCode — Инструмент для форматирования кода Settings Sync — Позволяет сохранять пользовательские настройки, расширения и привязки клавиш в Gist. Вы сможете настроить удобный VSCode за считанные минуты.
- Буфера обмена для VSCode — Перенастройте обычные команды Copy и Cut, чтобы сохранить выделенные фрагменты в буфер обмена. Также позволяет копировать несколько блоков текста в единый буфер.
