О том, как я перешел с PhpStorm на VS Code

13148
views

VS Code config

В этой статье я не собираюсь делать обзор между VS Code и каким-то редактором или IDE. Я хочу поделиться своим опытом перехода с PhpStorm на Visual Studio Code, работая с проектами, в которых используется typescript, js, node.js и php.

Предисловие

Мне приходится работать с множеством проектов, каждый из которых использует различные языки и технологии. В то же время мне бывает необходимо работать с серверной частью проектов, поэтому для меня редактор кода должен уметь отлично подсвечивать синтаксис, форматировать и рефакторить не только js, ts, scss, html, но и справляться с php. Шикарным плюсом будет поддержка .net.

Конечно есть еще целый список must have фич, без которых я бы не обошелся:

  • Работа с проектами
  • Поиск по файлам проекта
  • Подсветка изменений файла и DiffTool
  • Поддержка различных линтеров
  • Удобный дебагер
  • Поддержка Git
  • Автокомплит кода
  • Сниппеты
  • Приятный внешний вид
  • Поддержка плагинов

Есть еще множество мелочей, которые всем привычны и на них не стоит акцентировать внимание.

Все это прекрасно умеет делать PhpStorm, его индексация файлов позволяет IDE знать ваш же код лучше вас самих. Все прекрасно, кроме скорости. Именно поэтому меня тянуло постоянно попробовать что-то другое. И вот я познакомился с VS Code.

Первый запуск VS Code

Скачав и установив я был очень приятно удивлен скоростью запуска. Конечно не нативный Sublime, но все равно, запуск и открытие папки проекта можно назвать приятным! Без всяких индексаций или загрузки модулей.

При запуске изначально выводится сразу приветственное окно, его можно отключить галочкой в самом окне, либо в настройках:

"workbench.welcome.enabled": false

Кстати, в конце статьи я размещу свой полный конфиг.

Внешний вид

Итоговый внешний вид редактора с моим конфигом

Стандартная тема Dark+ меня полностью устраивает, только включил иконки Seti и убрал с левого бара кнопку плагинов.

Я уменьшил стандартный размер шрифтов до 13, а zoom level установил равным нулю.

Список лучших плагинов для VS Code

VS Code — это, в первую очередь редактор, но после установки необходимых плагинов для front-end разработки, его функционал приблизится к IDE. Бесплатной IDE!

Project Manager

Изначально редактор не поддерживает работу с проектами. В него можно просто скинуть папку и работать с ней. Повторно ее открыть можно из последних открытых файлов или заново перенести папку из finder.

Данный плагин полностью добавляет весь требуемый функционал:

project manager

Переключаться между проектами можно с помощью комбинации cmd+option+p.

Beautify

VS Code умеет форматировать html,js,css. Но лишь стандартными настройками и не понимает sass. Данный плагин позволяет настроить форматирование так, как удобно вам и вашей команде. Для себя я настроил так же, как и в PhpStorm для корректной работы с тиммейтами.

Конфиг будет прикреплен внизу статьи.

Форматирование php с помощью Php cs fixer

Пожалуй самая сложная часть с которой мне пришлось заморочиться — это довести до ума форматирование php файлов с html кодом. Перепробовав множество плагинов, даже попытавшись форматировать php с помощью Beautify, я пришел к выводу, что лучшим на данный момент решением будет форматировать с помощью Php cs fixer. Он использует стороннюю библиотеку, которую можно либо установить менеджером пакетов в систему, либо, скачав нужный файлик (php-cs-fixer.phar), указать к нему путь в настройках.

Я предпочел скачать файлик, не устанавливая чего-то лишнего. Загрузить его можно с GitHub.

Установив плагин и указав в настройках путь к файлу, php файлы можно будет форматировать стандартной комбинацией клавиш форматирования.

Скажу честно, добиться такого же результата, как в PhpStrom у меня так и не удалось. Основная проблема осталась с форматированием текстовых тегов (a, span, strong и т.д.), видимо по умолчанию в конфиге  php-cs-fixer.phar стоит игнорировать эти теги, как и в Beautify. Если вы работаете с php и знаете лучше способ форматирования кода — милости прошу в комментарии.

Better Merge

В VS Code очень неплохо реализована работа с гитом. По большей части работа сводится к написанию текста коммита и нажатию одной единственной кнопки синхронизации.

Но для облегчения мерджа при конфликтах я использую better merge. В большинстве ситуаций с ним не придется использовать сторонние утилиты.

VS code better merge

highlight-matching-tag

Этот небольшой плагин, корректно и симпатично подсвечивает закрывающие html теги даже в php файлах. Стилизацию выделения можно настроить, если стандартная стилизация не понравится.

Auto Rename Tag

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

vscode-auto-rename-tag

VS Code обладает неплохим рефакторингом, по крайней мере в TypeScript при переименовании класса или метода, имена переменных обновятся во всех файлах, где импортируется изменяемый класс.

Кстати о импорте: пути к файлам из коробки нужно писать руками. Улучшить ситуацию можно с помощью плагина Path Intellisense.

Path Intellisense

Маленький плагин, который отслеживает ввод «/» и предлагает навигацию по папкам и файлам относительно открытого файла. После указания корректного пути к импортируемому компоненту, VS Code предлагает выбрать классы, которые можно импортировать по введенному пути.

Линтеры

В маркете плагинов для VS Code есть множество линтеров на любой вкус и цвет. Я себе поставил два: ESLint и TSLint. Для работы ESLint необходимо дополнительно установить глобально npm пакет:

npm install -g eslint

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

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

