Переход с WebStorm на Cursor (VS Code)12.06.2024 15:15

Думаю, многие в курсе, что JetBrains остановили продажи своих продуктов на территории России, но стоит отдать должное оставили бессрочные лицензии на ту версию продукта, что использовалась на тот момент. Не круто конечно, но долгое время меня этот момент не волновал. Да, не самое свежее ПО, но и платить не нужно. Однако недавно на одном из проектов мне было нужно перейти на Vite и Vitest. И в этот момент я осознал, как для меня важно запускать тесты из IDE. Оказалось, что моя версия WebStorm не поддерживает Vitest.

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

Как вы, наверное, поняли, сегодня будет рассказ о том, как я сменил религию IDE, совершив переход с WebStorm на Cursor (VS Code).

Честно говоря, меня очень смущал подобный переход, так как я знал, что это может быть тяжело и это было тяжело. Но главная фича Cursor сделала этот переход более приятным. При регистрации тебе открывают двухнедельный пробный период Pro версии, куда входит AI ассистент, который к слову работает без VPN, что мне очень нравится. В целом он помог мне скомпенсировать время, которое ушло на привыкание к новому IDE. Также поддержка и подсказки участников моего канала в телеграм тоже была крайне полезна, так что подписывайтесь, если еще не.

Свой рассказ я построю, как перечисление фичей, которые я использовал в WebStorm, и соответствующим перечислением того, как это реализовать в Cursor. Погнали!

Содержание

Keyboard & short cuts
EditorConfig
Prettier
Eslint
Jest
Vitest
NPM Scripts
Go to package
Code snippets
Git
Sorting
Tabs
Итоги

Keyboard & short cuts

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

Выбираем привязку клавиш при установке Cursor

Но этого, к сожалению, оказалось недостаточно и я также установил расширение IntelliJ IDEA Keybindnigs. Чтобы установить любое расширение перейдите в раздел «Расширения» с помощью меню View: Extensions, комбинации клавиш ⇧⌘X или просто кликните по соответствующей иконке на меню:

Выбор окна для работы с расширениями

Далее воспользуйтесь полем поиска и установите найденное расширение. С этим проблем, я надеюсь, ни у кого не будет. После установки любого расширения рекомендую перезапустить Cursor, а для этого:

Откройте командную строку IDE с помощью команды ⌘⇧P;
Найдите пункт «Reload Window» через поле поиска и выберите его.

EditorConfig

В WebStorm можно просто указать конфигурационный файл и все будет работать из коробки. В Cursor же нужно добавить расширение EditorConfig for Visual Studio Code. Дополнительной настройки не требуется, достаточно перезагрузить IDE.

Prettier

Также как и в WebStorm, для работы автокоррекции кода нужно установить расширение Prettier и настроить его:

Откройте командную строку IDE с помощью команды ⌘⇧P;
Напечатайте «open settings» и выберите пункт «Open User Settings (JSON)»;
Далее в открытом JSON-файле добавьте следующее:

"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"workbench.settings.applyToAllProfiles": ["prettier.useEditorConfig"]

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

Не забудьте перезагрузить IDE.

Кстати, посмотреть какие настройки использует Prettier и лог работы можно кликнув по ссылке в правом нижнем углу Cursor:

Вывод работы Prettier

Eslint

В WebStorm, насколько я помню, Eslint шел из коробки, а в Cursor нужно также поставить соответствующее расширение. Процесс установки и настройки вам уже знаком, поэтому укажу только поля, что нужно внести в пользовательские настройки (User Settings (JSON)):

"editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
},
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
]

Jest

Также как и Eslint, Jest в WebStorm работает из коробки, а в Cursor все также нужно ставить соответствующее расширение. Здесь какой-то дополнительной настройки в начале не потребовалось. Однако это расширение гоняло все тесты на каждый чих, поэтому я внес следующее в пользовательские настройки (User Settings (JSON)):

"jest.runMode": "deferred"

После установки этого расширения появляется возможность запускать тесты напрямую из файла, как и в WebStorm:

Запуск тестов из файла в Cursor

Vitest

Весь мой переход на Cursor и эта статья мотивирована этим фреймворком для тестирования. В свежих версиях WebStorm он также идет из коробки. А в Cursor по обыкновению уже ставим расширение Vitest. Процесс тот же самый и какой-то дополнительной настройки не потребовалось.

NPM Scripts

В WebStorm очень удобно запускать скрипты из соответствующего раздела:

Раздел NPM в WebStorm

Если вы вдруг закрыли раздел npm в WebStorm, то откройте package.json, кликните правой кнопкой мыши и выберите пункт «Show npm Scripts».

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

Раздел NPM в Cursor

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

Go to package

В последние пару лет мне часто доводилось работать с npm-зависимостями. Если вы откроете package.json в WebStorm, то вы можете поместить курсор на интересующий пакет и использовать «go to» short cut (⌘P), тогда попадете в директорию пакета в node_modules.

