Топ VSCode расширений, которые ускорят вашу разработку на JavaScript

https://codeburst.io/top-javascript-vscode-extensions-for-faster-development-c687c39596f5
  • Перевод
VSCode — это кроссплатформенный редактор с открытым исходным кодом, ставший любимым среди программистов, особенно среди веб-разработчиков. Он быстрый, расширяемый и имеет массу возможностей и настроек. Если вы до сих пор не работали с ним, то советую попробовать.

Для VSCode созданы тысячи расширений. Я намерен представить несколько из них, которые использую каждый день. Приступим!



Quokka.js


Quokka.js — это плагин для JavaScript и TypeScript, который отображает результаты выполнения кода в редакторе, непосредственно во время его написания. Попробуйте сами!

Установив расширение, нажмите Ctrl/Cmd(⌘) + Shift + P, чтобы запустить палитру команд редактора, и затем введите Quokka, чтобы увидеть список доступных команд плагина. Выберите и запустите команду New JavaScript File или нажмите ⌘ + K + J, чтобы создать новый файл. Любой введенный код будет выполнен немедленно.

Quokka.js

Похожие расширения:

  • Code Runner — поддерживает множество языков (C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6 и другие);
  • Runner.

Bracket Pair Colorizer & Indent Rainbow


Квадратные и круглые скобки — неотъемлемая часть многих языков программирования. В таком языке как Javascript, простая станица может иметь целый поток этих символов, среди которых тяжело отличить пары открытых и закрытых скобок. В этот момент на помощь приходят Bracket Pair Colorizer и Indent Rainbow. Это два разных расширения. Однако, вместе они представляют отличную комбинацию. Эти расширения наполнят ваш редактор морем красок, сделают блоки кода отличимыми друг от друга и придадут им приятный вид.


Без Bracket Pair Colorizer и Indent Rainbow


Установив Bracket Pair Colorizer и Indent Rainbow

Сниппеты


Сниппеты — это сокращения в редакторе, трансформируемые в полноценный код. Вместо import React from 'react'; пишем imr и жмем Tab, чтобы развернуть сниппет. В частности, clg разворачивается в console.log.

Существует множество сниппетов для разных направлений: JavaScript (или другие языки), React, Redux, Angular, Vue, Jest. Лично я считаю JavaScript сниппеты очень полезными, особенно с тех пор как начал работать преимущественно с JS.

Несколько хороших расширений со сниппетами:


Todo Highlighter


Часто бывает, написав функцию, вы понимаете, что есть лучший способ написать то же самое. Вы оставляете комментарий // TODO: Необходим рефакторинг, но затем забываете об этом и выкладываете код в production. C Todo Highlighter подобного не произойдет.

Плагин выделяет TODO/FIXME или другие комментарии в яркие цвета, что довольно тяжело не заметить. Модное нововведение Todo Highlighter — список выделенных комментариев, который выводится в консоли.

Todo Highlighter

Похожие расширения:

  • Todo+ — более мощный плагин, с множеством новых возможностей;
  • Todo Parser.

Import Cost


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

Import Cost

Rest Client


Веб-разработчики часто взаимодействуют с различного рода REST API. Для изучения ссылок и проверки ответов на запрос, применяют такие инструменты как Postman. Так зачем использовать отдельное приложение, когда можно то же самое сделать в редакторе? Поприветствуйте Rest Client. Он позволяет отправлять HTTP-запросы и просматривать ответ непосредственно в Visual Studio Code.

Rest Client

Auto Close Tag & Auto Rename Tag


С приходом React и той популярностью, которую он набрал за последние несколько лет, HTML-подобный синтаксис, в виде JSX, стал последним писком моды. Любому веб-разработчику быстро надоест вручную писать теги в JS файлах. В таком случае, нам необходим инструмент, который сможет быстро и легко генерировать теги. Emmet — очень полезный плагин, решающий данную задачу. Однако, иногда нам хочется чего-то более простого и лаконичного. Нам бы пригодилось расширение, которое будет добавлять закрывающий тег к его открытой паре, и автоматически изменять закрывающий тег, когда вы изменяете открывающий. Существует два расширения, которые могут справиться с поставленными задачами.

Они также работают с JSX и множеством других языков (XML, PHP, Vue, JavaScript, TypeScript, TSX).

Вы можете найти их здесь — Auto Close Tag и Auto Rename Tag

Auto Rename Tag

Auto Close Tag

Похожие расширения:


GitLens


Со слов автора, GitLens расширяет возможности Git, встроенного в Visual Studio Code. Плагин включает удивительное количество функций, таких как указание автора, поиск коммитов, история и проводник. Вы можете изучить полное описание этих возможностей здесь. Если вы работаете с Git, то вы обязаны установить этот плагин.

GitLens

Существуют другие расширения, выполняющие специфические задачи. Если GitLens оказался для вас слишком объемным или вам не требуется большая часть его функций, то советую взглянуть на следующий список:

  • Git History — отображает красивый граф истории коммитов. Рекомендуется.
  • Git Blame — позволяет увидеть информацию о текущей строке. Похожая функция встроена в GitLens.
  • Git Indicators — позволяет увидеть изменения в файлах и количество добавленных и удаленных строк.
  • Open in GitHub / Bitbucket / GitLab / VisualStudio.com — дает возможность, одной командой, открыть репозиторий в браузере.

Git Project Manager


GPM позволяет открыть окно с новым репозиторием напрямую из редактора. Проще говоря, вы можете открыть другой репозиторий не покидая VSCode.

После установки данного расширения, пропишите gitProjectManager.baseProjectsFolders в список адресов, содержащих репозитории.

{
    "gitProjectManager.baseProjectsFolders": [
        "/home/user/nodeProjects",
        "/home/user/personal/pocs"
    ]
}

Похожие расширения:

  • Project Manager — лично не использовал, но он имеет более миллиона загрузок. Стоит попробовать.

Identicator


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

Indenticator

Похожие расширения:

  • Guides.

VSCode Icons


Новые иконки придадут редактору привлекательности!

VSCode Icons

Похожие расширения:


Dracula (Theme)


Полюбившийся мне внешний вид.
Dracula theme

Другие плагины, которые могут вам пригодиться:

  • Fira Code — моноширинный шрифт с лигатурами для программистов;
  • Live Server — локальный сервер. Включает динамическоую перезагрузку для статических и динамических страниц;
  • Prettier for VSCode — плагин для форматирования кода;
  • Settings Sync — позволяет сохранять пользовательские настройки, расширения и сочетания клавиш. Такая возможность позволит установить VSCode на другом устройстве в течении нескольких минут, и не потерять конфигурацию;
  • Multiple clipboards for VSCode — переопределяет стандартные команды «выделить» и «вырезать». Добавляет возможность скопировать несколько блоков текста в единый буфер.

