Не последнюю роль в продуктивности разработчика играет редактор кода, который он использует. Я Full Stack JavaScript разработчик (и Frontend и Backend на NodeJS) и за свою карьеру я перепробовал много разных редакторов: Atom, Sublime Text, Vim, Emacs, Eclipse, WebStorm. И в конце концов я остановился на WebStorm и не думаю, что когда-нибудь променяю его на какой-либо другой редактор. В этой статье я перечислю функционал, который есть в WebStorm, для того, что бы вы сами могли увидеть насколько это мощный инструмент и сравнить его с тем редактором, которым вы сейчас пользуетесь. Хороший выбор можно сделать только когда есть альтернативы.

---

Продуманная поддержка VCS (Git, Mercurial, SVN, ...)

В основном в работе я использую Git. Я могу спокойно использовать Git из командной строки, но Git — это такой инструмент, который нужно использовать через GUI, так получается значительно продуктивнее и удобнее (тут я говорю об относительно маленьких проектах, а не таких как Chromium / Linux). В качестве GUI для Git я пробовал ungit, smartgit, tortoise, но ни один из этих инструментов не обладает тем удобством, которое предоставляет реализация GUI от WebStorm. К сожалению, не весь функционал из мира Git интегрирован в WebStorm и иногда все же необходимо использовать консоль, но интегрированный функционал покрывает 95% самых частых действий.

Scopes

Скопы позволяют объединить определенные наборы файлов для выполнения над ними каких-либо действий (поиск использований, инспекции и т.д.). Типичный use case, который я использую практически в каждом проекте — создаю два скопа для frontend и для backend. И соответственно весь функционал IDE могу запускать для каждого из этих скопов по отдельности. Так же скопам можно назначать цвета, у меня backend синий, frontend зеленый. Цвета у файлов отображаются во всех диалогах, где присутствует имя файла (табы, открытие файла, дерево проекта, и т.д.). Это позволяет быстро сориентироваться что это за файл, не читая его название.

Find / replace по файлу

Этот функционал представлен в любом из существующих редакторов (да что уж там, он даже есть в Notepad), но реализация WebStorm отличается от типичной реализации этого функционала. Основные фишки:

• Поиск по контексту (только в строках, только в комментах, везде кроме строк и комментов);
• Автокомплит в поисковом инпуте (в индекс добавляются все слова из файла и можно не писать слово целиком);
• Многострочный поиск;
• Историей предыдущих поисков;

Find / replace по директории

Тут реализовано все тоже самое что и в Find / Replace по файлу, но так же еще можно указать скоп поиска и результаты поиска показываются не в редакторе, а в отдельной вкладке на Find Tool Window. И этот Find Tool Window реализован крайне удобно:

• Есть область предпросмотра;
• Можно открыть несколько вкладок;
• Группировка результатов поиска по скопу / директории / файлу;

Автодополнение

Автокомплит работает во всех типах файлов: CSS, JavaScript, HTML. Это одна из самых основных фич, и ей уделяется огромное внимание. И не смотря на то, что реализовать для JavaScript полноценный автокомплит невозможно, в WebStorm этот функционал работает правильно в 90% случаев. Так же очень полезным является автодополнение пути до файлов (не нужно полностью писать путь до файла, вы пишите название файла а WebStorm автоматически подставляет путь). Если вы заморочитесь и разберетесь с интеграцией со SpyJS, то автокомплит будет значительно точнее. Это происходит за счет того, что все вызовы функций оборачиваются особым JavaScript кодом, который считывает информацию о каждом переданном параметре и передает эту информацию в IDE. То есть у вас будет такой же автокомплит как и в консоли Chrome, как будто вы остановились дебаггером внутри метода.

Поиск деклараций и использований

Реализованы следующие навигации:

• Переход к объявлению CSS-класса / поиск использований CSS-класса;
• Переход к объявлению JavaScript-переменной / поиск использований JavaScript-переменной ;
• Переход к файлу по пути / поиск использований файла по проекту;
• Подсветка использований переменной в текущем в файле;

