WebStorm 9.0.0 Web Help

File | Settings | Editor | Code Style | HTML


Use this page to configure formatting options for HTML files. View the result in the Preview pane on the right.

On this page:

Tabs and Indents

Item Description
Use tab character
  • If this check box is selected, tab characters are used:
    • On pressing the TabTabTabTabTabTabTabTabTabTabTab key
    • For indentation
    • For code reformatting
  • When the check box is cleared, WebStorm uses spaces instead of tabs.
Smart tabs
  • If this check box is selected, WebStorm inserts tabs for indentation and reformatting, but fine alignment to a necessary column is done only via spaces without replacing them with tabs. This is done in order to preserve visual representation of the source code, when the Tab Size is changed.
  • If this check box is cleared, only tabs are used. This means that a group of spaces that fits the specified tab size is automatically replaced with a tab, which may result in breaking fine alignment.

The Smart Tabs check box is available if the Use Tab Character check box is selected.

Tab size In this text box, specify the number of spaces included in a tab.
Indent In this text box, specify the number of spaces (or tabs if the Use Tab Character check box is selected) to be inserted for each indent level.
Continuation indent In this text box, specify the number of spaces (or tabs if the Use Tab Character check box is selected) to be inserted at the next line in case of a construct break.
Keep indents on empty lines If this check box is selected, then WebStorm will keep indents on the empty lines as if they have contained some code.
If this check box is not selected, WebStorm will delete the tabulation characters.
Detect and use existing file indents for editing Use this check box to detect code style settings in the currently edited file on the fly. In this case, when you open a file in the editor, indentation that was used in that file is preserved automatically. For example, if tabs were used for the indentation then in copy, paste or enter actions, tabs are used. Also, note that if you use the Reformat Code command then WebStorm applies default code style settings and uses them in the editor.

Other

Item Description
Keep line breaks Select this check box to have WebStorm honor line breaks when reviewing HTML files in the editor.
Keep line breaks in text Select this check box to have WebStorm honor line breaks in attributes (for example, lengthy descriptions) when reviewing HTML files in the editor.
Keep blank lines In this text box, specify the minimum number of sequential blank lines to be retained after reformatting.
Wrap attributes Use this drop-down list to determine how attribute lines should be wrapped. The available options are:
  • Do not wrap - if this option is selected, no special wrapping style is applied to the code.
  • Wrap if long - select this option to have lines going beyond the right margin wrapped with proper indentation.
  • Chop down if long - select this option to have elements in lists that go beyond the right margin wrapped to give one element per line with proper indentation.
  • Wrap always - select this option to have all elements in lists wrapped to give one element per line with proper indentation.
Wrap text Select this check box to have long lines wrapped according to the code style settings.
Align attributes Select this check box to have attributes in sequential lines aligned.
Align text Select this check box to have WebStorm align the text that occupies several lines within a tag.
Keep white spaces Select this check box to suppress replacing actual white spaces with tabs.
Spaces In this area, define the use of spaces for attributes and tag names.
  • Around "=" in attribute - select this check box to have spaces added around the "=" symbol in attributes.
  • After tag name - select this check box to have spaces added after tag names.
  • In empty tag - select this check box to have spaces added in empty tags.
Insert new line before This display field shows a list of tags before which a new line should be inserted. Use the button shift-enter-button.png next to the field or press Shift+EnterShift+EnterShift+EnterShift+EnterShift+EnterShift+EnterShift+EnterShift+EnterShift EnterShift EnterShift Enter to open the Insert New Line Before Tags dialog box, where you can edit the list of tags.
Remove new line before This display field shows a list of tags before which a break line should be removed. Use the button shift-enter-button.png next to the field or press Shift+EnterShift+EnterShift+EnterShift+EnterShift+EnterShift+EnterShift+EnterShift+EnterShift EnterShift EnterShift Enter to open the Remove Line Breaks Before Tags dialog box, where you can edit the list of tags.
Do not indent children of This display field shows a list of tags whose children should not be indented. Use the button shift-enter-button.png next to the field or press Shift+EnterShift+EnterShift+EnterShift+EnterShift+EnterShift+EnterShift+EnterShift+EnterShift EnterShift EnterShift Enter to open the Do Not Indent Children Of dialog box, where you can edit the list of tags.
Or if tag size more than In this text box, specify the minimum length of a tag in lines starting from which its children are not indented.
Inline elements This display field shows a list of tags that are presented in the source code in the same line with the other tags. If a tag is removed from the list, the editor automatically moves it to a new line, when you add such tag to the source code. Use the button shift-enter-button.png next to the field or press Shift+EnterShift+EnterShift+EnterShift+EnterShift+EnterShift+EnterShift+EnterShift+EnterShift EnterShift EnterShift Enter to open the Inline Elements dialog box, where you can edit the list of tags.
Keep white spaces inside This display field shows a list of tags inside which you want the editor to preserve white spaces as is, without any changes. Use the button shift-enter-button.png next to the field or press Shift+EnterShift+EnterShift+EnterShift+EnterShift+EnterShift+EnterShift+EnterShift+EnterShift EnterShift EnterShift Enter to open the Keep Whitespaces Inside dialog box, where you can edit the list of tags.
Don't break if inline content This display field shows a list of tags that are not to be wrapped if their content is inlined. Use the button shift-enter-button.png next to the field or press Shift+EnterShift+EnterShift+EnterShift+EnterShift+EnterShift+EnterShift+EnterShift+EnterShift EnterShift EnterShift Enter to open the Don't Wrap If Inline Content Only dialog box, where you can edit the list of tags.

Set From

Click this link to reveal the list of languages to be used as the base for the current language code style. So doing, only the settings that are applicable to the current language are taken. All the other settings are not affected.

This link appears in the upper-right corner of the language-specific code style page, when applicable.

Click Reset to discard changes and return to the initial set of code style settings.

See Also

Procedures:

Reference:

Web Resources: