22.04.2018 14:49
RomanKudinov 41 16400 Источник
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 плагинов, которые регулярно использую. Какие расширения и темы, кроме указанных, используете вы?

Комментарии (41)


  1. jehy
    22.04.2018 19:04
    #10768626

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


    1. ntvsx193
      22.04.2018 19:10
      #10768638

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


    1. karb0f0s
      22.04.2018 19:12
      #10768646

      Для начала это бесплатно. И еще я не разработчик, а админ-многостаночник, поэтому мне удобно в одном редакторе написать автоматизацию на PowerShell, отредактировать markdown файл проекта Git, а потом отредактировать легаси скрипт на VBScript и всё это в одном знакомом мне окружении.


      1. jehy
        23.04.2018 11:21
        #10769728

        Бесплатно это да. Но насчёт всяких разметок — webstorm поддерживает и шелл скрипты и маркдаун. Насчёт вбскрипта не в курсе, не требовалось.


    1. RomanKudinov
      22.04.2018 19:16
      #10768656
      +1

      Помимо перечисленного, стоит отметить скорость работы по сравнению с webstorm, vscode куда шустрее и удобнее в использовании. А огромное количество плагинов позволяет сделать из него практически полноценный IDE.


      1. jehy
        23.04.2018 11:22
        #10769732

        А у вас линтинг включен? У коллег VSCode умирает на линтинге файле на 1000+ строк с большим количеством ворнингов.


        1. iSnifer
          23.04.2018 17:25
          #10770718

          Время фиксить ворнинги


          1. jehy
            23.04.2018 17:41
            #10770748

            • 4000+ файлов в проекте;
            • многие из них по 2-4к строк;
            • многие из ошибок это не просто форматирование, которое исправляется нажатием хоткеев, а сложные штуки, над которыми надо медитировать...
            • фиксить сразу всё — значит, потерять напрочь историю авторства фрагментов кода.

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


    1. Vadem
      22.04.2018 19:25
      #10768670
      +2

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


      1. Yeah
        22.04.2018 23:10
        #10769128

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


        1. worldxaker
          23.04.2018 03:53
          #10769332

          Ну js, c# и питон точно можно отлаживать


          1. Zanak
            23.04.2018 09:38
            #10769530

            Плюсы вроде тоже можно.


      1. jehy
        23.04.2018 11:23
        #10769742

        Вот у меня примерно так же с Jetbrains средами выходит — есть несколько сред, которые выглядят и ведут себя абсолютно одинаково — phpStorm, webStorm, dataGrip, Android Studio, даже из Visual Studio выходит более-менее нормальная IDE при установке Rider.


    1. x07
      22.04.2018 20:43
      #10768830

      а чем webstorm лучше? VSCode Быстрый, мощный, удобный, бесплатный


      1. shybovycha
        23.04.2018 07:02
        #10769370

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


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


        1. shir
          23.04.2018 09:43
          #10769548

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


        1. luckyrlz
          23.04.2018 09:50
          #10769568

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


        1. faiwer
          23.04.2018 13:26
          #10770132

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


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


          1. Sergiy
            23.04.2018 15:34
            #10770460

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


            1. faiwer
              23.04.2018 15:47
              #10770486

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


          1. justboris
            23.04.2018 16:09
            #10770548

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


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


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


          1. justboris
            23.04.2018 16:14
            #10770560
            +1

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


            1. prigara
              23.04.2018 16:44
              #10770630
              +1

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


      1. shybovycha
        23.04.2018 07:10
        #10769372

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


    1. Daniyar94
      22.04.2018 21:47
      #10768988

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


    1. mak_ufo
      22.04.2018 23:34
      #10769156

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

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

      Но опять же. Оговорюсь, что я особо не копался в настройках webstorm.


    1. IvanNochnoy
      23.04.2018 11:44
      #10769818

      Кроме того, Visual Studio Code очень быстро запускается (2-3 сек), это бывает незаменимо, когда нужно просто отредактировать пару строк в разбросанных по диску проектах, запустить SQL-скрипт, допилить PowerShell файл, посмотреть CSV. IDE слишком медленна для подобного рода операций.


      1. jehy
        23.04.2018 11:50
        #10769846
        +1

        Для этого обычно использую Kate или mcedit, время запуска — 0 секунд…


        1. IvanNochnoy
          23.04.2018 13:06
          #10770072

          Есть нюанс. VS Code стартует как текстовый редактор, после чего умнеет с каждой секундой, превращаясь, в конечном итоге, в IDE: в начале есть подсветка синтаксиса и поиск, можно запускать задачи, компилировать, использовать встроенный терминал, а где-то через 20 секунд появляется автоподстановка, можно дебажить и рефакторить. Есть люди, которым это нравится.


          1. faiwer
            23.04.2018 13:28
            #10770134

            а где-то через 20 секунд

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


            1. IvanNochnoy
              23.04.2018 13:50
              #10770198

              SSD пятилетней давности. Время запуска зависит от языка(ов)/объема рабочего пространства. Желающие могут сами сравнить со «своей любимой IDE».


  1. Juma
    22.04.2018 23:34
    #10769154

    Странно что не указан ESLint (либо JSHint, TSLint) — или это считается как должно быть по умолчанию?
    Так же не помешают Beautify (чтобы приятнее было смотреть на чужой код).
    Code Spell Checker — Помогает избегать глупых ошибок в названиях переменных, классов, методов и т.п.


    1. AngReload
      23.04.2018 11:03
      #10769688
      +1

      Последний — очень неожиданная находка, спасибо.


  1. softshape
    23.04.2018 05:17
    #10769358

    VSCode — это не только для JS/Typescript. У меня стоят плагины для CSS, заметно помогающие с ним работать — CSS Peek (есть аналог - IntelliSense for CSS class names in HTML) и Post?CSS Sorting (с кастомными настройками, по умолчанию он пустой). Кроме них, используется еще Run On Save для выполнения тасков при сохранении определенных файлов. Ну и про js-beautify + ESLint тут уже написали выше.


  1. RPG
    23.04.2018 08:20
    #10769410
    +1

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


    • Color Highlight — показывает цвет цвета прямо в редакторе
    • EditorConfig — для поддержки одноименного формата
    • PlantUML — диаграммы прямо в редакторе
    • Script Commands — если лень писать свои плагины, можно цеплять абсолютно любые собственные скрипты к редактору
      Главное, что нет необходимости ставить 3 IDE, если время от времени нужно править код на Java/JavaScript/ObjectiveC/C++.


  1. VladVR
    23.04.2018 10:59
    #10769678

    Никто не встречал плагин, который импорты в тайпскрипте переписывает на прямые?
    Когда есть index.ts, и хочется что то импортнуть из соседнего файла, то автоимпорт автоматически прописывает import {myFunction} from '.'
    а нужно чтоб было import {myFunction} from './myFunction'

    а то как то уже поддостало бороться с циклическими импортами.


  1. maydjin
    23.04.2018 16:41
    #10770626

    это кроссплатформенный редактор с открытым исходным кодом

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


    1. IvanNochnoy
      23.04.2018 16:55
      #10770664
      +2

      Пруфлинк для неверующих


  1. vit100
    24.04.2018 21:28
    #10773788

    А вот если не проблемы с ценой (msdn Subscription ), хорошая ли идея для проекта nodejs использовать vs2017? После c# ну все раздражает в vscode…


  1. Koneru
    24.04.2018 21:29
    #10773790

    Хм, добавив все ваши расширение(без сомнения хорошие) у меня VS стал есть 2,98 ГБ ОЗУ.


    1. RPG
      25.04.2018 08:15
      #10774498

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