Hello, I am Cangcang Liangliang, a front-end developer. At present, I am publishing some interesting and knowledge about front-end learning on Nuggets, Zhihu and my personal blog. Welcome to follow me.

WebStorm has always been my favorite front-end development editor. It integrates almost all the functions needed in front-end development. I have published several related articles in the past, if you are interested:

• Various handy WebStorm features
• Various handy WebStorm features – code refactoring
• WebStorm easy to use plug-ins
• WebStorm plugins (2)
• WebStorm powerful Git version control

Before, my favorite theme, One Dark theme, did not support the latest experience version 2021.2, and there were a lot of bugs in the initial experience version, resulting in poor use experience. In fact, the experience version 2021.2 was released on May 27th, and it has been updated for more than two months. It already has a lot of new features than 2021.1, so this article is about the ones I found useful.

1. The new features

1.1 Reload when you save

Without using the packaging tool, VSCode next door can get the ability to refresh the interface after changing the source file through the plugin. In previous versions of WebStorm, you can also get this function by turning on debug mode. Now WebStorm supports reloading on save, no need to envy VSCode next door.

1.2 TypeScript types are supported in JSDoc

For developers who are used to TypeScript, there are a lot of things that can be very frustrating when they try to use JavaScript. For example, there are a lot of type warnings that can’t be handled. JSDoc can mitigate some of these problems (but not all of them).

It is now possible to correctly use the following TypeScript syntax for variable type declarations:

1.3 Automatically introduce CommonJS modules

WebStorm’s support for auto-import was previously limited to ES Module, which was pretty frustrating for Node.js users, although there are ways to make ES Module an import mode for Node.js.

This update adds the CommonJS auto-import feature:

1.4 Actions on save

This is one of the features THAT I am looking forward to. Simply put, it can automatically perform formatting operations, delete useless imports and so on when you Save. In the past, only the Save Actions plugin can do this, but now WebStorm has some functions of this plugin.

1.5 Rename useState hooks

For the React user is an excellent one function, when we were in the use of useState, if found variable name is not ideal to name, because the back of the set variable generally need and corresponding to the variable name in front of, so we often need to modify two times, but the update will only need to modify, To rename useState, of course, the shortcut is still ⇧F6 / Shift+F6.

1.6 Improved Tailwind CSS support

I am looking forward to this feature, because I use Tailwind CSS in many cases when I write projects. WebStorm before this version, if it is in the form of className={}, it will not be able to correctly display Tailwind CSS. VSCode gets the correct tooltip next door. I was envious of VSCode’s correct tooltip, but now WebStorm has improved support for Tailwind CSS.

1.7 New arrow function template

In the current front-end development projects, we will use a lot of arrow functions. The new version of WebStorm provides a new template for quick generation of arrow functions. Just type CO and you can get a prompt for quick generation of arrow functions:

2. The final