WebStorm 2020.1: Improved Look and Feel, Vuex Support, Prettier on Save, and More

WebStorm 2020.1, the first major update this year, is now available! It comes with a more polished look and feel, out-of-the-box support for Vuex and Composition API, an option to run Prettier on save, and improvements for JavaScript and TypeScript.

DOWNLOAD WEBSTORM 2020.1

webstorm-2020-1-released

If you only have a few minutes to explore what’s new in WebStorm 2020.1, watch this video where Paul Everitt, WebStorm Developer Advocate, reviews the most notable improvements. If you feel like diving a little deeper, read on!

The new features and improvements fall into these categories:

  • Look and Feel: a new default editor font, a unified light theme, Zen mode for focused coding, quick documentation on hover, LightEdit mode for quick editing, and a customizable status bar.
  • Frameworks: Vuex and Composition API support, completion for Vue in HTML files with CDN links, improvements to React support, and full support for Angular 9.
  • JavaScript and TypeScript: more useful quick documentation, new smart intentions and inspections, support for TypeScript 3.8 features, and a reworked UI of the Introduce Field refactoring.
  • Tools: run Prettier on save, split terminal sessions, bundled spell checker, Jest enhancements, TypeScript support with Yarn 2, and more flexible sharing of run configurations.
  • Version Control: a reworked dialog for rebasing commits, improved work with branches, changes to the commit flow, and installing Git from the IDE.

Look and Feel

New default editor font

For the last year, we’ve been developing a font that would let you code more comfortably, without straining your eyes too much. The result of our efforts is JetBrains Mono, a new open-source typeface made specifically for coding. Starting v2020.1, WebStorm is shipped with JetBrains Mono selected by default, with the option to set a custom font of your choice should you still want to.

jetbrains-mono

Unified light theme for all operating systems

To make the UI more consistent across all operating systems, we’ve introduced a unified light theme, IntelliJ Light. From now on, this theme will be available in the Theme dropdown menu in Preferences/Settings | Appearance & Behavior | Appearance.

intellij-light-theme

Zen mode for focused coding

We’ve added the new Zen mode to help you focus completely on your code. It combines the Distraction Free mode and the Full Screen mode, so that you don’t have to enable or disable both of these modes every time you want to enter or exit them.

To enable this new mode, go to View | Appearance | Enter Zen Mode from the main menu, or choose it from the Switch popup.

zen-mode

Using WebStorm for quick editing

With the new LightEdit mode, you can open a file in a text-like editor window without creating or loading a project. Let’s see how.

light-edit-mode

First, make sure that WebStorm hasn’t been launched yet. If it’s running, the file will be opened in it instead of the text-like editor window. Then, open the file in one of three ways:

  • Go to your project folder, right-click the file you want to edit, and select WebStorm from the list.
  • Create a command-line launcher as described here and open the file from the command line.
  • Click the Open button on the IDE welcome screen, select the file you need and press Open.

Ready to switch from editing this single file to working on your entire project? Select File | Open File in Project in the main menu, or right-click anywhere in the editor tab and select Open File in Project from the context menu.

Displaying the Documentation popup on hover

Starting with WebStorm 2020.1, you no longer need to explicitly invoke the Documentation popup – it’s automatically shown when you hover over a symbol. This can help you find information about specific symbols faster.

docs-on-hover

We understand that not everyone wants the Documentation popup to be shown on a mouseover. If you’re one of those people, you can turn it off in Preferences/Settings | Editor | Code Editing by unticking the Show quick documentation on mouse move checkbox.

New customization options for the status bar

By default, WebStorm displays the status bar at the bottom so you can quickly review the overall project and IDE status, and get access to various settings like file encoding and inspection highlighting. If you don’t have the status bar hidden and use it every so often, you can now decide on what exactly you’d like to see there. For this, right-click the status bar and untick each element you do not want to see on the status bar.

customizing-the-status-bar

Frameworks

Vuex and Composition API support

