August 31, 2021

Мой опыт перехода с VSCode на WebStorm

За свои 3 года в веб-разработке я перепробовал разные программы для написания кода. Начинал в NotePad++, потом долго писал код в Sublime Text и уже в начале 2019 года перешёл на VS Code.

Текущий сетап моего VSCode. 34 плагина за 3 года - вроде не так много :)

Но со временем требуемый функционал изменяется. Если раньше мне было достаточно Emmet (встроен в редактор) и CSS IntelliSense, то сейчас в задачах основная работа происходит с .js (.ts) и .vue файлами, в которых нужны функционалы авто-импортов, умных автокомплитов с аннотациями типов и возможностями рефакторинга кода. И тут я задумался о смене рабочего инструмента 👀

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

Простой пример: если вы всегда пользуетесь тёмной темой на телефоне, компьютере, IDE – то попробуйте на несколько дней переключиться на светлую тему. Когда я проделывал такой эксперимент с телефоном – было ощущение, что купил новый телефон

Процесс перехода

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

Раздел настроек, в котором можно указать Keymap в WebStorm

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

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

Рабочая область выглядит вот так

В принципе, часа на настройку мне хватило чтобы комфортно приступить к работе и 14 дней я вообще не открывал VSCode (ну почти) и выполнял все задачи в WebStorm.

Преимущества WebStorm

1. Автодополнение в процессе набора кода

Авто-импорт нормального человека

Да, конечно, я сразу начну с авто-импортов. Безумно удобная штука, особенно когда импорты приходится использовать постоянно. Но важно здесь даже то, что импортам по дефолту прописываются алиасы. Плюс в VSCode я вечно сталкиваюсь с тем, что импорт компонента иногда не подставляет запятую, от чего "автоматизм" этого процесса очень страдает.

Авто-импорт, который мы заслужили

2. Умный рефакторинг

Для второго шага не стану прикладывать видео-подтверждения, но поверьте, что автоматический рефакторинг импортов при изменении названия файла в VSCode либо работает криво, либо не работает совсем 🤷‍♂️

А вот, что действительно порадовало в WebStorm, так это возможность автоматического рефакторинга кода в проекте с отключенными линтерами через Reformat Code. И этот процесс доставляет эстетическое удовольствие. Даже грамотно настроенный ESLint в проекте не будет автоматически расставлять импорты в алфавитном порядке, оптимизировать пути до файлов через относительные пути (через alias) (поправьте в комментариях, если знаете решение)

3. Отсутствие необходимости делать настройки под проект

Огромный плюс WebStorm – его автоматический анализ проекта. IDE понимает в какой директории я работаю и позволяет автоматически применять правила из eslint, webpack, stylelint, jsconfig файлов.

Для примера, работая над проектом с структурой, в которой eslint, stylelint конфиги расположены не в корне – VSCode не сможет их правильно обработать, следовательно работать линтеры не будут 😕 (пока не настроишь пути до конфигов вручную в настройках workspace)

Пример ломающей структуры в VSCode. Обратите внимание, что конфигурации расположены в директории webpack/

4. Работа с Git

Обычно работу с Git-ом преподносят как удобство продуктов JetBrains над остальными, но я с этим не соглашусь. Расширение GitLense прекрасно дополняет VSCode и позволяет удобно работать с Git-ом. Видеть автора изменений в коде без нажатия дополнительных хоткеев, выборочно коммитить файлы, интерактивное разрешение merge conflicts – весь этот функционал прекрасно работает.

GitLense – расширение для VSCode

Хотя не буду спорить, что когда я первый раз увидел, как решаются merge conflicts в продуктах JetBrains – немного расстроился, что такого нет в моём редакторе, но уже привык работать со своим интерфейсом.

А вот интерфейс для мерджа в WebStorm (источник)

Результат эксперимента по переходу

Я ставил для себя эксперимент сроком на 14 дней, в рамках которого я не пользовался Visual Studio, но после этого времени подошёл процесс выбора инструмента и я... вернулся обратно.

Но почему?

VSCode быстрее и потребляет меньшее количество ресурсов. В моём случае (я работаю на 8ГБ оперативной памяти) это оказалось очень заметно. Первый процесс запуска проекта, вечные индексации и оперативная память на моём компьютере была полностью забита. Всё же, большинством функций в шторме я так и не воспользовался, а некоторые, требуемые для меня вещи, я так и не смог найти. VSCode расширяем и всегда можно найти необходимое расширение для решения проблемы, а в крайнем случае – написать самому 🙃

💡IDE – комбайн из тысячи функций, в лучших случаях из которой вы будете пользоваться 20-30%. В редакторе кода, в свою очередь, вы полностью сами настраиваете свой workflow и не забираете лишний ресурс вашего компьютера

Для себя я выделил определённый стэк задач, в которых мне будет удобен WebStorm и ради которых я буду его запускать, но основной рабочий процесс я все-таки продолжу выполнять в VSCode. 3 года, потраченные на настройку и кастомизацию редактора под себя, позволяют решать большинство задач не задумываясь над сложностями, поскольку подобраны оптимальные хоткеи и расширения.

Вывод же из этого эксперимента такой: Выбирайте свой инструмент исходя из ваших необходимостей и ресурсов. Не надо гнаться за самыми современными решениями, так как не всегда профит от них будет вам полезен. Не слушайте людей, которые "принуждают" вас перейти на WebStorm, потому что он круче. Есть люди, которые до сих пор пользуются Sublime Text и от этого их продуктивность не страдает. Другой тип людей будет пользоваться vim-ом и говорить, что ничего удобнее до сих пор не придумали, но из-за нескольких примеров удобства данного инструмента вы можете приобрести кучу неудобств.

Подписывайтесь на мой Telegram, Instagram и делитесь обратной связью. Спасибо 😉