Рефакторинг в WebStorm

TL;DR #

Вся статья в одной картинке:

Далее следуют некоторые подробности.

Дано #

Есть модуль в ветке master, который нужно отрефакторить.

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

Задача #

Закончить рефакторинг, используя изменения из prev-attempt по-максимуму.

Решение #

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


Right click → Git → Compare with branch...

Хочется открыть файл из prev-attempt слева, такой же файл из master справа, наглядно видеть отличия и использовать все возможности IDE для рефакторинга прямо тут, в diff-окошке. Причём изменения хочется вносить в оба проекта, постепенно делая их одинаковыми, чтобы свести погрешности к минимуму. Разберёмся, как это сделать.

В WebStorm можно открыть несколько проектов в одном окне. Для этого нужно открыть один проект, потом попытаться открыть другой и выбрать Attach, когда IDE спросит, что с ним делать:

Мы можем считать состояние в master одним проектом, а состояние в prev-attempt — другим. Чтобы открыть их в IDE, создадим две папки: в одной будет master, в другой prev-attempt. Сделать это довольно просто, потому что любой гит-репозиторий (в том числе локальный), можно клонировать, выбрав только одну ветку:

> ls
my-project/

# Клонировать репу из папку `my-project` в папку `temp-project`,
# оставив только ветку `prev-attempt`
> git clone -b prev-attempt --single-branch ./my-project temp-project

Теперь у нас есть две папки: my-project/ в состоянии master и temp-project/ в состоянии prev-attempt.

Далее открываем оба проекта в одном окне и каждый настраиваем. В моём случае нужно указать путь к Elm-компилятору и автоформаттеру.

Предварительная подготовка завершена, можно рефакторить. Выбираем нужный файл в обоих проектах, нажимаем Cmd/Ctrl+D и внимательно сравниваем код, внося нужные изменения:


Картинка, как в начале.

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

Заключение #

Я давно сижу на IDE от JetBrains, сейчас использую WebStorm. Судя по код-ревью на работе и общению с коллегами, которые сидят на VSCode, Emacs пр., работается мне проще, приятнее и я допускаю меньше косяков.

Отдельно хочется отметить рефакторинг проектов на Elm. Это непередаваемое ощущение, когда ты перехерачиваешь кучу кода без запуска проекта и ничего не ломается. Статическая типизация, вывод типов, отсутствие сайд-эффектов, жёсткие ограничения в языке и дружелюбный компилятор — всё это круто работает для большой кодовой базы и распределённой команды. Для IDE от JetBrains есть крутейший плагин intellij-elm с которым WebStorm становится мега-удобным инструментом.

Elm + WebStorm + intellij-elm = самая безопасная и дружелюбная среда для промышленной разработки, которую я когда-либо встречал.