As Vue.js is becoming increasingly popular, we want WebStorm to be the most helpful IDE for working with it. We’ve already done a lot to make Vue coding assistance more advanced. This time, we’ve added two major enhancements to it.

First, if you’re working with the Vuex library, you’ll now get completion suggestions for symbols from the Vuex store and modules when editing Vue components. Plus, WebStorm will let you jump to the definition of getters, mutations, and actions.

vuex-completion-for-cartjs

Second, since you can already use the Composition API from the upcoming Vue 3 release in your application via the @vue/composition-api package, we’ve decided to implement support for it in WebStorm 2020.1. In the template section of the component, you’ll now get completion suggestions and resolution for symbols returned from the setup() function of the component, including properties in the reactive state, computed properties, and refs.

vue-composition-api-completion

Another minor enhancement to Vue.js support is that, if you set up Vue by injecting code into a static HTML file, WebStorm will now properly recognize the Vue syntax. If you have a Vue library linked from a CDN in that HTML file, you can also download it, which will allow the IDE to provide code completion that is more helpful. To download the library, press Alt+Enter on the link in the HTML file and select Download library.

download-library-vue

Code completion will also work for libraries added locally to your project.

Improvements to React support

WebStorm 2020.1 enhances its React support. First, the IDE will now suggest adding import statements for components defined via React.memo if you place the caret on those components and press Alt+Enter. It will also add them automatically when typing as it does for any other symbols.

insert-imports-for-react-memo-components

Second, if you’re using Material-UI components in your project, you can now expect to see proper completion suggestions when creating styles.

Full support for Angular 9

To help you work with Ivy and other Angular 9 features, we’ve added full support for them in WebStorm 2020.1. You can use features like code completion and auto imports in TypeScript and template files with no configuration. For more details on what exactly has been added, please see this blog post.

JavaScript and TypeScript

Improved quick documentation for JavaScript and TypeScript

For JavaScript and TypeScript, the Documentation popup now shows more useful information, including details about the type and visibility of the symbol as well as where that symbol is defined. The information about the type is taken from the TypeScript Language Service.

information-about-type-and-visibility

Another improvement is that WebStorm will now properly render the information added using custom JSDoc tags and use it for the Documentation popup.

Automatic conversion to optional chaining and/or nullish coalescing

In WebStorm 2020.1, you can find a new intention that lets you automatically convert the existing code to optional chaining and/or nullish coalescing, the syntax introduced in the latest versions of TypeScript and JavaScript. To use it, place the caret on the expression you’d like to convert, press Alt+Enter and select the corresponding intention.

intention-for-converting-to-optional-chaining-and-nullish-coalescing

Inspection for converting let to const

With this new inspection, you can quickly turn the variable with a non-reassignable value into a constant one. To do this, place the caret on the let you’d like to replace with a const, press Alt+Enter, and select Convert to const.

inspection-for-converting-to-const

If you’d like to do the same across the entire project or a specific directory, you can use the Run inspection by name action instead. For this, select Code | Run Inspection by Name in the main menu or press Cmd/Ctrl+Shift+Alt+I, then start typing let used where it could be a const and hit Enter to select the inspection. In the dialog that appears, you’ll be able to configure a custom inspection scope.

run-inspection-by-name

Keep in mind that, while the inspection is turned on by default, it isn’t set to highlight the variables with let that can be potentially replaced with const in your code. You can change this behavior in Preferences/Settings | Editor | Inspections | JavaScript and TypeScript | ECMAScript 6 migration aids | ‘let’ used where it could be a ‘const’.

New intention for inferring parameters from usages

In WebStorm 2020.1, you can find a new intention that lets you quickly infer parameter type annotations, or JSDoc types from function calls. As with any other intention, you can use it by pressing Alt+Enter.

infer-parameters-from-usages-js

Support for TypeScript 3.8 features

WebStorm 2020.1 comes with TypeScript 3.8 bundled and introduces full support for the new TypeScript 3.8 features, such as type-only imports/exports, private fields, and top-level await.

