Расширения VSCode, которые облегчат разработку на JavaScript и Vue

На сегодняшний день существует достаточное количество средств для разработки с поддержкой языка JavaScript и основанных на нем фреймворков. Вопрос выбора конкретного инструмента стоит вне этой статьи, тут же я постараюсь описать свой пользовательский опыт работы с Visual Studio Code и средствах, которые призваны облегчить жизнь JS разработчикам, в частности тем, кто использует Vue.


В магазине расширений VSCode существует огромное множество плагинов, ниже будут приведены наиболее удобные из них для веб разработки.


HTML & CSS


Верстка и написание стилей — это часто монотонная задача, поэтому вашу работу могут облегчить и ускорить следующие расширения:


  • Auto Close Tag и Auto Rename Tag — простые и удобные расширения, для упрощения работы с версткой, имеют поддержку однофайловых компонентов Vue.
  • CSS Peek — простое расширение, добавляющее возможность быстрого просмотра правила или навигации к нему.
  • Color Info — позволяет просмотреть детальную информацию о цвете, имеет неплохой запас настроек.
  • Color Highlight — добавляет отображение цветов в виде border, при обнаружении кодировки цвета в коде.
  • IntelliSense for CSS class names in HTML — анализирует рабочее окружение, для добавления возможности автодополнения CSS классов.

JavaScript


  • Debbugger for Chrome — расширение для упрощиния отладки прямо из редактора кода, работает со всем, что имеет Chrome DevTools.
  • JavaScript (ES6) code snippets — набор сниппетов для JS, очень ускоряет разработку.
  • JSHint — расширение для подсказок по оформлению и организации JS кода, имеет гибкие настройки.
  • ESLint — линтер для JS с гибкими настройками.

Vue


Для работы с Vue существует не так много годных расширений, ниже несколько из наиболее полезных:


  • Vetur — полный набор самых необходимых дополнений для работы с vue, таких как сниппеты, подсветка синтаксиса.
  • Vue Peek — добавляет удобный переход к vue компонентам.

Git


VSCode имеет поддержку работы с git из коробки, но всё же встроенных функций хватает не всегда. Ниже приведены расширения, которые сделают работу с git немного проще:


  • GitLens — это наверное наиболее известное расширение для работы с git, которое добавляет множество возможностей просмотра git информации.
  • Git History — добавляет возможность удобного просмотра истории изменений в git, имеет довольно удобный интерфейс.
  • Git Indicators — простой индикатор git активности в нижнем трее VSCode.

Рабочее окружение и процесс разработки


Для продуктивной работы было бы неплохо иметь помощников в виде дополнений, подсвечивающих простые ошибки, советующие стиль написания и прочие удобные подсказки/действия. Попробуйте воспользоваться следующими расширениями:


  • Bracket Pair Colorizer — добавляет полсветку для скобок, окружающих блоки кода, облегчает восприятие кода при глубокой вложенности, визуально разделяя код.
  • Beautify — на мой взгляд наиболее удобное расширение для автоматической стилизации кода, подробнее с расширением можно ознакомиться по ссылке.
  • Live Server — очень полезное расширение, которое позволяет быстро запустить свой лайв сервер, например для верстки.
  • Import Cost — отличное расширение, которое отображает размер импортируемого модуля, позволяет более детально подбирать импортируемые куски модуля не прибегая к анализаторам бандлов.
  • NPM Intellisense — автокомплит для npm модулей.
  • Open in browser — простое расширение, добавляющее пункт открытия в браузере.
  • Path Intellisense — автокомплит для имен файлов и их расположения.
  • Settings Sync — после окночания установки необходимых инструментов и настройки окружения удобно сохранить конфиг, данное расширение позволит синхронизировать всё в git gist.
  • Sort lines — простой способ организовать сортировку строк в коде по заданным условиям.
  • TODO Highlight — простое расширение для подсветки ключевых слов типа TODO, FIXME.
  • Trailing Spaces — подсвечивает лишние пробелы.
  • VS Live Share — многие сталкивались с проблемой, когда приходится очень долго объяснять удаленному разработчкику, где и что не так, данное расширение упрощает жизнь в подобных ситуациях, позволяя делать живую демонстрацию, поддерживает работу нескольких пользователей, пробрасывает запущенное окружение машине клиента.
  • Visual Studio IntelliCode — автоматизирует рутинные задачи для раработчиков на таких языках, как Python, TypeScript/JavaScript и Java.

Оформление редактора


  • Darcula Theme — наиболее удачное оформление на мой взгляд, так же могу посоветовать Monokai Pro.
  • vscode-icons — самый удачный icon pack для VSCode.

Так же может быть интересно


  • GraphQL for VSCode — своеобразный intellisense для GraphQL, наиболлее удобное расширение, под копотом много полезного, подробнее по ссылке.
  • Instant Markdown — лайв превью для markdown разметки.
  • Paste JSON as Code — удобное расширение, которое генерирует type model из JSON данных. Поддерживает TypeScript, Python, Go, Ruby, C#, Java, Swift, Rust, Kotlin, C++, Flow, Objective-C, JavaScript, Elm, и JSON Schema.
  • Rainbow CSV — подсветка для CSV файлов.
  • Regex Previewer — очень полезное расширение для превью регулярок.
  • SVG Viewer — просмотрщик SVG.

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

Поделиться публикацией

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

    –4
    Самый главный плагин — webstorm)))
      –1

      Тут просто у части людей тяжело с чувством юмора, соответственно и с мозгами, поэтому и минусуют.
      VSCode полезен для своих задач, WebStorm для своих, но немного иронии — это в тему )))

      +3
      > Trailing Spaces — подсвечивает лишние пробелы.

      В vscode есть встроенная опция, чтобы их просто убирать, зачем их подсвечивать?

      > Files: Trim Trailing Whitespace
      > When enabled, will trim trailing whitespace when saving a file.
        +4
        Работать приходится не только со своим кодом и довольно часто он может быть старым и кривым. Автоматическое удаление пробелов в таких случаях изменит историю коммитов, в таких случаях удобно видеть такую подстветку, чтобы работать только со своим куском кода.
        +4
        На мой взгляд:
        — ESLint заменяет JSHint. Так же ESLint может подсвечивать коментарии «TODO», «FIXME». Соответсвенно можно не устанавливать «TODO Highlight»:
        — у GitLens достаточно много функций, не вижу смысла дополнительно устанавливать «Git History»:
        — Запустить/обновить в браузере можно настройками в проекте (package.json и т.п.), это вместо «Open in browser»:
        — «Color Highlight»? — у меня как то без дополнений цвет в квадратике рядом с кодом появляется:
        — про «Trailing Spaces» уже сказали, но добалю что ESLint тоже умеет их подсвечивать.

        В списке есть дополнение для сниппетов, но не увдидел такого полезного дополнения как «Code Spell Checker».

        Очень удивил Vetur, его резмер более 200 МБ.

        Что касается некоторых остальных дополнений, то само приложение VS Code, умеет неплохо рекомендовать дополнения. Просто ориентируясь на то с какими файлами вы работаете.

        Оформление редактора у каждого свое, предлагать темы/шрифты/иконки не вижу смысла.

        Ну и подобных статей на хабре уже не мало, и в основном список повторяется.
          +1

          "Auto Rename Tag" у меня в *.vue работает и так (может часть Vetur?). "Auto Close Tag" в VSCode срабатывает по </.

            0
            Вполне возможно, что этот функционал сейчас есть из коробки. Я достаточно давно использую этот редактор, так что за это время сложился определенный набор расширений и настроек, который собран в git gist и таскается по разным окружениям.
            –2

            VSCodeVim превращает этот комбайн в удобный редактор.

              –8
              Я лучше заплачу за PhpStorm чем ставить кучу плагинов, из которых не все адекватно работают.
                +3
                Держите в курсе.
                +1
                Пользуюсь многим из этого списка.
                Но по мере разрастания проекта VSCode начинает ужасно тупить.
                Линтер, дев сервер с hot-reload и vetur бьются за последние такты моего процессора и довольно часто какой то плагин крашится и приходится перезапускать редактор.
                Похоже скоро придется какие то приятные плюшки отключать.
                  +1
                  vim (vscodevim) позволяет немного ускорить работу.
                  Правда, конфиг чуть поправил:
                  "vim.hlsearch": true,
                  "vim.normalModeKeyBindings": [
                      {
                          "before":["<C-q>"],
                          "after":["<C-v>"]
                      },
                  ],
                  "vim.handleKeys": {
                  "<C-k>": false,
                  "<C-c>": false,
                  "<C-u>": false,
                  "<C-v>": false,
                  "<C-x>": false,
                  "<C-a>": false,
                  "<C-f>": false,
                  "<C-h>": false
                  }

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

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