Сниппеты и улучшения для IntelliSense

Продукты для разработки ПО от Microsoft обладают фирменным инструментом автозавершения кода — IntelliSense, который по какой-то причине из коробки совершенно не поддерживает sass. Поэтому в первую очередь я поставил SCSS IntelliSense.

SCSS IntelliSense

Установив его, редактор прекрасно будет предлагать дописать название стиля или параметра по первым буквам. Но как по мне, такой функционал должен быть из коробки.

Angular v4 TypeScript Snippets

Большой набор сниппетов Angular 4. Введя «a-» + первые буквы желаемого сниппета, IntelliSense предложит вставить готовый кусок кода. Плагин содержит сниппеты как для html шаблонов, так и шаблоны компонентов, директив, модулей и т.д.

HTML CSS Support

Плагин, который добавит подсказки при написании css свойств в html документе.

Проблемные, но уже набравшие популярность плагины

В топе плагинов висит HTML Snippets с 700к+ установками. Но редактор давно поддерживает zen codding, который полностью выполняет суть плагина.

Такая же история с плагином Auto Close Tag, у которого уже почти 300к установок. Но с установленным данным плагином у меня временами зависает UI при работе с Angular 4 проектами. К тому же VS Code из коробки имеет zen codding и может закрывать тег при вводе «</».

Я бы не рекомендовал к установке данные плагины. Если не согласны, или согласны — оставляйте комментарий с мыслями по этому поводу.

Заключение

Установив все данные плагины и настроив под себя, лично у меня абсолютно пропала необходимость запускать PhpStorm. При этом скорость работы значительно увеличилась.

А вот и обещанный конфиг:

{
  "editor.fontSize": 13,
  "editor.wordWrap": "on",
  "editor.wordWrapColumn": 130,
  "typescript.check.tscVersion": false,
  "workbench.welcome.enabled": false,
  "files.autoSave": "off",
  "auto-rename-tag.activationOnLanguage": [
    "html",
    "xml",
    "php",
    "javascript"
  ],
  "projectManager.openInNewWindow": false,
  "git.confirmSync": false,
  "workbench.iconTheme": "vs-seti",
  "window.zoomLevel": 0,
  "beautify.config": {
    "html": {
      "allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg"],
      "brace_style": "collapse", // [collapse|expand|end-expand|none] Put braces on the same line as control statements (default), or put braces on own line (Allman / ANSI style), or just put end braces on own line, or attempt to keep them where they are
      "indent_char": " ", // Indentation character
      "indent_handlebars": true, // e.g. {{#foo}}, {{/foo}}
      "indent_scripts": "keep", // [keep|separate|normal]
      "indent_size": 4, // Indentation size
      "unformatted": ["img", "code", "pre", "sub", "sup", "em", "strong", "b", "i", "u", "strike", "big", "small", "pre"], // List of tags that should not be reformatted
      "wrap_attributes": "auto"
    },
    "css": {
      "allowed_file_extensions": ["css", "scss", "sass", "less"],
      "end_with_newline": false, // End output with newline
      "indent_char": " ", // Indentation character
      "indent_size": 2, // Indentation size
      "newline_between_rules": true, // Add a new line after every css rule
      "selector_separator": " ",
      "selector_separator_newline": false // Separate selectors with newline or not (e.g. "a,\nbr" or "a, br")
    },
    "js": {
      "allowed_file_extensions": ["js", "json", "jshintrc", "jsbeautifyrc"],
      "indent_char": " ", // Indentation character
      "indent_level": 0, // Initial indentation level
      "indent_size": 2, // Indentation size
      "indent_with_tabs": false, // Indent with tabs, overrides `indent_size` and `indent_char`
      "jslint_happy": false, // If true, then jslint-stricter mode is enforced
      "keep_array_indentation": false, // Preserve array indentation
      "keep_function_indentation": false, // Preserve function indentation
      "max_preserve_newlines": 0, // Maximum number of line breaks to be preserved in one chunk (0 disables)
      "preserve_newlines": true, // Whether existing line breaks should be preserved
      "space_after_anon_function": false, // Should the space before an anonymous function's parens be added, "function()" vs "function ()"
      "space_before_conditional": true, // Should the space before conditional statement be added, "if(true)" vs "if (true)"
      "space_in_empty_paren": false, // Add padding spaces within empty paren, "f()" vs "f( )"
      "space_in_paren": false, // Add padding spaces within paren, ie. f( a, b )
      "unescape_strings": false, // Should printable characters in strings encoded in \xNN notation be unescaped, "example" vs "\x65\x78\x61\x6d\x70\x6c\x65"
      "wrap_line_length": 0 // Lines should wrap at next opportunity after this number of characters (0 disables)
    }
  },
  "php-cs-fixer.executablePath": "/Users/vladimir/Documents/php-cs-fixer-v2.phar",
  "php-cs-fixer.formatHtml": true
}

Если вы все же захотите использовать Auto Close Tag, то я бы посоветовал бы прописать в конфиге игнорируемых тегов any и Array, для избежания лишних движений при написании интерфейсов в typescript.

"auto-close-tag.excludedTags": [
    "area",
    "base",
    "br",
    "col",
    "command",
    "embed",
    "hr",
    "img",
    "input",
    "keygen",
    "link",
    "meta",
    "param",
    "source",
    "track",
    "wbr",
    "any",
    "Array"
  ]

Подписывайтесь

Для получения уведомлений о новых публикациях — подписывайтесь на мой блог или страницы в соц. сетях: Twitter, Facebook.

Подписаться на блог по эл. почте