Reworked UI of the Introduce Field refactoring

When using the Introduce Field refactoring (Cmd/Ctrl-Alt-F) in WebStorm 2019.3, you had to make changes in a separate dialog, which would block you from working with code directly and wouldn’t let you see the applied changes as you typed.

With the updated implementation of the Introduce Field refactoring available in WebStorm 2020.1, it will take fewer clicks to apply the refactoring, and you’ll be able to see a preview of changes in the context of the code you’re working with.

introduce-field-refactoring-webstorm-2020-1

Tools

Running Prettier on save

Until now, it’s been challenging to use Prettier to apply formatting to your files on save. You had to set up a file watcher or install a third-party plugin, which wasn’t exactly straightforward. This is why we’ve added a new option that lets you run Prettier on save. You can find it in Preferences/Settings | Languages & Frameworks | JavaScript | Prettier.

run-on-save-for-files-prettier

When the checkbox Run on save for files is selected, WebStorm will apply formatting to all .js, .ts, .jsx, and .tsx files that you’ve edited in your project. If you want to apply the formatting to other types of files, or to files located in specific directories only, you can customize the default configuration by using glob patterns.

If you’re ready to give this new functionality a go, don’t forget to disable the file watcher you’ve been using for this purpose.

As promised, we also plan to add a new option for running ESLint on save in a later release. For now, we recommend using a file watcher for that as described here. Please stay tuned for more announcements.

Displaying terminal sessions side by side

WebStorm 2020.1 will make it easier for you to work with the built-in terminal emulator, as you can now split terminal sessions vertically and horizontally. This functionality will let you keep an eye on the output of several tools that are currently in use without switching between tabs.

To try the new functionality out, right-click anywhere in the Terminal tool window area and select Split Vertically/Split Horizontally from the context menu.

split-terminal-sessions

If you no longer need to have several terminal sessions, you can right-click on the session you want to close and select Close Session from the context menu.

Bundled spell checker

Starting with v2020.1, WebStorm will come bundled with Grazie, our intelligent spelling, grammar, and style checking tool. Grazie supports over 15 languages, including English, German, Russian, and Chinese. We hope it helps you avoid grammar mistakes when adding comments, commit messages, and various language constructs.

Let’s take a brief look at how Grazie works. If there’s a grammatical error in your code, you’ll see it highlighted the same way the IDE highlights other problems in your code – by showing a squiggly line. To fix the error, hover over it and click Fix ‘Grammar error’ or place the caret on the problematic word, then press Alt+Enter and apply a quick fix.

grazie-in-webstorm

By default, Grazie is only enabled for English and doesn’t check all file types for potential grammar mistakes. You can add more languages and change the default behavior in Preferences/Settings | Editor | Proofreading (go to the Grammar section to adjust the scope of the checks, review existing rules, and add exceptions).

Support for .each in Jest test files

When testing with Jest, you’d normally see the Run icon on the gutter, next to each test, which allows you to run and debug a specific test from there. However, it wasn’t the case for tests using .each API: WebStorm wouldn’t recognize them properly because of their slightly different nature. To support them, we had to re-implement the way the test names are supported. We’ve managed to do that, so you can now run and debug tests with .each from the gutter as well.

tests-with-each-jest

Updating all Jest snapshots in a file

If you’re doing snapshot testing with Jest, you may have already noticed that WebStorm lets you update a snapshot with a single click. However, previously there was no option for updating multiple snapshots at once. This meant that if you had more than one failed test, you had to rerun them multiple times, which wasn’t very convenient. To make this easier, we’ve added a new option for updating multiple snapshots.

More flexibility when sharing run configurations

To make work with your project easier for your team members, you can share the run configuration you used for that project with them. This way, they’ll be able to run the project code using the same configuration settings regardless of what operating systems they are on.

