How to customize user settings in WebStorm

This time I will show you how to customize user settings for WebStorm. What are the precautions for customizing user settings for WebStorm? Here are practical cases, let’s take a look.

WebStorm Custom font + color + syntax highlighting + import and export user settings

WebStorm was developed by a Czech company. Although the function is very powerful, the UI seems to have not been the strong point of Eastern Europeans. WebStorm's default

Editor color matching is not particular. I am used to the Dark Theme of VS2012, but when I look at this one, I suddenly feel that it is difficult to go from luxury to frugality, and I have to change the colors.

New Scheme + Modify Font

ctrl+alt+s to open the Settings interface, Editor > Colors&Fonts > Font.

Default scheme is bright, but I want to customize a dark background environment, so select Monokai in the Scheme name drop-down box on the right as the basis for modification, then click Save as to create a new one for yourself Give the Scheme a name, as shown below:

Here you can set the font (I usually choose Consolas), font size, and line spacing.

Customized syntax highlighting

Use ctrl+alt+s to open the Settings interface, Editor > Colors&Fonts.

Different languages ​​have their own syntax highlighting rules, but some of them are universal (General). We first set General, and then set the syntax of different languages ​​as needed. Highlight.

General settings

Normal text: default text

Folded text: Folded text

Cursor: Caret

The line where the cursor is: Caret row

Line number: Line number

TODO: TODO default

Highlight variable under cursor: Search result

Search Result: Text search result

Matched brace: Matched brace

Unmatched brace: Unmatched brace

Unused symbol: Unused symbol

Left Gap (line number, breakpoint): Gutter background

Selected text background color: Selection background

Selected text foreground color: Selection foreground

Language-sensitive settings

For example, if you want to change the syntax highlighting of

Javascript, select Javascript in the picture above, and then make detailed settings. The specific setting items will not be described in detail.

Display line number + automatic line wrapping

If you use Vim to program, line number is a very necessary auxiliary. WebStorm does not display line numbers by default. It doesn't matter. Displaying line numbers is very easy.

As long as you right-click the gutter area on the left side of the code, the menu below will appear: check Show Line Numbers.

In addition, checking Use Soft Wraps in the above picture enables WebStorm's automatic line wrapping function, that is, too long lines of code will not exceed the screen and will not appear. Horizontal scroll bar.

It is worth mentioning that in standard Vim, jk is moved to the previous line and the next line. If the code is automatically wrapped, the two divided lines may appear to be two lines, but they are actually one logical line. , at this time, jk is used to move up and down one logical line. In this case, if you want to move from the "first line" to the "second line" of the same logical line, you need to press gj, that is, press g first and then press the direction. Although Vim provides this method, you still often press the wrong button.

The good news is that WebStorm with Use Soft Wraps enabled does not need to do this. Just press j to move from the "first line" to the "second line" of the same logical line.

Import and Export Settings

File > Export SettingsExport user settings. As shown below, you can choose which types of settings you want to export, and you can also choose which directory to export to.

The exported configuration exists in the form of a jar package, and the import is equally simple. File > Import Settings, select the jar package and after the import is successful, restart WebStorm and you are done.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to the php Chinese website

Other related articles!

Related reading:

2018 Common Algorithm Questions for Front-End Interviews

How to add the ellipses function in the table

Tips on using jq to send multiple ajax and then execute callbacks

How to use the pseudo element first-letter to capitalize the first letter of text

The above is the detailed content of How to customize user settings in WebStorm. For more information, please follow other related articles on the PHP Chinese website!