preface

I have been using WebStorm as a front end development tool for more than 3 years. I took the time to record some of my common plugins and configurations. I welcome interested developers to read this article.

Environment configuration

First, we open the webStorm official website and download the corresponding installation package according to our system.

Install the software

Open the downloaded installation package and follow the steps shown in the following figure.

  • Selecting an Installation Path

  • Select the version to install and the default file association

  • Start the installation

  • In the installation…

  • After the installation is complete, restart the computer

Start the software

When the installation is complete, double-click the desktop icon to launch it.

  • Send crash message logs to jet to help them improve the product, you can choose according to your own needs, select send here.

  • Choose the free trial and fill out your own email address

The configuration software

In the software startup screen, open your project.

  • Open any file in the project, and the interface might look a little ugly, but we’ll make it look completely different

Change font and line height

Select file-Settings from the menu bar to open the software Settings panel.

  • Change the font, size, line height, and enable the hyphen as shown in the following figure

Common plug-in

Next, let’s install a few plugins that will give WebStorm a whole new look.

Theme plugin

The first thing to install is the Material Theme UI. Open the software Settings panel and find Plugins. Search for this plug-in

  • In the installation…

  • If the installation is successful, restart Webstorm

Install icon Plug-in

After the installation of the theme plug-in, the interface is a little more beautiful, but the Icons are still the default, very collocation, we continue to search for Atom Material Icons in Plugins

  • In the installation…

  • After the installation is successful, apply the changes and manually restart WebStorm.

Replace the topic

After installing the theme and icon plug-ins, we need to switch themes in the Settings panel

  • In the open panel, inThemeSelect your favorite theme there, select hereAtom One Dark (Material)

  • inEditor - FontPanel to modify the theme font

  • After the configuration is complete

Translate plug-in,

For developers who are not good at English, when naming variables, they will open the Translation website and then paste it in most cases when there is a shortage of words. Webstorm has a plug-in named Translation, which can directly right-click Chinese and translate and replace it.

We just search the plugin store and install it

After the installation is complete, enter Chinese in the editor and right-click to translate, as shown below:

Git commit templates

When we use Git to Commit code, if the team has formulated the Commit specification, we may need to write the Commit prefix. In WebStorm, there is a plug-in named Git Commit Template, which can manually select the type and automatically complete the prefix for us.

Just search the plugin store and install it.

  • We randomly change the code in the project, and then select the menu bargit - commit

  • The default display is to the left of the project, so let’s change it to a popover

  • Click the template icon to open the submit option

  • According to their change of content, according to the need to choose to fill in

  • Once completed, it will return to the submission page and automatically fill in the option we just selected

Git Commit Record

When we find a bug in a maintenance project, we want to quickly find out who committed the line of code, and most developers would have to go to the Git log to find it.

In WebStorm, there is a plugin called GitToolBox that shows you who and when a line of code is submitted when you select it with your mouse.

Search for installs in the plugin store

  • After the installation is complete, restart the editor

  • Clicking the code with the mouse displays the submitter, the submission time, and so on at the end of the line

AI code lenovo tool

There’s also a plugin for WebStorm called Codota that automatically reminds you of what you want to type as you write code.

Just search the plugin store and install it.

  • When the installation is complete, restart the editor and open itsetting-CodotaPanel, enable it

  • Just write some code and see what happens

File to ignore

We don’t want to upload a file to Git in a project. Usually we need to add the file to the.gitignore file to be ignored. There is a plugin in WebStorm called.ignore that can right-click on the file and add it to the configuration file.

Just search the plugin store and install it.

  • Right-click and add to Ignore file

The final result

After this configuration, WebStorm was completely transformed, but I still found the number of tabs displayed around the editor a little too many, so I chose to hide it.

  • The final interface is shown below

Note: When the surrounding tabs are hidden, they can be displayed on a MAC by double-clicking the Command key.

On Windows, you need to set the shortcut keys to display. Open the Srttings panel and search for Tool Window Bars in keyMap and set the shortcut keys.

Other configuration

Here are some more configurations on projects.

Eslint configuration

For configuration information about Eslint, go to my other article, the Configuration Editor

Building the project index

When you write code and find that some of vue’s built-in directives and some components of elementUI have no code prompts, you need to build a project index. Here’s how to do it:

  • innode_modulesRight-click on the folder and choose from the options that pop upMark Directory as -Not ExcludedCan be

Some common shortcut keys

  • Select command shift ⬅️/command shift ➡️

  • Move the current line of code: command ⬆️/ commind ⬇️

  • Commit the code to git local: command K

  • Push code to git remote repository: comnand Shift K

  • Shift press twice, search anywhere, search files, functions, code is very convenient

  • Command + f Indicates the current page search

  • Command + Shift + f Global search field

  • Command + r replaces the current document

  • Command + Shift + R Global substitution field

  • Command + Option + L Formats the code

  • Shift + f6 renames files, tags, and variables

  • F2, shift + F2 switch to the next highlighted error position

  • Shift + Enter moves you to the next line no matter where you are

  • Option + Carriage return warning code quickly gives autocorrect

  • Command + left click to jump to the code call location

  • Command + delete deletes the current line

  • Command + d copies the same new line of code

  • Command + w closes the current file TAB

  • Command + / comments lines of code

  • Command + b jumps to the variable declaration

  • Command + Shift + c Specifies the path to the file to be copied

  • The Command + shift + [] TAB is useful for quick toggling

  • Command + shift + +/- Expands/collapses the currently selected code block

Distilling a piece of code into a method

Select a piece of code with the mouse and press: Command + Option + M to automatically extract this part of code into a method.

Configure the backup

Click the icon shown in the following picture (at the bottom of the editor) and click login to complete the synchronization

Note: If you do not see this column, you need to enable it in the view-status Bar

Disable unused plug-ins

Disable it under help, as shown below:

In the next panel, select the plugin you want to disable and click OK, as shown below:

Application for a Permit

Webstorm is paid, there is an official open source project application channel, you can use it for free for 1 year after it is passed, and you can apply for renewal after it expires. In general, the project maintenance can be passed more than 3 months with a high probability.

Application address: Open Source Project License

Write in the last

At this point, the article is shared.

I’m an amazing programmer, a front-end developer.

If you are interested in me, please go to my personal website to learn more.

  • Feel free to correct any mistakes in the comments section, and if this post helped you, feel free to like and follow 😊
  • This article was originally published in Nuggets and cannot be reproduced without permission at 💌