In v2019.3 and earlier, you could achieve that by selecting the Share through VCS option in the settings for each run configuration. With this checkbox ticked, WebStorm would save the desired run configuration in the .idea folder and make it available to other team members if you then committed the related files to VCS. This approach didn’t always work because users often have the .idea folder added to .gitignore.

In WebStorm 2020.1, you’ll get more control over your run configurations as you can now store them in any project folder of your choice. For this, tick the new Store as project file checkbox and specify the path to the folder where you want to store the*.run.xml file with the selected run configuration.

run-configuration-in-webstorm-2020-1

Bear in mind that if you want to share your run configurations with those who use the IDE version earlier than 2020.1, we recommend choosing the default .idea/runConfigurations folder to avoid any compatibility issues.

Using Yarn 2 for TypeScript projects

We’ve extended the initial Yarn 2 support, which was introduced in WebStorm 2019.3. Now, all symbols are properly resolved and can be autocompleted in TypeScript projects when dependencies are installed using Yarn 2 with Plug’n’Play mode.

Version Control

Reworked dialog for rebasing commits

The Interactively Rebase from Here action, which is available under the Log tab of the Git tool window, allows you to edit, combine, and remove previous commits. This helps make your commit history more linear and comprehensible.

In WebStorm 2020.1, you’ll find a reworked, more interactive version of the Rebasing Commits dialog that opens when you click the Interactively Rebase from Here action. The updated dialog displays the actions that can be applied to each commit. It also shows the commit details and lets you see the diff and quickly reset the applied changes.

rebasing-commits-dialog

Improved work with branches

To make working with branches more straightforward, we’ve made some improvements to the interface of the Git Branches popup.

git-branches-improvements

First, the popup now has an explicit search bar, which simplifies the process of looking for the existing remote and local branches. Previously, a floating search field would appear only the moment you started typing the name of a branch, which made this functionality difficult to discover.

The other improvement affects the Refresh button: we’ve reworked it so that you can use it to update the existing remote branches.

Last, we’ve added the incoming (blue) and outgoing (green) commit indicators to the status bar.

Changes to the commit flow

In order to streamline the commit flow, we’ve developed a new Commit tool window for handling all commit-related tasks. It’s enabled for new installations by default. If you’re an existing user, you’ll see a prompt in the modal Commit dialog allowing you to quickly switch to the new UI.

commit-tool-window

Installing Git from the IDE

WebStorm 2020.1 will automatically download Git and set it up for you if it’s not yet installed on your machine. In particular, the IDE will warn you that Git is not installed when you try to import a VCS project from the welcome screen or if it fails to find the path to the Git executable for a project using Git.

Those are the most notable highlights. For the full list of new features and enhancements available in WebStorm 2020.1, see the release notes.

Please share your feedback about WebStorm 2020.1 with us, and report any issues you encounter on our issue tracker. Thank you!

The WebStorm team

About Ekaterina Ryabukha

WebStorm Product Marketing Manager at JetBrains
This entry was posted in Release Announcements and tagged , . Bookmark the permalink.

