- PVSM.RU - https://www.pvsm.ru -

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

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

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

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

Stable vs Insiders

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

React и JSX

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

JS is JSX overwrite [2]
ESLint [3]

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

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

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

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

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

CSS, LESS, SCSS и Stylus

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

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

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

{
  "stylelint.enable": true
}

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

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

Сниппеты

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

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

Align [21]

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

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

Beautify [22]

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

Bookmarks [24]

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

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

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

Color Highlighter [25]

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

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

Dash [26]

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

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

Debugger for Chrome [27]

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

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

ECMAScript Quotes Transformer [28]

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

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

Editor Config for VSCode [29]

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

ftp-sync [30]

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

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

Project Manager [31]

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

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

Runner [32]

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

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

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

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

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

Base16 Ocean

Base16 Ocean Kit [33]

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

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

Material-theme

Ссылка [35]

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

Seti

Ссылка [36]

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

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

В 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 [37], которая позволяет сконвертировать множество расширений из TextMate и Sublime в формат Visual Studio Code.

Заключение

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

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

Автор: darkwire

Источник [39]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/111684

Ссылки в тексте:

[1] ссылке: https://code.visualstudio.com/insiders

[2] JS is JSX overwrite: https://marketplace.visualstudio.com/items?itemName=eg2.js-is-jsx

[3] ESLint: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

[4] XO: https://marketplace.visualstudio.com/items?itemName=samverschueren.linter-xo

[5] stylelint: https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint

[6] PostCSS: https://github.com/postcss/postcss

[7] Dart: https://marketplace.visualstudio.com/items?itemName=kevinplatel.dart

[8] Flow: https://marketplace.visualstudio.com/items?itemName=flowtype.flow-for-vscode

[9] flowtype: http://flowtype.org/

[10] Handlebars: https://marketplace.visualstudio.com/items?itemName=andrejunges.Handlebars

[11] HTMLLint: https://marketplace.visualstudio.com/items?itemName=mkaufman.HTMLHint

[12] htmlhint.com: http://htmlhint.com/

[13] Smarty: https://marketplace.visualstudio.com/items?itemName=imperez.smarty

[14] Stylus: https://marketplace.visualstudio.com/items?itemName=buzinas.stylus

[15] Swig: https://marketplace.visualstudio.com/items?itemName=zhutian.swig

[16] Mean.JS: https://meanjs.org/

[17] Twig: https://marketplace.visualstudio.com/items?itemName=whatwedo.twig

[18] XML Tools: https://marketplace.visualstudio.com/items?itemName=DotJoshJohnson.xml

[19] Visual Studio Marketplace: https://marketplace.visualstudio.com/vscode/

[20] огромный раздел с ними: https://marketplace.visualstudio.com/vscode/Snippets?sortBy=Downloads

[21] Align: https://marketplace.visualstudio.com/items?itemName=steve8708.Align

[22] Beautify: https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify

[23] jsbeautifier.org: http://jsbeautifier.org/

[24] Bookmarks: https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks

[25] Color Highlighter: https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

[26] Dash: https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-dash

[27] Debugger for Chrome: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

[28] ECMAScript Quotes Transformer: https://marketplace.visualstudio.com/items?itemName=vilicvane.es-quotes

[29] Editor Config for VSCode: https://marketplace.visualstudio.com/items?itemName=chrisdias.vscodeEditorConfig

[30] ftp-sync: https://marketplace.visualstudio.com/items?itemName=lukasz-wronski.ftp-sync

[31] Project Manager: https://marketplace.visualstudio.com/items?itemName=Shan.project-manager

[32] Runner: https://marketplace.visualstudio.com/items?itemName=mattn.Runner

[33] Base16 Ocean Kit: https://marketplace.visualstudio.com/items?itemName=chipcollier.Theme-OceanKit

[34] Base16 Ocean Dark: https://marketplace.visualstudio.com/items?itemName=viatsko.theme-base16-ocean-dark

[35] Ссылка: https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme

[36] Ссылка: https://marketplace.visualstudio.com/items?itemName=bialikover.theme-seti

[37] Yo Code: https://code.visualstudio.com/docs/tools/yocode

[38] awesome-vscode: https://github.com/viatsko/awesome-vscode

[39] Источник: https://habrahabr.ru/post/276825/