1. Introduction

The WebStorm series comes again! I still like to explore some of the features and tricks of writing code. It doesn’t really help your ability to write code, but it can improve your efficiency.

An IDE is like a gun, and if a fighter doesn’t know what his gun is, he’s not going to be very effective at writing code.

2. Cloud synchronization

WebStorm has a powerful cloud sync feature that synchronizes everything you do with your IDE, even the plug-ins you install on your IDE, to the cloud.

PS: Of course, if you need to log in to JetBrains account, I don’t know if pirate users can use this feature, but it seems that pirate users can synchronize Settings through Git.

When a programmer moves to a new computer, he or she will install a lot of environments, and he or she will do a lot of personalized configuration for his or her editor. Fortunately, there are few front-end environments that need to be installed, and most of them are IDE configurations.

Directly click the gear in the lower right corner to synchronize the configuration:

I turned off the synchronization configuration and searched for it. Finally, I found that the way to turn on the synchronization configuration is in:

Open sync configuration in this one.

3. Create a template

Creating code templates is a very useful feature, which is divided into file templates and code templates.

3.1 File Templates

When creating a new template, it will automatically generate some templates, such as a.vue file, and you will find the corresponding structure in the file once you have created it.

The template used to create the file is also editable:

3.2 Code Template

Most of the time duplicate code is generated directly using code templates.

After setting up, we can:

Select the file type to be applied in the following locations, and select it according to your actual situation. The following can be used happily.

Of course, creating your own template is not so easy, and the use of variables will be covered in this article

4. JSDOC

Comments make up a large part of the project. If a project doesn’t have comments, it’s very difficult to maintain it later. You may know what this method does when you write it, but you can still understand it when you look at your code a week later, a month later, or a few months later.

Not to mention when someone else takes over your code, it can be very expensive to maintain without proper comments.

The way it works is simple: type /** on a function and hit Enter to generate a JSDOC comment.

As for the @xxx color, you can customize it in Settings:

4. 5. Smart refrigerator 5

While writing code, you can often run off to write another file in the middle, or another project needs an urgent BUG fix, and when the BUG is fixed, you can go back to your original code and not know what you were doing.

WebStorm gives special functionality to TODO and FIXME in comments.

In annotations, TODO and FIXME are case insensitive.

5.1 the TODO

Unfinished code.

It can be written in any comment of the project to indicate that there is unfinished code.

// TODO

/** TODO */

/** * TODO */
Copy the code

All three of the above comments are ok.

5.2 FIXME

Code to be fixed. Example:

// FIXME

/** FIXME */

/** * FIXME */
Copy the code

After the tag is complete, there is a TODO option box in the bottom selection bar of WebStorm. Click to open it and you can directly locate the location of these tags:

6. Check the code

WebStorm has a great code detection feature, sometimes you need to check your code for errors. The current file detection can be seen in the upper right corner of the page:

But sometimes you don’t know which file might have errors or warnings before the project is packaged, so you need to use global file detection.

This is where you can directly detect errors in files throughout the project.