preface

A few days ago, Webstorm released the first update for 2021. This update has some new features, so I would like to share with you what the new features are.

New features

In the new version, machine learning algorithms were used to optimize code completion, HTML preview was added, and editor font size selection was added.

ML auxiliary code completion

Completion suggestions in JavaScript and TypeScript files are now sorted by machine learning algorithms, with common apis coming first.

Let’s demonstrate this with a piece of code, as shown in the figure below:

Symbol name completion suggestion

When we declare variables, functions and class names at the top of the file, the current file name will be recommended when completing, and the effect picture is as follows:

Improved JSDoc syntax highlighting

To make JSDoc comments more readable, new options have been added to adjust the color scheme for JSDoc tag values and types. In the Preferences/Settings | Editor | Color Scheme | JavaScript/set in the TypeScript.

Built-in remote collaboration development services

Code With Me, a new service for remote collaborative development and pair programming, is built into the new release. You can use it to co-code in real time and communicate with others as an IDE, as shown in the picture, by clicking on the icon in the toolbar.

For details, please go to: IDE Remote collaboration

Supports CSS blocks in Vue

CSS modules used in.vue files are supported in the new version. The IDE will parse the $style property correctly, providing it with code completion, navigation, and basic refactoring, as shown below:

Improved support for Stylelint

Use Stylelint to repair CSS code with a few clicks. Hover the mouse over the problem in the file or place the text cursor over it, then press ⌥⏎ and select Stylelint: Fix Current File.

In the Preferences/Settings | Languages & Frameworks | Style Sheets | Stylelint specified under the corresponding fields of the configuration file path.

Built-in HTML preview

In the new version you can preview static HTML files directly in WebStorm. Changes made to HTML files or linked CSS and JavaScript files will be saved and the preview will be automatically reloaded, illustrated with a GIF, as shown below:

Selector specificity of CSS

When using stylesheets, you can now see the specificity of the selector – just hover over the selector you want to view. Alternatively, focus on the selector and press F1 to view this information in the document pop-up window.

Adjustable font thickness

In the new version, you can choose from different editor fonts, including light, regular and bold. In the Preferences/Settings | Editor | Fonts adjustment under these new options.

Maximize the tabs in the split view

When multiple tabs are open in the split view, double-click the TAB you want to work with to maximize its editor window. Double-click again to restore the TAB to its original size, as illustrated in a GIF:

More practical quick documentation

MDN documentation is now bundled with WebStorm. This will help prevent connection problems with MDN sites and make documents display faster in the editor. Now it also provides more information, for example, you’ll see details about the supported browser versions of the JavaScript API.

Improved use of Pull Request

You can now create a new PR by clicking the + icon directly in the Pull Requests tool window, as shown below:

For more improvements, go to Pull Requests for more enhancements

The project interface has been updated recently

In the new version, recently opened projects are given ICONS based on their project name abbreviations, as shown below:

Get updates

With so many new features, I’m going to show you how to upgrade from the old version to the new version.

  • Click “Help -> Check for updates” on the Menu bar of Windows, as shown in the figure below

  • On the MAC side, click WebStorm -> Check for Updates, as shown below

  • Then there will be a reminder to download the window, according to the operation of the update.

If you are using WebStorm for the first time, you can download and install WebStorm by clicking the link below.

For more updates, please visit webStorm 2021.1 whatsNew

Since the shortage

The Material Theme UI, which has always been free, is now available at 😭 for $15 / year.

After the version upgrade, the plug-in is forced to update and cannot be rolled back, making the file directory tree look uncomfortably small if you use the free version.

Do not know everyone has white whoring method, I am now 30 days trial 🤣

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 💌