Code Style: Vue template
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 contents of top-level tags indented in the language-specific style. |
Same in the whole file | Select this option to apply uniform indentation to the code inside all top-level tags in a file. Use the controls below to configure uniform indentation. |
Use tab character |
|
Smart tabs | 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. |
Continuation indent | 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, IntelliJ IDEA retains indents on empty lines as if they contained some code. If the checkbox is cleared, IntelliJ IDEA deletes the tab characters and spaces on empty lines. |
Indent children of top-level tag | By default, only the code inside |
Spaces
Use this tab to specify where you want IntelliJ IDEA to insert spaces automatically. Select the checkboxes next to the description of relevant locations and check the results in the Preview pane.
Wrapping and braces
In this tab, customize the exceptions, brace placement and alignment options that IntelliJ IDEA 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. |
Interpolations | In this area, select a wrapping style for interpolations and specify whether you want to have enclosing brackets If a JavaScript expression inside a Vue.js interpolation has line breaks, IntelliJ IDEA automatically starts this JavaScript expression from a new line and adds a new line after it. Clear the New line after '{{' and the New line before '}}' checkboxes to change this default behavior. |
Wrapping options | A wrapping style applies to various code constructs, specified in the left-hand pane (for example, method call arguments, or assignment statements).
|
Arrangement
In this tab, define a set of rules to rearrange your code in Vue.js templates according to your preferences.
Matching rules | Use this area to define elements order as a list of rules, where every rule has a set of matches such as modifier or type.
|
Empty rule | Use this area to create a new matching rule or edit an existing one. You can select from the following filters:
|
This icon appears when you select Order by Name from the Order list. The icon indicates that the items in this rule are sorted alphabetically. |
Set from
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.