Visual Studio Code (VS Code)  —  популярный редактор кода, который используют миллионы разработчиков по всему миру. Это бесплатный редактор с открытым исходным кодом, доступный для Windows, macOS и Linux. VS Code обладает широкими возможностями настройки и может быть дополнен различными расширениями. Ознакомимся с некоторыми из них.

Примечание: в обзоре не будет Prettier, ESLint, Gitlens и других распространенных расширений.

1. Better Comments

Трудно найти комментарий (для прочтения или редактирования), если он не выделен цветом. Каково же решение?

Решение  —  использовать Better Comments. Ниже приведен пример того, как с помощью этого плагина можно выделять комментарии разными цветами.

По умолчанию в Better Comments используются префиксы !?, todo и *. Вот как я создал последний (пользовательский). Зайдите в настройки VSCode, нажав ctrl +, введите better-comments и нажмите Edit в settings json. Вы можете настроить код, а также создать множество собственных тегов.

{
"tag": "-",
"color": "#66fc03",
"strikethrough": false,
"underline": true,
"backgroundColor": "transparent",
"bold": false,
"italic": true
}

2. Code Time

Хотите отслеживать, сколько часов у вас уходит на программирование в течение дня, недели или месяца? Установите Code Time. После установки этого расширения в VSCode появится иконка.

Необходимо создать учетную запись, чтобы она отображала ваши данные. Зарегистрироваться можно через Google, Github или по электронной почте.


3. HTML to CSS autocompletion

Каждому веб-разработчику знакома ситуация, когда нужно переключиться между файлами и увидеть имя класса или идентификатора, использованное в HTML-элементах, чтобы скопировать его и перенести в CSS-код.

Расширение HTML to CSS autocompletion подскажет вам имена классов и идентификаторов, использованных в HTML-файле.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>

<body>
<div class="container">
<div class="hero">
<div id="blog">
<p class="para"></p>
</div>
</div>
</div>
</body>

</html>
До установки расширения
После установки расширения

4. Paste JSON as Code

Те, кто работал с TypeScript, знают, как мучительно вводить interface или type для каждого вызова API. Это расширение напишет за вас весь код объявления interface или type для всех вызовов API.

Сначала скопируйте ответ API и вставьте его в файл TS. После этого выделите весь ответ, нажмите ctrl + shift + p и введите Copy. После этого удалите код ответа, снова нажмите ctrl + shift + p и введите Paste JSON as code.

Скопируйте ответ, вставьте его, выделите, затем нажмите ctrl + shift + p и введите Copy.

Удалите предыдущий код, снова нажмите ctrl + shift + p и введите Paste JSON as Code. Задайте имя и посмотрите ответ.

Окончательный ответ

5. Pretty TypeScript Errors

Надоело видеть однообразное сообщение об ошибке в TypeScript? Сделайте эти сообщения более красивыми и удобочитаемыми с помощью Pretty TypeScript Errors, чтобы потом легко исправить ошибки.

До установки расширения
После установки расширения

6. Thunder Client/Postman

Некоторые тестируют API вне VSCode, установив Postman. При этом приходится переходить с одной вкладки на другую, чтобы переключаться между двумя приложениями. Как было бы удобно тестировать API в VSCode!

И это возможно. Тестируйте API с помощью Thunder Client или Postman, установив их в VSCode.

После установки Thunder Client

Вы можете выполнять любые типы запросов внутри Thunder Client, а также передавать тело JSON. Более того, Thunder Client сгенерирует код за вас!

Если вы не хотите расставаться с Postman, то можете также установить и использовать его в VSCode!

После установки Postman появится иконка.

Для использования Postman необходимо создать учетную запись, а для Thunder Client этого не требуется.


7. MERN Stack Snippets

Надоело каждый раз писать один и тот же шаблонный код для бэкенда (express и mongoose)?

Ниже приведены сниппеты из MERN Stack Snippets, которые помогут избежать написания шаблонного кода и сэкономить время.

Сниппеты, имеющиеся в расширении

8. Inline Fold

При использовании TailwindCSS или Bootstrap код часто выглядит неаккуратно из-за длинных имен классов.

До установки расширения

После установки Inline Fold значения атрибутов классов будут иметь вид трех точек ..., и всякий раз при щелчке по этим точкам будет появляться исходное значение.

После установки расширения

9. Code Tour

Хотите записать увлекательный тур по коду для своего блога или видеоурока на YouTube? Поможет Code Tour.

Вот как это делается:

  • Нажмите ctrl + shift + p и введите Record Tour. Дайте название по своему усмотрению.
  • Наведите курсор на любую строку кода, пока не увидите знак +.
  • Щелкните на +, и вам будет предложено написать комментарий.

Таким образом вы создадите свой тур. Чтобы просмотреть сделанные записи, щелкните по разделу с названием CODETOUR (он появится в левой нижней части редактора).


10. Error Lens

Найти мелкие опечатки бывает трудно.

До установки расширения

Error Lens помогает легко найти эти ошибки, выделяя нужную строку цветом, а также добавляя к ней текст, чтобы вы могли ее быстрее заметить.

После установки расширения

11. Reactree

С помощью Reactree можно представить все приложение в виде дерева. Установите расширение, и оно автоматически загрузит еще два расширения с названиями learn-markdown и learn-preview. Нажмите ctrl + shift + p и введите там ReacTree: Show Panel. Выберите корневой файл приложения, и расширение автоматически сгенерирует древовидную структуру приложения.

Нажатие по значку, подчеркнутому синим цветом, приведет к переходу к этому файлу.

Если щелкнуть на значке, подчеркнутом красным цветом, то появится список свойств, которые передаются в данный компонент.


12. Draw.io Integration

Это очень крутое расширение, в котором есть много интересного. Оно помогает рисовать различные диаграммы и многое другое.

Создайте файл .drawio  —  и увидите этот интерфейс. Вы можете редактировать готовые изображения или создавать новые. Пришло время реализовать ваш талант редактора.

Читайте также:

Читайте нас в Telegram, VK и Дзен


Перевод статьи Hero: Best VSCode Extensions That Every Developer Should Have

Предыдущая статьяKube-Proxy и CNI: скрытые компоненты сети Kubernetes
Следующая статьяКак создать приложение Android за 7 шагов