40 Responses to WebStorm 2020.1: Improved Look and Feel, Vuex Support, Prettier on Save, and More

  1. Gustavo says:

    Very nice release. One minor thing I saw with the added features, apparently splitted terminal sessions doesn’t persist if I close and re-open webstorm, like the tabs does. Any chance of adding such behavior?

  2. Christian says:

    Sad that the backtick ( ) issue haven’t been resolved. It is an absolute travesty. Having to turn off “Insert pair quote” or copy and pasting a pair of from elsewhere is the only option.

  3. Stephan Meijer says:

    Under Changes to the commit flow, I see checkboxes in the diff-screenshot to stage a couple of lines instead of the entire file. Just like Intellij has.

    However, I don’t have these checkboxes in Webstorm 2020.1. Has that functionality been added? (https://youtrack.jetbrains.com/issue/IDEA-63391), or is the screenshot mistakenly taken from Intellij?

    If it does exist, do I need to change something to enable it?

    • Ekaterina Ryabukha says:

      This functionality should be available in WebStorm too. Please double-check that you have the “Track changed blocks in text files separately” box ticked in Preferences/Settings | Version Control | Changelists. If it’s not ticked, please tick it and reopen the Commit tool window if the change doesn’t get applied straight away.

      • Stephan Meijer says:

        I do have that setting enabled, but still don’t see those checkboxes.

        Are there any other requirements?

        https://i.imgur.com/4CIOQ53.png

        • Ekaterina Ryabukha says:

          Could you try disabling and re-enabling it back and then restarting the IDE? Please let us know if it helps.

          • Stephan Meijer says:

            Unfortunately, that didn’t fix it.

            I’ve:

            – restarted webstorm
            – disabled Track changed blocks in text files separately
            – restarted webstorm
            – enabled Track changed blocks in text files separately
            – restarted webstorm

            But the checkboxes are still not there, while the diff clearly shows me two separte chuncks.

          • Ekaterina Ryabukha says:

            Thanks for the update. Could you kindly check whether the “Highlight modified lines in gutter” box is ticked in Preferences/Settings | Editor | General? Some plugins might turn this option off.

          • Stephan Meijer says:

            Thank you! Highlight modified lines in gutter was indeed the problem. Enabling that setting, enabled the checkboxes.

            This makes it so much more useful. You’re my hero of the day :)

  4. Me says:

    Funny how those first two screenshots show how ‘Prettier on Save’ is a well justified feature :D

  5. yeliex says:

    How to split the terminal sessions with a shortcut?

    I set with Preferences => Keymap => Plug-ins => Terminal => Split Vertically to CMD+D but not work.

    And after set, it alerts conflict with others. Can I set the shortcut only work when terminal focused

    • Ekaterina Ryabukha says:

      This is a bug, we’ve created a new issue to fix it, please follow it for updates: https://youtrack.jetbrains.com/issue/IDEA-237048. Sorry for the inconvenience!

      As for conflicts, you can investigate what’s causing them by clicking on the name of the conflicted shortcut highlighted in blue under Preferences/Settings | Keymap (right below the list of all shortcuts). You can modify either the IDE shortcuts there or change your system settings to avoid conflicts.

  6. Amir Itzhak says:

    Hi, I don’t see option in GIT to works with submodule project

    • Ekaterina Ryabukha says:

      Hi Amir,
      There is nothing special about submodules support that requires a dedicated option.
      If your project has submodules, WebStorm clones them, commits and updates accordingly to the settings. No special actions are needed.
      This is described in here: https://youtrack.jetbrains.com/issue/IDEA-64024#focus=streamItem-27-3076750.0-0.
      And since a submodule is a separate git repository within the root one, all standard git actions (checkout, push, pull, log, etc.) work for them the same way as for the root repository.
      If you are looking for some submodules-specific actions (like adding new submodules), there are no such, unfortunately.

  7. Ivan Saveliev says:

    First of all, great release! Please express our enormous gratitude to the whole team, for delivering a great release under this new circumstances and challenges that world is facing right now.

    I would like to report an issue that became too apparent to me. At some point during 2020 EAPs or 2020.1 release, I’ve started to encounter a drastic drop in performance of the IDE when Refactoring, like name change and it performs a usage lookup. Previously it was much faster, I’ve even excluded almost all unrelated directories, but still it’s become painfully slow. Have there been any changes to this mechanism?

    Is this something I have to create a YouTrack issue for?

  8. Alex says:

    Hey. What’s wrong with fonts after update? I have same font (Menlo, 15pt), but it looks totally different. I’ve check all settings and java runtime — all the same.

    But look at the screenshot — https://i.vgy.me/E3pChw.png

    • Ekaterina Ryabukha says:

      Hi Alex,
      The problem is not related to fonts, you have the new light theme enabled, IntelliJ Light. If you like the old macOS theme better, you can switch to it in Preferences | Appearance & Behavior | Appearance > select macOS Light from the Theme dropdown menu. I hope this helps.

  9. Alex says:

    My keyboard shortcuts did not work anymore after the update. I re-imported my settings and it didn’t help either.
    Downgraded to 2019.3.4 again.

  10. nanxiaobei says:

    Bug report:

    When click a folder on the sidebar,
    then type to search, words appears in the editor,
    did not active cursor on the sidebar.

    Others:
    Search in editor, the up & down arrow became hard to use.

    • Ekaterina Ryabukha says:

      Thanks for the feedback! I wasn’t able to replicate the first problem, could you record a video illustrating what it looks like on your computer and share a link to it, please? Also, you can share it with support by creating a new ticket (Help | Contact Support from the main menu in WebStorm).

      As for the second problem, please elaborate on why it feels harder to use now.

  11. DanielR says:

    does someone has an issue with one project linked (yarn link) to another project? If i make changes in the linked projects the changes are reported in the other project (in node_modules although it’s listed in the .gitignore). If i rollback the changes in these node_modules folder it will just rollback the changes in the linked project!!!

    • Ekaterina Ryabukha says:

      Hello Daniel,
      If we understand everything correctly, this behavior seems to be expected as you’re not creating a copy of those files, they are still the same files. If it’s something else, please share a sample project with us.

  12. Aryeh B says:

    In the Log tab of the Git tool window, is there any way to show the diff preview to the right like it used to be, instead of on the bottom?

    You can see how it used to be in the 3rd screenshot here:
    https://blog.jetbrains.com/idea/2018/10/intellij-idea-2018-3-eap-github-pull-requests-and-more/

    • Ekaterina Ryabukha says:

      Yes, to do that, untick the vcs.log.diff.preview.vertical option in Registry and restart the IDE for the changes to be applied. To open Registry, just look for it using Find Action (Cmd/Ctrl+Shift+A). If you’d like to have an option to restore the previous layout in the UI, please vote for this issue:
      https://youtrack.jetbrains.com/issue/IDEA-232551.

  13. Mirko Hoffmann says:

    Since the update,
    Javascript / Vue startup is extreme slow when debugging.
    It takes ages when the page is displayed and when another view is called.
    With the old version everything was fine in this regard.

    Is it possible to downgrade Webstorm to 2019.3 ?

  14. Dino says:

    I’ve just upgraded to WebStorm 2020 from WebStorm 2019. I’ve noticed that there is no more that blue highlight next to the line number once you edit some line (If your code is under version control).

    Here is the screenshot of what I’m referring to (WebStorm 2019):
    https://ibb.co/rxKQZ3C

    Is there any way to bring this back in new version? It’s one of the features I really enjoy using.

    • Ekaterina Ryabukha says:

      Hello Dino,
      Please check whether “Highlight modified lines in gutter” is ticked in Preferences/Settings | Editor | General.

  15. Li zhilin says:

    Great, but when I was comparing the old and new code in the popup window, because I set the hd image of my wife as the background, the window and the whole IDE would be unresponsive for nearly 10 seconds, which greatly affected my appreciation of my wife

  16. Yurii Predborskyi says:

    Feedback: new IntelliJ theme is now selected by default and has washed out colors compared to old light theme, which is unusual and not very pleasant.

    Please don’t force your opinions on my existing configuration. If you want me to try something new, make a visual prompt when I launch the application the next time. Otherwise, please leave my configuration alone (unless it is bugged and the bug has been fixed, but then I’d kindly ask you to inform me about the bug fix instead of a silent change).

    Thanks.

    • Ekaterina Ryabukha says:

      Hello Yurii,
      Thanks for sharing your thoughts with us. I hope you’ve already changed the new light theme to the old one in Preferences/Settings | Appearance & Behavior | Appearance. It was indeed a drastic change and we should be more careful when rolling out such disturbing updates. We’re sorry for the inconvenience.

Leave a Reply

Your email address will not be published. Required fields are marked *