External Tools

В процессе разработки я использую огромное количество разных npm-модулей (jsx, sass, browser-sync, browserify, и т.д.). По-хорошему все они должны быть сконфигурированы в gulp / grunt, но иногда возникает необходимость запустить их по отдельности. И тут на помощь приходит функционал External Tools. Он позволяет запускать внешние тулзы и подставлять в параметры вызова определенные переменные IDE (например, путь до выделенного файла или выделенный текст). Это удобно потому что запомнить параметры для каждой тулзы невозможно (у меня сконфигурировано около 20 разных тулзов), а так можно единожды сконфигурировать вызов тулзы и потом ее использовать.

Local History

Этот функционал не раз меня выручал, и я пользуюсь им постоянно. WebStorm коммитит все изменения проекта в свой внутренний (как часто коммитит зависит от того насколько вы активно работает над файлом, если вы активно редактируете файл, то коммиты идут примерно раз в минуту). И вы можете просмотреть все изменения и вернуть какой-либо кусок кода, который вы написали 30 минут назад, но по какой-то причине стерли. Вы можете просматривать как локальную историю отдельного файла, так и локальную историю целой директории.

File structure

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

Диалоги для открытия файлов

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

Диалоги последних открытых файлов

Тут есть 2 диалога:

• Recent Files;
• Recent Changed Files;

С помощью этих диалогов значительно удобнее переходить к файлу, который был недавно открыт, чем искать этот файл среди всех файлов проекта.

Bookmarks

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

• Предпросмотр кода где поставлена заметка;
• Возможность оставить комментарий;
• Фильтрация заметок;
• Мнемонические букмарки (примерно, как в starcraft: сначала биндите какой-либо отряд, а потом по нажатию горячей клавиши быстро его выделяете, только тут вместо отрядов букмарки);

Инспекции

В WebStorm интегрировано огромное количество разных инспекций с гибкой настройкой (для всех типов файлов CSS, HTML, JavaScript, JSON, SCSS и т.д.). Так же WebStrom интегрирован со многими популярными линтерами (jscs, jshint, jslint). Так же среди инспекций есть инспекция для проверки правописания, что достаточно полезно, потому что в английском языке вообще хрен пойми, как пишутся слова.

Интеграции

Интеграция с огромным количеством инструментов, в числе которых:

• Karma;
• NodeJS;
• Jasmine;
• Gulp;
• Grunt;
• SpyJS;
• React;
• TypeScript
• И много других...

Сравнения

В WebStorm встроена своя Diff тулза, она используется для показа Diff при работе с VCS и так же ее можно использовать для:

• Сравнения выделенной области с Clipboard;
• Сравнения двух файлов;
• Сравнения двух директорий;

Остальное

• Наличие фильтрации во всех панелях (когда панель активна, просто начинаете вводить что-либо и файлы в ней фильтруются);
• Во всех диалогах где нужно что-то вводить есть история вводимых команд;
• Интеграция с Emmet;
• Отображение документации для CSS свойств прямо в IDE;
• Клипборд с историей;
• Встроенный дебаггер для JavaScript;
• Гибкая настройка Code Style для всех типов файлов;
• Подробная документация на весь функционал (в любом диалоге вы можете нажать F1 и откроется страница с документацией именно по этому функционалу);
• Статистика использования;
• И много других моментов...

Внимание к деталям

Это проходит красной нитью через всю IDE и создает действительно очень хорошее впечатление от использования этого инструмента и делает любой реализованный функционал более полным и законченным.

Платность

Не для всех это является плюсом, но я почти всегда предпочитаю платный софт бесплатному (если такой выбор есть). Как правило если кто-то получает деньги за разработку софта, то такой софт делается качественнее, чем если он делается просто силами волонтеров (но это не всегда так).

---

Хочу поблагодарить разработчиков этой прекрасной IDE, вы действительно делаете очень хороший и качественный софт, продолжайте в том же духе :)

P.S. Никакого отношения к JetBrains я не имею, я просто довольный клиент.