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

---

Киллер-фичи

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

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

Это далеко не вся интеграция с Git, а только самая основная.

Find / replace

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

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

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

Навигации по коду и поиск использований

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

• Навигации к объявлению CSS-класса из HTML;
• Навигация к объявлению метода, переменной в Javascript/;
• Поиск использований CSS класса по проекту / открытому файлу / скопу;
• Поиск использований JavaScript переменной по проекту / открытому файлу / скопу;
• Поиск использований картинки по проекту / скопу;
• Поиск использований файла по проекту / скопу;
• Навигация к файлу по пути;

External Tools

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

Local History

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

File structure

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

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

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

История открываемых файлов

Есть 2 диалога такого типа: последние открываемые файлы и последние модифицируемые файлы. Эти два диалога выглядят одинаково, единственная разница в том, какие файлы показываются в списке.

Bookmarks

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

Инкрементальное выделение

Чудовищно удобный функционал для выделения блоков кода. В общем тут лучше показывать, чем рассказывать:

Инспекции

В WebStorm интегрировано огромное количество разных инспекций с гибкой настройкой (для всех типов файлов CSS, HTML, JavaScript).

Сравнения

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

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

Скопы

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

Клипборд с историей

Крайне полезный функционал. Вот как это выглядит:

Дерево проекта

Удобное и информативное отображение директории c проектом:

---

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

Это проходит красной нитью через всю IDE и это нельзя описать полностью, вот несколько примеров:

• Практически во всех диалогах где нужно что-то вводить есть история вводимых команд.
• Настройка всего и вся в code style для всех возможных типов файлов.
• Возможность открыть поисковый диалог в любом эдиторе (предпросмотр кода, diff диалог, быстрый предпросмостр реализации).
• Вызов документации для CSS-свойств прямо в IDE.
• Подробная документация на весь функционал.
• Можно просмотреть свою статистику использования.
• Если путь не вмещается в какую-либо панель, то он показывается дальше поверх других панелей при наведении на него мышкой.
• Наличие фильтрации во всех панелях (когда панель активна, просто начинаете вводить что-либо и файлы в ней фильтруются).
• И много других моментов. Все не перечислить.

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

---

Конкуренты

Заранее прошу прощения за столь категоричные высказывания по поводу остальных редакторов, но это всего лишь мое мнение.

Emacs. Интересно сколько месяцев (лет?) уйдет для того, что бы сконфигурировать «самый расширяемый редактор на планете», что бы он включал весь перечисленный выше функционал, да еще и работал без очевидных багов? Давайте будем объективны, Emacs уже устарел, он был изобретен 30 лет назад. Что является практически вечностью учитывая как быстро развивается IT.

Vim. Устаревший и не продуманный. В нем существует около 15 (!) разных действий для перехода из command mode в insert mode (авторы вообще знали про DRY, один из самых главных принципов в программировании?). Огромное количество дублирующегося функционала, за счет чего продуктивность он вообще не увеличивает, а наоборот уменьшает.

Sublime text. слишком деревянный. Красивый, но деревянный. Я бы его посоветовал использовать новичкам, которые только начинают свой путь в программировании, потому что на первых парах весь функционал, который я перечислил выше будет только мешать.

Atom. Тот же самый Sublime Text, только написанный на HTML/CSS/JavaScript и соответственно плюс к деревянности он еще и медленный.

Eclipse. Далеко не настолько продуманный как продукты от Jetbrains. А детали — это важно.

---

P.S. Подписываемся на меня в твиттере @egorkoshelko :)