Используем 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, прийдется немного пот помучаться и установить два расширения:
Последний, впрочем, может быть заменен на XO.
Если вы выбрали ESLint, то в проекте должен быть .eslintrc следующего содержания:
Если вы все сделали правильно, то теперь JSX будет подсвечиваться без ошибок:
CSS, LESS, SCSS и Stylus
В качестве линтера файлов стилей я рекомендую расширение stylelint. В качестве «бекенда» он использует PostCSS, что означает, что поддерживаются любые файлы стилей, поддерживаемые последним.
Чтобы включить stylelint в VS Code, понадобится снова пойти в настройки и добавить:
Другие полезные плагины в зависимости от языков, с которыми вы работаете
- Dart — популярный в среде AngularJS язык программирования
- Flow — плагин для flowtype, статического тайп-чекера от facebook для JavaScript’а. Полезен, если хочется добавить в проект типизацию, но не хочется по каким-либо причинам использовать TypeScript.
- Handlebars — поддержка шаблонов handlebars
- HTMLLint — будет полезен опять же для AngularJS разработчиков и верстальщиков (по понятным причинам бесполезен при работе с JSX), демо можно посмотреть здесь http://htmlhint.com/
- Smarty — старый добрый шаблонизатор для PHP
- Stylus —еще один плагин для Stylus, если по какой-то причине не понравился stylelint
- Swig —шаблонизатор для javascript, используется, например, в проекте Mean.JS
- Twig — поддержка одного из самых популярных шаблонизаторов PHP. Часто используется в Symfony проектах.
- XML Tools —полезный для XML/XSLT разработчиков набор плагинов
Сниппеты
Я не фанат сниппет-плагинов. Но если вы, напротив, являетесь таковым, то на Visual Studio Marketplace вас ждет огромный раздел с ними
Полезные расширения
Align
Beautify
Интерфейс к http://jsbeautifier.org/. Крайне полезен если приходится часто приводить в порядок совсем некудышный JS-код.
Bookmarks
Позволяет запоминать строки и быстро переходить к ним
Color Highlighter
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 Dark — конвертирована из Sublime Spacegray пакета (на скриншоте она)
Material-theme
Seti
Бинды (сочетания клавиш)
В VS Code сочетания клавиш достаточно легко меняются через меню Code > Preferences > Keyboard Shortcuts. Меня немного смущало то, что под Mac Tab/Shift+Tab не назначены, но меня рефлекторно тянет в файлах, отформатированных табами, под Маком, использовать именно эти бинды. Если вас тоже, то решается все парой строк в keybindings.json:
Нет нужного расширения?
Для VS Code есть официальная утилита Yo Code, которая позволяет сконвертировать множество расширений из TextMate и Sublime в формат Visual Studio Code.
Заключение
Надеюсь, что вы нашли здесь что-то полезное для себя. И, если вы еще только знакомитесь с VS Code, знакомство будет приятным. 🙂
Мы создали список расширений и полезных ресурсов по VS Code на github, awesome-vscode. Если у вас есть, что добавить в него — открывайте Pull Request, или просто поддерживайте авторов «звездочками». К сожалению, по правилам awesome, попасть в список awesome-репозиториев мы сможем только через несколько недель, за это время мы надеемся собрать там все самые лучшие ресурсы для редактора!
Code editing. Redefined.
By using VS Code, you agree to its license and privacy statement.
VS @code does so many things right. I’m constantly impressed by the UX, and customizing workspace / user preferences is no exception. ������ It just keeps getting better ❤️
VS Code will have deep remote development. You can connect to a container running a different OS and use any VS Code plugins, linting, debugging for that environment. ������
VS Code is my most used and favorite editor. I love being able to customize the editor — changing the layout, the icons, fonts and color scheme is so easy!
Just as I thought @code couldn’t get better, out comes its Remote Development plugins that let you remote into containers as a dev environment! ��
I was a vim fan, but then discovered VS Code’s Vim plugin, which lets me add in my vim keybindings. I can maintain my coding style without having to compromise on speed.
I love @code The built-in markdown previewer is awesome and the plugin system allows me to use GitLens, which makes my workflow so much easier.
13 расширений VSCode, которые пригодятся любому веб-разработчику
Подготовили адаптированный перевод материала JavaScript (Medium) о полезных расширениях VSCode.
Рассмотрим 13 расширений Visual Studio Code (VSCode) ― кроссплатформенного редактора скриптов от Microsoft, ― которые помогают отлаживать код, делать его более читабельным и красивым, а также добавляют полезные функции в рабочее пространство разработчика.
редакция нетологии
Auto Close Tag
Одно из самых важных расширений, которое автоматически добавляет закрывающий тег. Не требует никаких команд для активации. По умолчанию Auto Close Tag доступно в VSCode.
Auto Rename tag
Beautify
Функция расширения — превратить некрасивый файл без пробелов и символов табуляции, где каждый тег идёт сразу после предыдущего, в более читабельный и красивый.
Чтобы использовать это расширение, сначала нужно нажать F1. Затем в строке написать «Beautify» и выбрать его из списка — код автоматически исправится.
Bracket pair colorizer
Это расширение придаёт каждой паре групп свой цвет — можно быстро и легко найти нужную пару.
ESLint
ESLint статически анализирует код для быстрого поиска проблем, которые может автоматически скорректировать.
Когда расширение определяет проблему, она отмечается красным подчёркиванием. И проблему можно легко исправить самостоятельно.
JavaScript (ES6) code snippets
Одно из классных расширений для JavaScript. Когда пишете что-то в своём коде и забываете, как вызывается функция, расширение автоматически предложит её записать — нужно будет просто нажать Enter.
Профессия
Веб-разработчик
с нуля
Узнать больше
- Научим программировать на JavaScript и PHP — сможете создавать сайты и веб-приложения
- Масштабная программа и много практики — выполните
9 проектов для портфолио - Лучших выпускников ждёт стажировка или трудоустройство в Affinage
Kite
Kite делает почти то же самое, что и предыдущее расширение JavaScript (ES6) code snippets. Нейронные сети, которые используются в этом расширении, помогают быстрее писать код.
One dark pro
Ещё одно расширение, которое сделает рабочее пространство VSCode более удобным и красивым. Оно меняет стандартную тему на новую красивую.
Open In Browser
Это простое расширение, которое позволяет открывать файлы прямо в браузере.
Читать также
Как выбрать исполнителя для разработки сайта
Почему Java-разработчик — одна из лучших профессий в программировании для новичка
Как найти работу за рубежом и организовать там свою жизнь
Знакомство с Visual Studio Code
Visual Studio Code или коротко VS Code это очень хороший и популярный редактор кода от компании Microsoft, который можно скачать с официального сайта. Он доступен для Windows, macOS и Linux и является бесплатным с открытым исходным кодом, любой разработчик, имеющий аккаунта на GitHub может внести свой вклад в развитие данного приложения.
Я уже достаточно давно использую VS Code для создания веб сайтов. Мне нравится, что это очень легкий, но в то же время, очень мощный редактор с огромным количеством расширений. Благодаря огромному количеству настроек, его можно легко настроить «под себя». Я использую этот редактор для верстки веб страниц (HTML / CSS / SCSS) и программирования на JavaScript. Что не маловажно, у него встроенная поддержка JavaScript и Node.js.
В этой статье я бы хотел познакомить вас с Visual Studio Code и возможно убедить начать его использовать в своей работе. Как я уже упоминал ранее его можно совершенно бесплатно скачать с официального сайта установить и начать работу. Думаю, не стоит описывать процесс установки, предполагаю, что вы это прекрасно знаете.
Итак, вы скачали и установили. Познакомимся с интерфейсом.
Страница приветствия
После запуска VS Code мы видим окно приветствия. Оно содержит быстрый доступ к некоторым функциям и очень полезные ссылки.
В секции Start вы можете создать новый файл, открыть папку или создать рабочую папку.
Секция Recent содержит быстрые ссылки на файлы и папки, с которыми вы работали ранее.
В Help вы найдете полезные ссылки на справочную и обучающую информацию. Например, тут вы можете найти горячие клавиши VS Code, или полезные советы по ускорению работы.
Если вы до этого работали в другом редакторе и привыкли к нему, то в секции Customize, вы сможете настроить цветовую схему и комбинации клавиш, от вашего старого редактора, чтобы переход к VS Code был максимально простым и комфортным. В этой же секции, вы сможете добавить поддержку вашего языка программирования и установить необходимые для работы инструменты.
Последняя секция на странице приветствия, это Learn. Тут вы имеете быстрый доступ к командам, справку по главным элементам интерфейса, а также, на мой взгляд самое интересное, это песочницу, где вы можете попробовать в действие главные возможности редактора.
Элементы интерфейса
Как и у большинства программ вверху Visual Studio Code располагается главное меню, содержащее основные функции и команды программы.
Слева вертикально расположились:
- Эксплорер, который содержит файлы и папки вашего проекта;
- Панель поиска, где вы можете вести поиск по вашим файлам;
- Встроенная система контроля версий, которая поможет мониторить изменения;
- Панель отладки, где вы можете запускать скрипты и отлавливать баги;
- Панель с расширениями, которая поможет найти и быстро установить недостающий функционал.
Вверху, выпадающий список с полем поиска – это панель команд, которая содержит все возможные команды для выполнения в редакторе. По умолчанию она закрыта и открывается с помощью комбинации клавиш Ctrl+Shift+P (для Windows).
Под палитрой команд находится основное поле для редактирования, где и происходит вся магия.
Чуть ниже расположились встроенный терминал, вместе с консолями отладки, вывода и проблем. По умолчанию они закрыты. Быстро закрыть/открыть их можно с помощью комбинации клавиш Ctrl+`.
В самом низу расположился Статус бар. Слева он показывает количество ошибок и предупреждений, справа – некоторую информацию о текущем документе.
Это были главные элементы интерфейса VS Code. Конечно, я их описал весьма поверхностно, но, пожалуй, если детально все описать, то выйдет целая книга. Надеюсь, я хотя бы слегка вас заинтересовал и подтолкнул попробовать его в действии.