💇🏿 ⛹🏿 🔄 WebStorm 2020.1: interface improvements, Vuex support, and launching Prettier when saving files 🤜🏻 🏻 🤾

Hello everyone! We are pleased to present the first major WebStorm update this year. In the new version you will find many new features and long-awaited improvements, including Vuex support and a new option to launch Prettier when saving files.

webStorm-2020-1-released

Download the 30-day trial version of WebStorm 2020.1 online or using the Toolbox App . The full version can be used by holders of an active subscription to WebStorm or All Products Pack, as well as free students and developers of open source projects.

Now let's look at the main improvements in more detail.

New font for working with code

Throughout the past year, we have developed a special font for working with code that would help our users program with great comfort and minimize eye strain. The result of our efforts is JetBrains Mono , a new open source font. Starting with version 2020.1, JetBrains Mono is selected by default in WebStorm and our other IDEs. The ability to include a different font, of course, also remained.

jetbrains-mono

Zen mode for focused work

The new Zen mode helps you focus completely on your code. Combining two modes, Distraction Free and Full Screen , it allows you to quickly turn on both of them and temporarily isolate something that can distract your attention.

zen-mode

To try the new mode, go to View | Appearance | Enter Zen Mode from the WebStorm main menu or use the Switch pop-up window ( Ctrl + `| View mode | Enter Zen Mode ).

Support for Vuex and Vue Composition API

Vue.js is gaining popularity, so we are actively working to make WebStorm the most useful IDE for working with this framework. This time we added two major improvements.

To begin with, when working with the Vuex library, you will see options for code completion for Vue store symbols and modules when editing Vue components. WebStorm also helps you quickly move on to defining getters, mutations, and actions.

vuex-completion

Secondly, since you can already use the Composition API, available in the upcoming Vue 3 release, we decided to add support for it in WebStorm 2020.1.

vue-composition-api-support

Running Prettier when saving files

Thanks to the new Run on save for files option , you can apply Prettier formatting to all files specified in WebStorm settings and edited in the current project, while saving these files - you no longer need to configure file watcher or use a third-party plugin.

prettier-on-save

Help with grammar and stylistic mistakes

Starting with version 2020.1, WebStorm comes bundled with Grazie, our tool for checking spelling, grammar, and text style. This will help you avoid grammar mistakes when adding comments, commits and various language constructs.

grazie

By default, Grazie is enabled only for the English language and does not check all file types for possible grammatical errors. You can add more languages and change predefined settings in Preferences / Settings | Editor | Proofreading (go to the Grammar section if you want to configure the scan scope, see the existing rules and add exceptions).

New intention actions and inspections

As always, we have added some new intention-actions and quick fixes to help you save time when working with JavaScript and TypeScript code. For example, one of the new intention-actions, available by pressing Alt + Enter , will quickly convert existing code to optional chaining and / or nullish coalescing.

convert-to-optional-chaining

More information about the new intention-actions and quick fixes is available in the release blog post (in English).

Support for the latest versions of popular technologies

In WebStorm 2020.1 you will find built-in support for TypeScript 3.8 functionality, including type-only imports / exports, private fields, and top-level await, which will help you work with them more efficiently. In addition, we made working with Angular 9 projects easier by fully supporting the new metadata format.

More convenient rebasing of commits

The Interactively Rebase from Here action , available on the Logs tab of the Git window , allows you to edit, merge, and delete previous commits. This helps make the commit history more linear and understandable.

rebasing-commits

In WebStorm 2020.1, you will find an improved, more interactive version of the Rebasing Commits dialog box that opens when the Interactively Rebase from Here action is called . The updated dialog box displays actions that can be applied to each commit. It also shows detailed information about each commit and allows you to see the difference and quickly discard applied changes.

Using WebStorm to quickly edit files

Thanks to the new LightEdit mode , you can open files in a separate text editor window, without creating or loading an entire project. The mode will work if WebStorm is not already running. If WebStorm is running, the file will open in it, as usual.

To try the new mode in action, right-click on the file you want to edit and select WebStorm from the list of proposed programs. Alternatively, you can also configure the command-line launcher, as described here , and open the file using the command line.

lightedit-mode

That's all for once. Thank you for reading to the end! You will find even more details in the release blog post.(in English). Questions, wishes and just thoughts express in the comments. We, as always, will be happy to answer. Bug reports can be created here .

JetBrains WebStorm The Drive to Develop Team

WebStorm 2020.1: interface improvements, Vuex support, and launching Prettier when saving files