- PVSM.RU - https://www.pvsm.ru -
VS Code (Visual Studio Code) — относительно новый текстовый редактор, выпущенный Microsoft. Он, также как и Atom, основывается на движке Chromium, но обладает своими уникальными фичами, такими, как, например, IntelliSense "из-коробки".
В этой статье я бы хотел поделиться тем, что нашел для себя полезным в VS Code для веб-разработки.
Осторожно! Под катом много картинок и гифок.
У Visual Studio есть два канала обновлений — stable и insiders. Первый — стабильные версии, второй же обновляется каждую неделю и в обмен на возможно большее количество багов включает самые современные фичи. Скачать последнюю версию можно либо по ссылке [1], либо указав update.channel как "insiders" в настройках VS Code.
В настоящий момент, чтобы получить достойную поддержку JSX в VS Code, прийдется немного потпомучаться и установить два расширения:
JS is JSX overwrite [2]
ESLint [3]
Последний, впрочем, может быть заменен на XO [4].
Если вы выбрали ESLint, то в проекте должен быть .eslintrc следующего содержания:
{
"ecmaFeatures": {
"jsx": true
}
}
Если вы все сделали правильно, то теперь JSX будет подсвечиваться без ошибок:
В качестве линтера файлов стилей я рекомендую расширение stylelint [5]. В качестве "бекенда" он использует PostCSS [6], что означает, что поддерживаются любые файлы стилей, поддерживаемые последним.
Чтобы включить stylelint в VS Code, понадобится снова пойти в настройки и добавить:
{
"stylelint.enable": true
}
Я не фанат сниппет-плагинов. Но если вы, напротив, являетесь таковым, то на Visual Studio Marketplace [19] вас ждет огромный раздел с ними [20]
Форматирует выделение
Интерфейс к jsbeautifier.org [23]. Крайне полезен если приходится часто приводить в порядок совсем некудышный JS-код.
Позволяет запоминать строки и быстро переходить к ним
Подсвечивает HTML-цвета
Интеграция с Dash
Интеграция с отладчиком Google Chrome или другими отладчиками, поддерживающими его протокол.
Преобразует кавычки в ES строковых литералах
Поддержка формата .editorconfig
Автоматически синхронизирует файлы по ftp протоколу
Менеджер проектов для VS Code
Позволяет запускать скрипты прямо из редактора
К сожалению, VS Code пока что не поддерживает тем оформления интерфейса.
Но есть много классных тем подсветки синтаксиса. Ниже некоторые из них.
Base16 Ocean Kit [33]
Base16 Ocean Dark [34] — конвертирована из Sublime Spacegray пакета (на скриншоте она)
Ссылка [35]
Ссылка [36]
В 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/
Нажмите здесь для печати.