Code Style: Vue
for Windows and Linux
for macOS Ctrl+Alt+S
Use this page to configure formatting options for Vue files. When you change these settings, the Preview pane shows how this will affect your code.
Specify which top-level tags should have their content indented, by default, indentation is applied only to code inside
template tags. Also decide on whether indentation should be uniform for all top-level tags or depend on the language used, for example, be HTML or Pug-specific.
Tabs and Indents
|Specific to the language in the block|
Select this option to have the code inside top-level tags indented according to its language-specific style. In the Indent children of top-level tag field, specify the tags where the language-specific indentation should be applied.
By default, the option is cleared, so the Vue.js-specific indentation settings from this page are applied to the code inside all top-level tags listed in the Indent children of top-level tag.
|Same in the whole file|
By default, the option is selected, so the Vue.js-specific indentation settings from this page are applied to the code inside all top-level tags listed in the Indent children of top-level tag.
|Use tab character|
An indentation consists of two parts. One part results from nesting code blocks, and the other part is determined by alignment.
|Tab size||In this field, specify the number of spaces that fits in a tab.|
|Indent||In this field, specify the number of spaces to be inserted for each indent level.|
In this field, specify the number of spaces to be inserted between the elements of an array, in expressions, method declarations, and method calls.
|Keep indents on empty lines||If this checkbox is selected, PhpStorm retains indents on empty lines as if they contained some code. If the checkbox is cleared, PhpStorm deletes the tab characters and spaces on empty lines.|
|Indent children of top-level tag|
In this field, specify the top-level tags inside which the code will be indented. The indentation style depends on the selected option, Specific to the language in the block or Same in the whole file.
By default, indentation
Use this tab to specify where you want PhpStorm to insert spaces automatically. Select the checkboxes next to the description of relevant locations and check the results in the Preview pane.
Wrapping and bracesIn this tab, customize the exceptions, brace placement and alignment options that PhpStorm will apply to various code constructs on reformatting the source code. Check the results in the Preview pane.
|Visual guides||In this field, specify multiple right margins. You can leave a default value or enter the number of spaces for your margin. If you want to specify several margins, enter numbers separated by comma.|
In this area, select a wrapping style for interpolations and specify whether you want to have enclosing brackets
A wrapping style applies to various code constructs, specified in the left-hand pane (for example, method call arguments, or assignment statements).
The link appears in the upper-right corner of the page, when applicable. Click this link and choose the language to be used as the base for the current language code style.
To return to the initial set of code style settings and discard the changes, click Reset.