Go to npm package в Webstorm

Как оказалось у пользователей VS Code (Cursor) этот функционал спросом не пользуется. Я не смог нагуглить какое-либо решение, но мой коллега нашел расширение Goto Package.

Это расширение не перемещает тебя в соответствующую директорию в node_modules, но может сразу открыть package.json пакета, что мне, как правило, всегда и было нужно.

Go to npm package в Cursor

Code snippets

С распространением AI IDE-снипеты скорее всего будут постепенно отходить на второстепенные роли, но пока я часто их использую. Поэтому мне было важно понять, как их заводить и использовать в Cursor. В целом процесс схожий с WebStorm:

Откройте командную строку IDE с помощью команды ⌘⇧P;
Найдите и выберите «Configure User Snippets», а затем выберите «New Global Snippets file»;
Напишите сниппеты по примеру:

"Create React Functional Component With Interface": {
  "scope": "typescriptreact",
  "prefix": "rfcw",
  "body": [
    "import * as React from 'react';",
    "",
    "export interface IComponent {}",
    "",
    "export const Component: React.FC = (props) => {"
    "  const {} = props;"
    "",
    "  return <>;",
    "};"
  ],
  "description": "Create React Functional Component With Interface"
}

Далее достаточно набрать префикс в любом файле, и IDE предложит вам развернуть соответствующий сниппет.

Git

Вот привыкать к работе с Git было больно. Вообще эта тема стоит отдельной статьи и глубокой проработки, так что сегодня я пробегусь по верхам:

Аннотации

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

Аннотации в Webstorm

В Cursor же подобного нет. Решается все расширением GitLens — это очень мощный инструмент, который дает много возможностей. В рамках него есть и платный функционал, но я его не использовал. Скажу честно, мне бы привыкнуть к бесплатному для начала.

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

Аннотации в Cursor

Решение конфликтов

Стоит отметить, что привыкать к решению конфликтов придется долго. Я не знаю дело ли это только привычки, но как-будто бы работа с Git в WebStorm реализована лучше и удобнее. Давайте посмотрим как это выглядит в WebStorm:

Решение конфликтов в WebStorm

А теперь в Cursor:

Решение конфликтов в Cursor

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

"git.mergeEditor": true

Также я добавил следующую настройку для быстрого перехода по конфликтам:

 "merge-conflict.autoNavigateNextConflict.enabled": true

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

Просмотр истории

Просмотр истории коммитов также, как по мне, удобнее в WebStorm. Достаточно кликнуть правой кнопкой мыши внутри файла, найти Git и открыть историю:

Просмотр истории коммитов в WebStorm

В Cursor порядок действий аналогичен, также кликаешь внутри файла, находишь историю файла:

Просмотр истории коммитов в Cursor

Однако интерфейс, как по мне, перегружен. Но может это дело привычки.

Sorting

Я люблю, когда все отсортировано по алфавиту, поэтому в WebStorm я использовал плагин String Manipulation. Для Cursor есть похожее расширение Alphabetical Sorter. Тут добавить особо нечего. И то и другое работают прекрасно. Главное завязать те же комбинации клавиш. Это можно сделать, открыв командную строку IDE с помощью команды ⌘⇧P, где будет нужно найти «Keyboard Shortcuts».

Tabs

Я также люблю, когда табы в редакторе открываются в несколько строк. Мне неудобно, когда приходиться скролить табы в одной строке. Для этого нужно добавить в пользовательские настройки следующее:

"workbench.editor.wrapTabs": true

Итоги

Пробежавшись по статье у меня сложилось впечатление, что Cursor нужно постоянно докручивать, чтобы получить функционал WebStorm. Да, это так. Однако Cursor работает намного шустрее, видимо потому что он легче, а может потому, что у меня версия WebStorm 21 года. Не могу утверждать объективно.

Также есть ряд минусов, к которым похоже придется привыкнуть:

Нет возможности выставить несколько курсоров зажатием пкм + alt. Приходится выставлять по одному на каждый клик. Хотя возможно я просто еще не понял, как это сделать;
Не импортирует зависимости при копировании;
Не предлагает переименовать файл при копировании;
Не удобно работать с изменениями, нет возможности скопировать старую версию из окна с изменениями, можно только откатить.

А вот мои полные пользовательские настройки:

{
  "editor.codeActionsOnSave": { "source.fixAll": "explicit" },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "files.autoSave": "onFocusChange",
  "git.mergeEditor": true,
  "jest.runMode": "deferred",
  "merge-conflict.autoNavigateNextConflict.enabled": true,
  "npm.scriptExplorerAction": "run",
  "window.commandCenter": true,
  "workbench.editor.wrapTabs": true,
  "workbench.settings.applyToAllProfiles": ["prettier.useEditorConfig"]
}

Всем спасибо за уделенное время!