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.
Want to work on some code outside of the project context? Select it in the editor, then press Alt+Enter and choose Create new scratch file from selection. This will create a scratch file with the desired code.
When you’re in Following mode during a Code With Me session, you can now keep track of the code completion suggestions that the person you’re following uses.
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.
You can now secure your commits by signing them with a GPG key. You can turn this feature on via Configure GPG Key… in Preferences / Settings | Version Control | Git.
Going through the revisions in Local History is now easier. Right-click on a changed file, then go to Local History | Show History and use the search field to navigate around your revisions.
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.
After each major update, WebStorm will clean up any cache and log directories that were last updated more than 180 days ago. The system settings and plugins directories will stay intact. To trigger this process manually, go to Help | Delete Leftover IDE Directories… in the main menu.
We added three new features to our built-in terminal to improve your experience with it. You can now change the cursor shape and make the ⌥ key act as a meta modifier – look for these options in Preferences / Settings | Tools | Terminal. Also, working with the http links is now more convenient.