10 полезных плагинов Visual Studio Code

Автор оригинала: Daan
  • Перевод
Все от опытных разработчиков до начинающих джунов хотят упростить себе жизнь. Правильные инструменты могут помочь с этим.

Если в качестве среды разработки вы используете Visual Studio Code, вам повезло. Вы можете установить кучу плагинов и облегчить себе жизнь по максимуму.

Плагины очень влияют на продуктивность и подход к работе. Именно это мы обсудим ниже.

«Сперва мы меняем инструменты, а потом они меняют нас»
— Джефф Безос

Все плагины бесплатны и доступны на Visual Studio Marketplace.

Visual Studio Intellicode


image

Это самый часто скачиваемый плагин для Visual Studio (более 3 200 000 скачиваний). И, на мой взгляд, самый полезный.

Этот плагин создан, чтобы помогать разработчикам писать код. Он поддерживает огромное количество языков программирования. Visual Studio Intellicode использует методы машинного обучения. Он ищет и анализирует шаблоны, используемые в многочисленных проектах GitHub с открытым исходным кодом, и предлагает их вам, когда вы пишите код.


EDISON Software - web-development
Статья переведена при поддержке компании EDISON Software, которая разрабатывает приложения и сайты, а также инвестирует в стартапы.


Git Blame


image

Кто это сделал?!

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

Это полезная информация, особенно когда вы работаете с ветвями функций. Так как Git Blame сообщает вам, в каком коммите (то есть в какой ветке) была изменена строка кода, вы знаете, какой тикет вызвал это изменение. Это поможет вам лучше понять причины изменений.

Prettier


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

Prettier совместим с JavaScript, TypeScript, HTML, CSS, Markdown, GraphQL и другими современными инструментами и позволяет правильно форматировать код.

JavaScript (ES6) Code Snippets


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

The JavaScript (ES6) code snippets — удобный плагин, который предоставляет некоторые очень полезные фрагменты кода JavaScript для ленивого разработчика. Он связывает стандартные вызовы функций с горячими клавишами. Как только вы с этим разберетесь, ваша продуктивность увеличиться в разы.

Sass


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

Path Intellisense


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

Debugger for Chrome


image

Необязательно уходить из Visual Studio Code, если нужно дебажить JavaScript. Debugger for Chrome, выпущенный Microsoft, позволяет отлаживать исходные файлы непосредственно в Visual Studio Code

ESLint


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

SVG Viewer


image

Расширение SVG Viewer добавляет ряд утилит для работы с SVG в Visual Studio Code. Этот плагин позволяет отображать файлы SVG и просматривать их внешний вид, не выходя из редактора. Кроме того, этот плагин позволяет конвертировать файлы в PNG и создавать URI схемы данных.

Themes


Темы — последние в списке, но не по значимости. Поскольку вы будете смотреть на свой редактор каждый день, почему бы не сделать его максимально красивым? Существует множество плагинов для настройки, которые меняют цветовую схему и значки на боковой панели. Некоторые популярные темы доступны бесплатно: One Monokai, One Dark Pro и Material Icon.

Перевод: Диана Шеремьева
Edison
276,01
Изобретаем успех: софт и стартапы
Поделиться публикацией

Комментарии 12

    +5
    GitLens — построчно показывает кто и когда что сделал в коде
    marketplace.visualstudio.com/items?itemName=eamodio.gitlens
      +1
      Kite интересная штука, пока только для питона. Есть плагины для большинства IDE/редакторов.
        0
        Visual Studio Intellicode использует методы машинного обучения. Он ищет и анализирует шаблоны, используемые в многочисленных проектах GitHub с открытым исходным кодом, и предлагает их вам, когда вы пишите код.
        Интересно, он эти шаблоны локально подгружает или на сервер ваш код посылает, там анализирует и даёт советы?

        Для удобства, сразу бы ссылки на маркетплейс и git плагина (если open source)
        0
        Да эта десятка, в том или ином виде, уже который год лучшая. Интереснее было бы топ 10, используемых в компании.
          0
          Какие полезные штучки есть для Rust?
            0

            Неплох Crates, для управления зависимостями.

            +6

            Не совсем понятно: автор: Daan, переводчик: Диана Шеремьева.


            Извините за вопрос: А Вы кто?

              0
              Лучше скажите, есть ли плагин, который выявляет кириллицу среди кода? заметил, что часто стал делать опечатки с русскими символами в именах методов, более того, код нигде не падает даже и увидеть можно только в мержреквесте через гитлаб.
                0
                Плагина не знаю, но иногда проверяю себя поиском по проекту с помощью регулярных выражений. Конечно не самый удобный способ, но лучше так, чем никак.
                  0
                  Code Spell Checker
                  По дефолту проверяет английский, но можно установить и русский словарь

                  Также из того, чем я пользуюсь, помимо того, что в статье указано:
                  Color Highlight — подсвечивает код цвета его цветом.
                  Sort lines — позволяет быстро отсортировать список чего-либо
                  Version Lens — показывает актуальные версии пакетов в package.json
                  Bracket Pair Colorizer — раскрашивает скобки разных уровней в разные цвета
                  Кстати, самые удобные js сниппеты для меня вот эти
                  +1
                  Плагин TabNine это просто магия автодополнения. Он буквально может небольшие части кода писать за разработчика :).

                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                  Самое читаемое