Я поделился тем набором VSCode плагинов, которые регулярно использую. Какие расширения и темы, кроме указанных, используете вы?
Поделиться публикацией
Комментарии 45
    +2
    На случай, если в топик придут пользователи vscode — а можете рассказать, чем он лучше webstorm? А то у меня он стоит у пары коллег (примерно столько же пользуются саблаймом), но аргументации использования или каких-то киллер фич не заметил.
      0

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

        +5
        Для начала это бесплатно. И еще я не разработчик, а админ-многостаночник, поэтому мне удобно в одном редакторе написать автоматизацию на PowerShell, отредактировать markdown файл проекта Git, а потом отредактировать легаси скрипт на VBScript и всё это в одном знакомом мне окружении.
          0
          Бесплатно это да. Но насчёт всяких разметок — webstorm поддерживает и шелл скрипты и маркдаун. Насчёт вбскрипта не в курсе, не требовалось.
          +9
          Помимо перечисленного, стоит отметить скорость работы по сравнению с webstorm, vscode куда шустрее и удобнее в использовании. А огромное количество плагинов позволяет сделать из него практически полноценный IDE.
            0
            А у вас линтинг включен? У коллег VSCode умирает на линтинге файле на 1000+ строк с большим количеством ворнингов.
              +1
              Время фиксить ворнинги
                0
                • 4000+ файлов в проекте;
                • многие из них по 2-4к строк;
                • многие из ошибок это не просто форматирование, которое исправляется нажатием хоткеев, а сложные штуки, над которыми надо медитировать...
                • фиксить сразу всё — значит, потерять напрочь историю авторства фрагментов кода.

                В общем, бывают сложные случаи. Опять же — чтобы фиксить ворнинги, надо видеть ворнинги. А при зависшем намертво линтинге это не очень просто делать.

            +8
            Функционал не сильно уступает WebStorm(с учётом плагинов), при этом менее требователен к ресурсам(тут, правда, тоже зависит от плагинов), бесплатен и поддерживает много разных языков. Я, например, пишу на C#, Python, Go и Rust для бекенда и на Angular и React для фронтенда. Кроме того, часто балуюсь с кучей других языков. Ставить несколько IDE не очень хочется, когда можно обойтись одной.
              +1

              А поддержка многих языков включает в себя пошаговую отладку? Или речь просто о подсветке синтаксиса?

                +1
                Ну js, c# и питон точно можно отлаживать
                  0
                  Плюсы вроде тоже можно.
                –1
                Вот у меня примерно так же с Jetbrains средами выходит — есть несколько сред, которые выглядят и ведут себя абсолютно одинаково — phpStorm, webStorm, dataGrip, Android Studio, даже из Visual Studio выходит более-менее нормальная IDE при установке Rider.
                +7
                а чем webstorm лучше? VSCode Быстрый, мощный, удобный, бесплатный
                  +2

                  вся мощь продуктов JetBrains (при условии хорошей поддержки экосистемы) — "контекстный интеллект". простейший пример — подсветка ошибок и автодополнение, которые в случае VSCode и SublimeText в основном подсказывают текстовые совпадения и базовые ошибки в синтаксисе, в то время как IntelliJ (и его производные) подсказывают наиболее подходящие варианты дополнения в данном контексте и предлагают возможности для рефакторинга на лету. не уверен, что одними плагинами можно достичь подобного уровня "осведомленности" редактора...


                  возможно устаревшее мнение (последние несколько лет работаю преимущественно с IntelliJ), но по крайней мере раньше было именно так и в WebStorm в том числе.

                    +1

                    В vscode от языка зависит. Для JavaScript/TypeScript и ошибки подсвечиваются, и автодополнение хорошее, и всякие Go to definition. А, например, для руби уже похуже поддержка. В общем надо конкретный язык смотреть. И при помощи плагинов можно действительно много реализовать.

                      +2
                      Мнение устаревшее. VSCode из кожи вон лезет чтобы дать осмысленные подсказки. Я использую VSCode для работы с React, он отлично справляется с подсказками функций класса, параметров статичных объектов, переменных итд. Когда Atom просто подгадывает по имени, VSCode подсказывает как Webstorm. В связке с Typescript VSCode вообще отлично работает (но это не удивительно, продукты Microsoft). Сам пользовался VSCode, Webstorm, Atom и SublimeText, всегда предпочитал Webstorm как раз таки из-за контекстных подсказок, но уж больно неповоротливый он, очень тормозит и ест ресурсы. VSCode относительно легкий и умный редактор.
                        0

                        Вопрос по поводу JetBrains. Что если я захотел подключить какой-нибудь custom-ный plugin к babel? Например поддержку |> или что-нибудь ещё более новое/своё. Не получится такого, что, скажем нужно пару лет подождать поддержки decorator-ов, for await *, |>, ::, чего-нибудь ещё, потому что мне половину кода мажет как ошибку, линтер сходит с ума, автокомплит умер, и работать невозможно.


                        ^ не троллинг, я не пользовался продуктами JetBrains и мне правда интересно. В ST3 мне достаточно написать линтер для eslint (или взять готовый), и подправить подсветку синтаксиса (если она сломалась). И то и другое идёт отдельно от редактора, и можно обновлять хоть каждый день. Например сделать пулреквест в репозиторий автора плагина.

                          0
                          А что мешает для WebStrom-а кастомный eslint дать?
                            0

                            Понятия не имею. Я потому и спрашиваю. Как там с конфигурируемостью и расширяемостью. И не нужно ли для этого писать на Java/Kotlin? Могу я просто взять и конфиг eslint-а расширить? Или всё равно редактор "расползётся"?

                            0

                            Webstorm (и другие продукты JetBrains соответственно) поддерживает все последние нововведения Javascript, включая еще не утвержденные proposals, например декораторы, или приватные поля через #.


                            for await и :: тоже поддерживаются, |> — нет.


                            Найти какое-то подробное описание с полным списком не получилось, документация про это очень скудная.

                              +1

                              Может быть prigara сможет рассказать про отношение разработчиков к новым фичам и можно ли самому написать плагин для поддержки новых (или нестандартных) синтаксических конструкций.

                                +3
                                Добрый день!
                                Мы стараемся поддерживать proposals на этапе 3. Некоторые proposals добавляем раньше, если есть спрос благодаря хорошему Babel-плагину. Поддержку предложений на стадии 1 стараемся не делать — слишком уж часто меняется синтаксис.
                                Страницы с полным списком поддержанных proposals нет, но можно следить за задачами с тегом ES7 (знаем, что не очень правильное название тега, но так уж сложилось) на нашем трекере.
                                Делать плагины для поддержки нестандартного JS-cинтаксиса у нас и правда непросто, но мы готовы помогать советом.
                            0

                            с другой стороны не скажу что в мире IntelliJ (и производных) все гладко и единорожки с радугами — поддержка той же scala в intellij отвратительна. а множество плагинов либо безнадежно заброшены авторами, либо работают из рук вон плохо. хотя, наверное, то же самое можно сказать про комьюнити-плагины для любого инструмента =)

                            0

                            Апдейты выходят каждую неделю, всегда последние версии плагинов. Легко самому подправить какой-нибудь плагин. Все на JS

                              0
                              Поставил себе пару дней назад webstorm. Пока не понял, почему все так хвалят эту IDE. У меня vscode из коробки автоматически подтягивал типы ts. Т. е. если я писал такой код:
                              foo = (ctx: context) => {...}, то vscode сам дописывал в самом верху такое:
                              import {context} from 'koa'.

                              Ну и плагин для ноды показался мне умнее в плане автодополнения, чем webstorm.

                              Но опять же. Оговорюсь, что я особо не копался в настройках webstorm.
                                0
                                Кроме того, Visual Studio Code очень быстро запускается (2-3 сек), это бывает незаменимо, когда нужно просто отредактировать пару строк в разбросанных по диску проектах, запустить SQL-скрипт, допилить PowerShell файл, посмотреть CSV. IDE слишком медленна для подобного рода операций.
                                  +1
                                  Для этого обычно использую Kate или mcedit, время запуска — 0 секунд…
                                    0
                                    Есть нюанс. VS Code стартует как текстовый редактор, после чего умнеет с каждой секундой, превращаясь, в конечном итоге, в IDE: в начале есть подсветка синтаксиса и поиск, можно запускать задачи, компилировать, использовать встроенный терминал, а где-то через 20 секунд появляется автоподстановка, можно дебажить и рефакторить. Есть люди, которым это нравится.
                                      0
                                      а где-то через 20 секунд

                                      А у вас HDD или SSD? Оно на SSD так долго просыпается?

                                        0
                                        SSD пятилетней давности. Время запуска зависит от языка(ов)/объема рабочего пространства. Желающие могут сами сравнить со «своей любимой IDE».
                                +2
                                Странно что не указан ESLint (либо JSHint, TSLint) — или это считается как должно быть по умолчанию?
                                Так же не помешают Beautify (чтобы приятнее было смотреть на чужой код).
                                Code Spell Checker — Помогает избегать глупых ошибок в названиях переменных, классов, методов и т.п.
                                  +1
                                  Последний — очень неожиданная находка, спасибо.
                                  0
                                  VSCode — это не только для JS/Typescript. У меня стоят плагины для CSS, заметно помогающие с ним работать — CSS Peek (есть аналог - IntelliSense for CSS class names in HTML) и Post​CSS Sorting (с кастомными настройками, по умолчанию он пустой). Кроме них, используется еще Run On Save для выполнения тасков при сохранении определенных файлов. Ну и про js-beautify + ESLint тут уже написали выше.
                                    +2

                                    Добавлю ещё отличные плагины:


                                    • Color Highlight — показывает цвет цвета прямо в редакторе
                                    • EditorConfig — для поддержки одноименного формата
                                    • PlantUML — диаграммы прямо в редакторе
                                    • Script Commands — если лень писать свои плагины, можно цеплять абсолютно любые собственные скрипты к редактору
                                      Главное, что нет необходимости ставить 3 IDE, если время от времени нужно править код на Java/JavaScript/ObjectiveC/C++.
                                      0
                                      Никто не встречал плагин, который импорты в тайпскрипте переписывает на прямые?
                                      Когда есть index.ts, и хочется что то импортнуть из соседнего файла, то автоимпорт автоматически прописывает import {myFunction} from '.'
                                      а нужно чтоб было import {myFunction} from './myFunction'

                                      а то как то уже поддостало бороться с циклическими импортами.
                                        0
                                        это кроссплатформенный редактор с открытым исходным кодом

                                        А можно таки ссылку на исходный код самого редактора? Или, хотя бы встроенных расширений? Пруф линк для неверующих так сказать.

                                        0
                                        А вот если не проблемы с ценой (msdn Subscription ), хорошая ли идея для проекта nodejs использовать vs2017? После c# ну все раздражает в vscode…
                                          0
                                          Хм, добавив все ваши расширение(без сомнения хорошие) у меня VS стал есть 2,98 ГБ ОЗУ.
                                            0

                                            У меня Андроид студия столько же жрет, и никаких расширений ставить не пришлось:) Если мы говорим про экономию памяти — однозначно vim. Или Geany, он память не жрет и довольно много из коробки умеет.

                                              0
                                              Мы не говорим о экономии памяти, я просто описал факт не указанный в статье. Т.к возможно кому то, как мне например, такое потребление ОЗУ неприемлемо.

                                              Мне Chrome хватает))

                                              ИМХО

                                              P.s я не использую Chrome в качестве редактора кода, хотя у них реализован функционал для редактирования файлов.
                                                0
                                                Sublime, опять же.
                                                  0
                                                  Что Sublime? Мало оперативы ест? Ну это не странно, все таки С++. Но я говорю не о экономии памяти, а правильном управлении ресурсами, например тот же Atom(на движке Electron, как и VS Code) потребляет около 300МБ с 25 расширениями. Но если сравнить такие параметры как ОЗУ, функциональность и стоимость получим интересный результат:
                                                  ATOM:300МБ, много плагинов, бесплатный.
                                                  Sublime: 30МБ, мало плагинов, условно бесплатный для некоммерческого использования.
                                                  VS Code: 3ГБ(в конкретно случае, а так средний показатель 300-500МБ), много плагинов, бесплатный.
                                                  Отсюда выбор Atom & VS Code идет чисто от потребности конкретного юзера.
                                                  А вот Sublime выберут те кому очень важна ОЗУ и пишут на популярных технологиях.
                                              +1

                                              Могу порекомендовать ещё моё расширение для работы с webassembly — vscode-wasm. Подсвечивает синтаксис и умеет конвертировать wasm в wat и обратно.

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

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