What’s new in WebStorm 2021.2

You asked us to improve the Live Edit feature and so we did! WebStorm can now automatically update the pages in a browser as you edit and save your HTML, CSS, and JavaScript files. To get started, open an HTML file in the editor, hover over it, and click on the icon for the browser you want to use – all browsers are supported.

Do you like performing certain operations on save? WebStorm 2021.2 now properly supports this workflow! We’ve reworked all the existing functionality, collected it in one place, and enhanced it with some new options, including the ability to reformat code and optimize imports on save.

Did you know that WebStorm can add missing import statements as you complete ES6 symbols? It can now also do the same for CommonJS modules – require imports can be inserted on code completion.

WebStorm now properly supports the TypeScript syntax used within JSDoc comments in your .js files. We’ve reworked and expanded the existing support and fixed a lot of known issues.

Need to quickly add an arrow function to your code? You can now surround a block of code with an arrow function using Ctrl+Alt+J. You can also type arf and press Tab to expand the template and add an empty arrow function.

The preview tab, which used to work only for the Project view, now works when you debug your app. To turn it on, go to Preferences / Settings | Editor | General | Editor Tabs and tick the Enable preview tab checkbox. This will help you avoid cluttering the editor with multiple files, as WebStorm will open the files successively in one tab.

You no longer need to waste time on refactoring useState values and functions one by one – WebStorm can now rename both for you! Place the caret on a state value and press Shift+F6 or go to Refactor | Rename from the right-click context menu.

Adding new project dependencies to package.json has become even easier, as code completion now works for private npm packages. WebStorm lets you check information about the latest versions of the package, just like it does for public packages.

Want to run tests to check your code before committing it? We’ve added a new option to help you do so. Click on the gear icon in the Commit tool window, select Run Tests, and choose the desired run configuration. WebStorm will test your files and warn you about any problems.

Starting from this version, you can enjoy a fully localized WebStorm UI in Chinese, Korean, and Japanese. Localization is available as non-bundled language pack plugins, which can be installed in WebStorm from Preferences / Settings | Plugins.

It is now easier to reorganize tool windows. Hover over the top of the tool window you want to move, then drag it to where you want it and drop it there. This will work if you want to detach a tool window from the main WebStorm window, too – just drag it outside of the IDE frame.

Did you know you can assign custom icons to your projects? We’ve made this process more straightforward. Right-click on a project on WebStorm’s Welcome screen, then select the Change Project Icon… option and upload the SVG file you want to associate with that project.

You will no longer miss any critical product updates from the Toolbox App. WebStorm will inform you if a new version is available for download and give you the option to upgrade to it – just make sure you have Toolbox App version 1.20.8804 or later.

There is now a node with advanced settings in your Preferences / Settings dialog. You can find some new configuration options there, including the ability to set a left margin in Distraction-free mode. Also, you can now jump between recently opened nodes faster – just use the arrows in the right-hand corner of the dialog.