To do a good job, he must sharpen his tools.

Today, Webstorm has released the first version of the 2020 update, which is quite good. Next, we would like to share with you the new features of the new version, and welcome interested developers to read this article 🤗

New features

  • New font JetBrains Mono

Over the past year, WebStorm has officially developed a font that it claims is easier to code with and less eye strain. This font is available by default in our updated version.

Here I use the Menlo font that I have used in previous versions and compare it with JetBrains Mono (Menlo font in the first picture, JetBrains Mono font in the second picture)

I think the new font looks better 😃

  • Hover over a document to display it quickly

In the new version, if you want to view the usage and documentation of a library, just hover the mouse over the method you want to view, and the relevant usage documentation of the current method will be displayed automatically, as shown in the picture below.

  • Edit a file quickly using Webstorm

After the new version is updated, right-click the file you need to open and select WebStorm to quickly open the file, without loading the entire project, running speed has been greatly improved.

  • With Composition API

In the new version, support is provided for the Composition API in Vue 3 to define components. In the template part of the component, the IDE will properly parse and automate symbols returned from the component’s setup () function, including properties in reaction state, computed properties, and refs.

  • Vuex coding aid

When using the Vuex library, suggestions for symbol completion are obtained from the Vuex store when editing Vue components. In addition, WebStorm will let you jump to getters, Mutations, and Actions.

  • Perfect support for Angular 9
  • Enhanced intelligent prompts for code inspection

Using new intelligent intents and checks (Alt + Enter) can save time when coding

For example, quickly converting existing code to optional links and/or invalid merges (syntax introduced in recent versions of JavaScript and TypeScript).

  • More helpful quick documentation

For JavaScript and TypeScript, the Document pop-up window now displays more useful information, including details about symbol types and visibility, and where the symbol is defined.

  • Supports TypeScript 3.8 features

WebStorm 2020.1 ships with TypeScript 3.8 and introduces full support for the new TypeScript 3.8 features, Examples are type-only imports/exports, private fields, and top-level await.

  • Use Prettier to format code when saving

In the old version, we had to configure File Watchers to achieve this function. In the new version, we only need to enable this configuration item in the WebStorm configuration.

  • Parallel display terminal

To make it easier to use the built-in terminal emulator, WebStorm now allows you to split terminal sessions vertically and horizontally. Keep an eye on the output of the several tools you are currently using without having to switch between tabs.

What’s New in WebStorm 2020.1

Get updates

With all this talk about new features, are people already itching to update them? Here’s how to upgrade from an old version to a new one.

  • As shown, select Check for updates under the WebStorm menu bar
  • Select UPDATE AND RESETART
  • Download required files…
  • Update in the…
  • Update successful, restart…
  • Because I used the Theme UI of The Material Theme, after this update, the Theme plug-in is not compatible with WebStorm, so I reported an error
  • Update the Material Theme UI to solve the error reporting problem
  • Plug-in upgrade successful
  • At this point we find a prompt on the console: let’s install the Material Theme icon. The new version of the plugin does not carry the icon by default, so let’s click the link to install it.
  • As shown, clicking on the link opens a link in the browser. We click Install to Ide
  • At this point we went back to WebStorm and saw the installation prompt pop up, so we hit OK
  • Download plugins…
  • Successful installation

The WebStorm 2020.1 upgrade is complete. If you are using WebStorm for the first time, please go to the official website to download the installation package.

Write in the last

  • Some of the pictures used in this article are from webstorm official website. If they infringe, please leave a comment in the comment section and the author will delete the relevant pictures immediately.
  • If there are any errors in this article, please correct them in the comments section. If this article helped you, please like it and follow 😊
  • This article was first published in nuggets. Reprint is prohibited without permission 💌