10 обязательных расширений VSCode ✔️

Описание расширений, которые я использую ежедневно, чтобы увеличить скорость работы

Привет! В этой статье я намерен представить 10 расширений, которые я использую для ускорения работы и чтения кода в Visual Studio Code, редакторе исходного кода, который я использую каждый день.
Я должен упомянуть, что на сегодняшний день я разрабатывал только приложения на Angular. Итак, некоторые из расширений, на которые я буду ссылаться, будут иметь конкретную ориентацию на Angular.
Я надеюсь, что некоторые из них помогут вам в будущем.

Вы можете найти ссылки на соответствующую документацию, прикрепленную к именам расширений.

Bracket Pair Colorizer 2 v0.2.1 — 2,9 млн ⬇️ и 4,5 ⭐️

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

PS: если вы перейдете по ссылке для выбранных расширений, вы найдете некоторые настройки, которые вы можете внести в стиль.

Color Highlight v2.4.0 — 2,7 млн ⬇️ и 4,5 ⭐️

Расширение для выделения цветов в редакторе. Когда у вас есть шестнадцатеричный, rgb, rgba или другой тип кода определения цвета, он выделяется своим цветом. Таким образом, вы можете легко понять цвета, которые у вас есть. Например: с этим расширением легче узнать цвет, который вы копируете в другой файл. Это простой помощник для подобных ситуаций.

vscode-icons v11.5.0 — 8,4 млн ⬇️ и 5 ⭐️

Это расширение для значков Visual Studio Code, оно имеет самые красивые значки для всех типов файлов и помогает найти нужные. Поначалу вам может быть немного неудобно из-за разнообразия иконок, которые вы найдете, но через некоторое время вы поймете, что нет лучших расширений для иконок, чем это. Просто попробуйте!

Lit-html v1.11.1 — 156к ⬇️ и 5 ⭐️

С этим расширением мы получаем подсветку синтаксиса и IntelliSense для html внутри javascript и typescript. В таких ситуациях очень полезно иметь более читаемый код. Чем больше цветовых определений у нас есть, тем более понятный у нас код. Когда мы используем синтаксис JSX, нам нужно такое расширение, чтобы получить определение нашего цвета. Это не очень известно, но для некоторых полезно.

Auto Rename Tag v0.1.7 — 6M ⬇️ и 3.5 ⭐️

Одно из первых расширений, которое я скачал, и одно из моих любимых. Когда я был новичком, у меня были проблемы при изменении тегов в html файлах. Это часто случалось, потому что я думал, что когда вы меняете тег, парный тег также меняется. По умолчанию этого не происходит и выдает ошибку, что теги не совпадают, но с помощью этого расширения у меня больше нет той же проблемы. Таким образом, вместо того, чтобы менять парные теги, вам нужно изменить только один. Некоторым это может показаться неважным, но небольшая проблема, которую вы можете решить с помощью расширения, вы должны проверить. Это только увеличивает темп вашей работы, это то, что мы ищем здесь.

Prettier Code Formatter v8.0.1 — 13,9 млн ⬇️ и 3,5 ⭐️

Это отличный форматировщик кода. С ним я всегда использую формат при сохранении, который вы можете найти в настройках VSCode. Благодаря этой комбинации каждый раз, когда вы сохраняете файлы, над которыми работаете, код форматируется и становится легко читаемым. Кроме того, вы сразу узнаете, есть ли какая-либо ошибка. Если код не форматируется при сохранении, значит что-то не так с кодом, фигурная скобка, круглая скобка, пропущенный тег, что-то. Очень полезное расширение для получения более красивых файлов и кодов. Разработчики, которые коснутся вашего кода, будут поражены.

Angular Snippets v12.0.0 — 2,6 млн ⬇️ и 5 ⭐️

Расширение для Angular, которое поможет вам быстро написать нужный код. Это расширение предоставляет ярлыки для создания компонентов, директив, http-запросов, редукторов ngrx, угловых циклов и условий в html-файлах и многих других функций. Просмотрите документацию и найдите ярлыки, которые помогут вам лучше всего программировать.

PS: Если вы не знакомы с Angular, я рекомендую вам найти такой фрагмент кода, который соответствует вашей платформе разработки. На Marketplace Extensions есть много того, что может помочь вам в этом.

Проверка правописания кода v1.10.2–2.9M ⬇️ и 4.5 ⭐️

Это расширение, которое проверяет слова с ошибками в исходном коде. Это средство проверки орфографии для нужных вам языков, поэтому в вашем коде не будет орфографических ошибок. Это не приоритет, но это расширение, которое вы устанавливаете, и когда вы не ожидаете, оно будет вашим другом. Добавить ничего не стоит.

История Git v0.6.17- 4.3M ⬇️ и 4.5 ⭐️

Это обязательное расширение для всех пользователей Git. Позволяет искать и отслеживать историю ваших веток, файлов, строк. Вы можете легко увидеть последние изменения в файлах, над которыми вы работаете, и проверить изменения, которые вы ранее внесли в код.

GitLens Git Supercharged — 10 млн ⬇️ и 5 ⭐️

Хорошее расширение, которое можно иметь вместе с предыдущим, о котором я упоминал. Он очень прост в использовании и очень помог мне, когда я пытался понять, какие изменения были внесены с течением времени в файл, который я исправлял. Я мог сразу увидеть, было ли что-то плохо реализовано раньше, и переработать файл или его части.

Вывод 🔚

Надеюсь, некоторые из упомянутых расширений вам подойдут! Цель этой статьи не в том, чтобы расширить вашу библиотеку расширений, а в том, чтобы напомнить вам, что такая помощь существует. Эти расширения предназначены для повышения скорости вашей работы за счет сокращения времени, которое вы тратите на просмотр файлов, облегчения чтения и понимания кода, добавления ярлыков к общему коду, который вы пишете каждый день, и этот список можно продолжить. Ознакомьтесь с подобными статьями, чтобы получить бесплатную помощь от сообщества программистов.

Хорошего дня! 👨‍💻✌🏻