Webstorm Custom font + color + syntax highlighting + Import and Export user settings

Webstorm is developed by a Czech company. Although it has powerful functions, the UI seems to have never been the strength of Eastern European people. Webstorm's default editor color combination is not exquisite. I am used to the dark theme of vs2012. I think it's hard to change the color because of luxury.

 

Create scheme + modify font

CTRL + ALT + s open the settings interface, Editor> colors & fonts> font.

The default scheme is bright, but I want to customize a set of dark background environments, so select monokai in the scheme name drop-down box on the right to use it as the basis for modification, and then click Save, name your new scheme, for example:

You can set the font (I usually choose consolas), font size, and line spacing.

 

Custom syntax highlighting

Press CTRL + ALT + S to open the settings page, Editor> colors & fonts.

Different Languages have their own syntax highlighting rules, but some of them are general. We should set general first, and then set syntax highlighting for different languages as needed.

General settings

Common text: default text

Folded text: folded text

Cursor: caret

Row where the cursor is located: caret row

Row number: line number

Todo: Todo default

Variable highlight under the cursor: Search Result

Search Result: Text Search Result

Matching brackets: matched brace

Unmatched parentheses: unmatched Brace

Unused Symbol: unused symbol

Left gap (row number, breakpoint): gutter background

Selected text background color: selection background

Selected text Foreground: selection foreground

 

Set language Differentiation

For example, if you want to change the syntax highlighting of JavaScript, select Javascript in, and then set it in detail. The specific settings are not described in detail.

 

Show row number + line feed

If Vim is used for programming, the row number is a necessary aid. By default, webstorm does not display the row number. It does not matter. It is very easy to display the row number.

As longCodeRight-click the gutter area on the left and select Show line numbers.

In addition, the Use soft wraps check box enables the webstorm automatic line feed function, that is, the code lines that are too long will not go beyond the screen, there will be no horizontal scroll bar.

It is worth mentioning that the standard vim, JK is to move to the next line of the previous line. If the code is automatically wrapped, the split two lines seem to be two lines, but it is actually a logical row. At this time, JK is used to move up a logical row. In this case, if you want to move from the "first line" of the same logical line to the "second line", You need to press GJ, that is, press g first and then press direction. Although Vim provides this method, errors are often pressed.

The good news is that webstorm with use soft wraps enabled does not need to do this. Simply press J to move the "first line" of the same logic line to "second line ".

 

Import and Export settings

File> export settings Export user settings. For example, you can select the types of settings to export or the directory to which you want to export them.

The Exported configuration exists in the form of a jar package, and the import is also simple. File> Import settings, select the jar package to import successfully, and restart webstorm.

The following is my custom ide configuration. After downloading, decompress it into a jar package.

Http://files.cnblogs.com/dc10101/WebStormSettings.zip