Switching from WebStorm to Cursor (VS Code)

I think many people are aware that JetBrains stopped selling their products in Russia, but it is worth paying tribute to them that they retained perpetual licenses for the version of the product that was in use at that time. Not cool, of course, but for a long time I didn’t care about this moment. Yes, it’s not the latest software, but you don’t have to pay either. However, recently on one of the projects I needed to switch to Vite and Vitest. And at that moment I realized how important it is for me to run tests from the IDE. It turned out that my version of WebStorm does not support Vitest.

And then a question arose before me. Is it time to get yourself a foreign bank card for this or come up with something else? And in general, we should have a tool to bypass such problems a long time ago, but I really don’t like the idea of ​​​​paying someone who creates problems for me, provided that there are affordable and good alternatives.

As you probably understand, today there will be a story about how I changed religion IDE, making the transition from WebStorm to Cursor (VS Code).

To be honest, I was very embarrassed about this transition because I knew it could be hard and it was hard. But Cursor's main feature made this transition more enjoyable. When you register, you are given a two-week trial period of the Pro version, which includes an AI assistant, which, by the way, works without a VPN, which I really like. Overall, it helped me compensate for the time it took me to get used to the new IDE. Also support and tips from my participants channel in telegram was also extremely useful, so subscribe if you haven’t already.

I will build my story as a listing of the features that I used in WebStorm, and a corresponding listing of how to implement it in Cursor. Let's go!

Content

1. Keyboard & short cuts

2. EditorConfig

3. Prettier

4. Eslint

5. Jest

6. Vitest

7. NPM Scripts

8. Go to package

9. Code snippets

10. Git

11. Sorting

12. Tabs

13. Results

Keyboard & short cuts

When installing Cursor, you are asked to choose which key binding is convenient for you, in my case, of course, JetBrains:

But this, unfortunately, was not enough and I also installed the extension IntelliJ IDEA Keybindnigs. To install any extension, go to the “Extensions” section using the View: Extensions menu, the ⇧⌘X key combination, or simply click on the corresponding icon on the menu:

Next, use the search field and install the extension you find. I hope no one will have any problems with this. After installing any extension, I recommend restarting Cursor, and to do this:

1. Open the IDE command line using the command ⌘⇧P;

2. Find “Reload Window” in the search field and select it.

EditorConfig

In WebStorm you can simply specify a configuration file and everything will work out of the box. You need to add an extension to Cursor EditorConfig for Visual Studio Code. No additional configuration is required, just restart the IDE.

Prettier

Just like in WebStorm, for code auto-correction to work, you need to install the extension Prettier and configure it:

1. Open the IDE command line using the command ⌘⇧P;

2. Type “open settings” and select “Open User Settings (JSON)”;

3. Next, in the open JSON file, add the following:

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

It’s convenient for me when auto-correction occurs when saving, but if this does not suit you, then delete the first line. Also, if you do not use editorConfig, then remove the third line.

Don't forget to restart the IDE.

By the way, you can see what settings Prettier uses and the work log by clicking on the link in the lower right corner of Cursor:

Eslint

In WebStorm, as far as I remember, Eslint came out of the box, and in Cursor you also need to install the appropriate extension. The installation and configuration process is already familiar to you, so I will only indicate the fields that need to be entered into the User Settings (JSON):

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

Jest

Just like Eslint, Jest in WebStorm works out of the box, and in Cursor everything also needs to be installed accordingly extension. Here, no additional setup was required at the beginning. However, this extension was running all the tests for every sneeze, so I added the following to the User Settings (JSON):

"jest.runMode": "deferred"

After installing this extension, it becomes possible to run tests directly from a file, just like in WebStorm:

Vitest

My entire move to Cursor and this article is motivated by this testing framework. In newer versions of WebStorm it also comes from boxes. And in Cursor, as usual, we already install the extension Vitest. The process is the same and no additional configuration was required.

NPM Scripts

In WebStorm it is very convenient to run scripts from the corresponding section:

If you suddenly closed the npm section in WebStorm, then open package.json, right-click and select “Show npm Scripts”.

