WebStorm 2019.1 Help

Appearance

File | Settings | Editor | General | Appearance for Windows and Linux
WebStorm | Preferences | Editor | General | Appearance for macOS
Ctrl+Alt+S the Settings/Preferences icon


Use this page to customize the appearance of the Editor.

Item

Description

Caret blinking (ms)

Select this checkbox to make the caret blink with the specified period (in milliseconds).

Use block caret

Select this checkbox to have the block caret applied in the Insert mode and the usual caret applied in the Overwrite mode.
Clear this checkbox to have the usual caret applied in the Insert mode and the block caret applied in the Overwrite mode.

Show hard wrap guide (configured in Code Style options)

Select this checkbox to have a thin vertical line at the right margin of the editor displayed. Refer to the description of the Code Style settings.

Show line numbers

Select this checkbox to have line numbering shown in the left gutter area.

Show method separators

Select this checkbox to have thin lines displayed in PHP and JavaScript classes to separate functions from field declarations.

Show whitespaces

Select this checkbox to have WebStorm display white spaces or tabs (depending on the Code Style settings).

You can select the following options:

  • Leader - select this checkbox to add white spaces before your code line.

  • Inner - select this checkbox to display white spaces inside the line of your code.

  • Trailing - select this checkbox to display white spaces after the code line.

Show indent guides

Select this checkbox to have WebStorm display vertical lines in the editor to indicate positions of indents and thus facilitate typing, manual formatting, reading, and maintaining code.

Show code lens on scrollbar hover

Select this checkbox to enable lens mode.

Show parameter name hints

When this checkbox is selected, WebStorm shows the names of parameters for methods in JavaScript or TypeScript code. By default parameter hints are shown only for values that are literals or function expressions but not for named objects. To change this behavior, click Configure and select the Show name for all arguments checkbox in the Configure Parameter Name Hints dialog that opens. See Viewing parameter hints in JavaScript and Viewing parameter hints in TypeScript for details.

Show CSS color preview icon in gutter

Select this checkbox to show color preview icons for the color values.

See Changing color values.

colorPreview.png

If this checkbox is not selected, it is still possible to invoke the color picker and change color values, by choosing the Change color intention action.

no icon change color

Show CSS color preview as background

If this checkbox is selected, the background of the color value shows the color preview:

Showing CSS color preview in the background

Enable XML/HTML tag tree highlighting

Select this checkbox to show the hierarchy of tags highlighted with different colors. If this option is enabled, you can define the following options:
  • Levels to highlight: specify the depth of hierarchy to be highlighted.

  • Opacity: specify brightness of highlighting

Highlighting in a XML/HTML tag tree

Highlighting is activated when there is more than one tag with the same name in the hierarchy.

Last modified: 16 May 2019