Reload pages in your browser on save, auto-import for require, a rename refactoring for React useState hooks, completion for private npm packages, and usability improvements.
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.
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.
require()
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.
To help you work more efficiently with CSS classes in your React projects, we’ve added support for popular classnames and clsx libraries. WebStorm will show completion suggestions for your CSS classes and resolve all symbols in string literals and properties with literal names.
We’ve extended support for web-types, an open-source standard for documenting web frameworks. It was previously focused on Vue support. But now you can use it to enrich the coding assistance for custom components in your HTML files. Watch this webinar recording to learn more.
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.