I spent a long time looking for a similar window in Cursor, but by default it wasn’t there either. I had to try a number of extensions and I settled on this. It is as similar as possible and is located almost in the same place in the lower left corner:

In fact, it turned out to be even more convenient. In WebStorm, all these scripts were launched in the appropriate environment and some of them conflicted. For example, when I ran a script with tests, and some of them crashed, then after editing one, I ran the test from a file as usual, which destroyed the results of the previous running process, that is, running tests according to the script. When running a script from an extension in Cursor, a separate process always opens.

Go to package

Over the past couple of years, I've often worked with npm dependencies. If you open package.json in WebStorm, you can place the cursor on the package of interest and use “go to” short cut (⌘P), which will take you to the package directory in node_modules.

As it turns out, this functionality is not in demand among VS Code (Cursor) users. I couldn't google any solution, but my colleague found an extension Goto Package.

This extension does not move you to the appropriate directory in node_modules, but it can immediately open the package.json of the package, which is generally what I always needed.

Code snippets

With the spread of AI, IDE snippets will most likely gradually fade into secondary roles, but for now I use them often. Therefore, it was important for me to understand how to create and use them in Cursor. In general, the process is similar to WebStorm:

1. Open the IDE command line using the command ⌘⇧P;

2. Find and select “Configure User Snippets” and then select “New Global Snippets file”;

3. Write snippets like this:

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

Next, just type the prefix in any file, and the IDE will prompt you to expand the corresponding snippet.

Git

It was painful to get used to working with Git. In general, this topic is worth a separate article and in-depth study, so today I’ll go over the top:

1. Annotations

WebStorm has excellent annotation functionality that allows you to quickly determine who made the changes and within what task:

There is no such thing in Cursor. Everything can be solved by expansion GitLens is a very powerful tool that provides many possibilities. It also has paid functionality, but I didn’t use it. To be honest, I would like to get used to free stuff first.

After installation, annotations appeared that can be obtained by hovering, which is convenient:

2. Conflict resolution

It is worth noting that it will take a long time to get used to resolving conflicts. I don’t know if it’s just a matter of habit, but it seems like working with Git in WebStorm is implemented better and more convenient. Let's see what it looks like in WebStorm:

And now in Cursor:

In this case, this more or less familiar view must be enabled separately in the user settings:

"git.mergeEditor": true

I also added the following setting to quickly navigate through conflicts:

 "merge-conflict.autoNavigateNextConflict.enabled": true

If you generally look at the two screenshots above, you can see that in the Cursor Merge Editor it takes on a lot and immediately merges non-conflicting lines, which at certain moments can shoot you in the foot if we are talking about a complex rebase.

3. View history

Viewing the commit history is also, in my opinion, more convenient in WebStorm. Just right-click inside the file, find Git and open the history:

In Cursor the procedure is similar, you also click inside the file and find the file history:

However, the interface, in my opinion, is overloaded. But maybe it's a matter of habit.

Sorting

I like things to be sorted alphabetically, so I used the String Manipulation plugin in WebStorm. There is a similar extension for Cursor Alphabetical Sorter. There's not much to add here. Both work great. The main thing is to tie the same key combinations. This can be done by opening the IDE command line using the command ⌘⇧P, where you will need to search for “Keyboard Shortcuts”.

Tabs

I also love how tabs in the editor open in multiple lines. It’s inconvenient for me when I have to scroll through tabs in one line. To do this, you need to add the following to the user settings:

"workbench.editor.wrapTabs": true

Results

After looking through the article, I got the impression that Cursor needs to be constantly improved in order to get the functionality of WebStorm. Yes it is. However, Cursor works much faster, probably because it is lighter, or maybe because I have a 21-year-old version of WebStorm. I cannot say objectively.

There are also a number of disadvantages that seem to take some getting used to:

1. There is no way to set multiple cursors by holding RMB + alt. You have to set one for each click. Although perhaps I just haven't figured out how to do it yet;

2. Does not import dependencies when copying;

3. Does not offer to rename the file when copying;

4. It is not convenient to work with changes; there is no way to copy the old version from the window with changes, you can only roll back.

And here are my full custom settings:

{
  "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"]
}

Thank you everyone for your time!