Используем VS Code для Веб-разработки

    VS Code (Visual Studio Code) — относительно новый текстовый редактор, выпущенный Microsoft. Он, также как и Atom, основывается на облочке Electron (написанной командой Atom), кардинально отличаясь реализацией самого редактора.

    VS Code обладает своими уникальными фичами, такими, как, например, IntelliSense "из-коробки".

    В этой статье я бы хотел поделиться тем, что нашел для себя полезным в VS Code для веб-разработки.

    Осторожно! Под катом много картинок и гифок.


    Stable vs Insiders


    У Visual Studio есть два канала обновлений — stable и insiders. Первый — стабильные версии, второй же обновляется каждую неделю и в обмен на возможно большее количество багов включает самые современные фичи. Скачать последнюю версию можно либо по ссылке, либо указав update.channel как "insiders" в настройках VS Code.

    React и JSX


    В настоящий момент, чтобы получить достойную поддержку JSX в VS Code, прийдется немного потпомучаться и установить два расширения:

    JS is JSX overwrite
    ESLint

    Последний, впрочем, может быть заменен на XO.

    Если вы выбрали ESLint, то в проекте должен быть .eslintrc следующего содержания:

    {
      "ecmaFeatures": {
        "jsx": true
      }
    }

    Если вы все сделали правильно, то теперь JSX будет подсвечиваться без ошибок:



    CSS, LESS, SCSS и Stylus


    В качестве линтера файлов стилей я рекомендую расширение stylelint. В качестве "бекенда" он использует PostCSS, что означает, что поддерживаются любые файлы стилей, поддерживаемые последним.



    Чтобы включить stylelint в VS Code, понадобится снова пойти в настройки и добавить:

    {
      "stylelint.enable": true
    }

    Другие полезные плагины в зависимости от языков, с которыми вы работаете


    • Dart — популярный в среде AngularJS язык программирования
    • Flow — плагин для flowtype, статического тайп-чекера от facebook для JavaScript'а. Полезен, если хочется добавить в проект типизацию, но не хочется по каким-либо причинам использовать TypeScript.
    • Handlebars — поддержка шаблонов handlebars
    • HTMLLint — будет полезен опять же для AngularJS разработчиков и верстальщиков (по понятным причинам бесполезен при работе с JSX), демо можно посмотреть здесь htmlhint.com
    • Smarty — старый добрый шаблонизатор для PHP
    • Stylus —еще один плагин для Stylus, если по какой-то причине не понравился stylelint
    • Swig —шаблонизатор для javascript, используется, например, в проекте Mean.JS
    • Twig — поддержка одного из самых популярных шаблонизаторов PHP. Часто используется в Symfony проектах.
    • XML Tools —полезный для XML/XSLT разработчиков набор плагинов

    Сниппеты


    Я не фанат сниппет-плагинов. Но если вы, напротив, являетесь таковым, то на Visual Studio Marketplace вас ждет огромный раздел с ними

    Полезные расширения


    Align


    Форматирует выделение



    Beautify


    Интерфейс к jsbeautifier.org. Крайне полезен если приходится часто приводить в порядок совсем некудышный JS-код.

    Bookmarks


    Позволяет запоминать строки и быстро переходить к ним





    Color Highlighter


    Подсвечивает HTML-цвета



    Dash


    Интеграция с Dash



    Debugger for Chrome


    Интеграция с отладчиком Google Chrome или другими отладчиками, поддерживающими его протокол.



    ECMAScript Quotes Transformer


    Преобразует кавычки в ES строковых литералах



    Editor Config for VSCode


    Поддержка формата .editorconfig

    ftp-sync


    Автоматически синхронизирует файлы по ftp протоколу



    Project Manager


    Менеджер проектов для VS Code



    Runner


    Позволяет запускать скрипты прямо из редактора



    Темы оформления


    К сожалению, VS Code пока что не поддерживает тем оформления интерфейса.

    Но есть много классных тем подсветки синтаксиса. Ниже некоторые из них.

    Base16 Ocean


    Base16 Ocean Kit

    Base16 Ocean Dark — конвертирована из Sublime Spacegray пакета (на скриншоте она)



    Material-theme


    Ссылка



    Seti


    Ссылка



    Бинды (сочетания клавиш)


    В VS Code сочетания клавиш достаточно легко меняются через меню Code > Preferences > Keyboard Shortcuts. Меня немного смущало то, что под Mac Tab/Shift+Tab не назначены, но меня рефлекторно тянет в файлах, отформатированных табами, под Маком, использовать именно эти бинды. Если вас тоже, то решается все парой строк в keybindings.json:

    [
    { "key": "tab",                 "command": "editor.action.indentLines",
                                    "when": "editorTextFocus" },
    { "key": "shift+tab",           "command": "editor.action.outdentLines",
                                    "when": "editorTextFocus" }
    ]

    Нет нужного расширения?


    Для VS Code есть официальная утилита Yo Code, которая позволяет сконвертировать множество расширений из TextMate и Sublime в формат Visual Studio Code.

    Заключение


    Надеюсь, что вы нашли здесь что-то полезное для себя. И, если вы еще только знакомитесь с VS Code, знакомство будет приятным. :)

    Мы создали список расширений и полезных ресурсов по VS Code на github, awesome-vscode. Если у вас есть, что добавить в него — открывайте Pull Request, или просто поддерживайте авторов "звездочками". К сожалению, по правилам awesome, попасть в список awesome-репозиториев мы сможем только через несколько недель, за это время мы надеемся собрать там все самые лучшие ресурсы для редактора!

    Only registered users can participate in poll. Log in, please.

    Используете ли вы VS Code?

    • 19.0%Да, только VS Code242
    • 32.4%Да, вместе с другими редакторами413
    • 34.3%Нет, но попробую437
    • 14.2%Нет, и не буду пробовать181

    Similar posts

    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 23

      +2
      Замечательный редактор, однако в нем бесят две особенности: отсутствие вкладок (working tree не считается) и корявая реализация vim-like плагина.
        –6
        Какой смысл заменять vim другим editor с vim плагином? Понимаю, когда уж хочется IDE использовать.
          0
          Вы вообще видели адекватные vim-плагины? Полноценный vim с .vimrc итд никто не хочет интегрировать :(
            +1
            В идее неплохой.
              0
              Таких не видел, но объективно самый лучший vim mode на данный момент пока что у Atom'а atom.io/packages/vim-mode-plus

              С апдейтами ядра VS Code появится возможность делать все более и более функциональные плагины, будем ждать :)
            +1
            Очень неплохой редактор. Особенно впечатляет скорость — по сравнению, например, с WebStorm. Однако WS и попродвинутей будет по части работы с JS, по крайней мере, пока.
              +3
              Особенно впечатляет скорость — по сравнению, например, с WebStorm.

              Всегда удивляло, как вообще люди могут сравнивать IDE и редактор.
                +2
                Если формально подходить, в VS Code есть дебаггер (точнее, есть API для интеграции сторонних отладчиков, и что-то уже встроено), то есть это все-таки интегрированная среда разработки.

                Люди бепрестанно сравнивают редакторы и IDE («как ты можешь работать в этом vim/emacs/%ide_name% вместо Ъ vim/emacs/%other_ide%»), и это нормально (я не говорю хорошо). Формально провести черту между тем и тем можно, но зафиксировать ее нельзя — никто не будет создавать стандарт и комитет по отделению редактора от IDE.
              +3
              Пока очень не хватает схлопывания блоков кода, но кажется обещали в скором времени выпустить. Плагинов пока тоже мало, но мне хватает.
              Как только так сразу соскочу с Sublime.
                +2
                Да, саблайм уже что-то почти год даже бетки третьей версии не выпускал. Ощущение, что заглохло развитие, хотя за счет кучи плагинов это не скоро ощутится.
                  0
                  У саблайма 3 только сегодня вышло обновление
                    0
                    О, тю, спасибо, вчера только смотрел.
                  +1
                  Схлопывание блоков кода появится в феврале, работа началась :) github.com/Microsoft/vscode/issues/2616
                  0
                  Работаю параллельно с vim, из всех плагинов прижился только editorconfig. Немного напрягало что нет фолдинга, но вот. Там и vim-like, и фолдинг, еще всяко.
                  Но пока что vim удобнее имхо
                    0
                    Есть плагин минимап? Что не смог найти. Спасибо.
                    +1
                    Вопрос «как его использовать» в статье очень хорошо описан.
                    Но остаётся вопрос «зачем его использовать». Или, перефразируя, «чем он лучше других вариантов». В частности, VS или продуктов JetBrains.

                    Мне кажется, что у редактора другое применение: открывать отдельные файлы или проекты на языках, на которых не разрабатываешь. Когда нужен не профессиональный набор разработки, а лишь что-то простое и лёгкое для того, чтобы посмотреть немного кода.
                    Потому что для профессиональной деятельности есть варианты лучше.
                      +1
                      Согласен. Хотелось бы заменить подустаревший Notepad++ на что-нибудь поновее…
                        0
                        Как раз в качестве быстрого редактора Notepad++ безальтернативен, ибо открывается в разы шустрее всех остальных.
                      +1
                      Он, также как и Atom, основывается на движке Chromium
                      Интересная фраза, в духе жёлтой прессы. Atom использует модульную архитектуру, одной из частей которых является Electron (aka Atom Shell), и VS Code использует Electron, читай «движок Atom». А то у Вас получилось, что MS вдруг решила другой редактор написать, когда на деле они свой «мод» сделали (да, немаленький «мод», но и не трогали они непосредственно Chromium).
                        0
                        Я заменю на Electron. Однако Electron редактором не является, это всего-лишь оболочка.

                        В продолжение темы Atom задумываются «перенять» некоторые трики по производительности у VS Code:
                        github.com/atom/atom/issues/10188
                          +1
                          Похоже, мы про одну и ту же вещь тут в комментариях написали, извиняюсь за первый абзац. :) В общем, заменил в статье. Я активно общаюсь с командой Atom сам и какой-то фикс зааплаил, никакого камня в их огород бросать или их подвиг принижать не хотел.
                          0
                          Мне больше понравился Brackets от Adobe, как-то он быстрее работает на мой взгляд

                          Only users with full accounts can post comments. Log in, please.