# Code Style: Vue template > **TL;DR** > `File | Settings | Editor | Code Style | Vue` for Windows and Linux > > > > `IntelliJ IDEA | Settings | Editor | Code Style | Vue` for macOS > > > > `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) ![the Settings icon](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.settings.svg) > > > > Required plugins: [Vue.js](https://plugins.jetbrains.com/plugin/9442-vue-js) (IntelliJ IDEA Ultimate) 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 | * If this checkbox is selected, tab characters are used: * On pressing the `Tab` (Windows), `⇥` (macOS), `⇥` (IntelliJ IDEA Classic (macOS)), `⇥` (macOS System Shortcuts), `Tab` (XWin), `Tab` (GNOME), `Tab` (KDE), `Tab` (Emacs), `Tab` (Sublime Text), `⇥` (Sublime Text (macOS)), `Tab` (NetBeans), `Tab` (Visual Studio), `⇥` (Visual Studio (macOS)), `Tab` (Eclipse), `⇥` (Eclipse (macOS)) key * For indentation * For reformatting code * If the checkbox is cleared, IntelliJ IDEA uses spaces instead of tabs. | | Smart tabs | An indentation consists of two parts. One part results from nesting code blocks, and the other part is determined by alignment. * If this checkbox is selected, the part that results from nesting contains both tabs and spaces (if necessary), while the part defined by alignment consists only of spaces. * If this checkbox is cleared, only tabs are used. This means that after reformatting a group of spaces that fits the specified tab size is automatically replaced with a tab, which may result in breaking fine alignment. > **Tip:** > The Smart Tabs checkbox is available if the Use tab character checkbox is selected. | | 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 `template` tags has initial indentation. If necessary, add other tags using commas as separators. For example, if you specify `script` in the field, the code inside all `script` tags gets initial indentation as shown in the Preview pane. | ## 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](reformat-and-rearrange-code.html). Check the results in the Preview pane. > **Note:** > Alignment takes precedence over indentation options. | 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](https://vuejs.org/v2/guide/syntax.html#Interpolations) and specify whether you want to have enclosing brackets `{{ }}` at a new line (default) or not. If a [JavaScript expression inside a Vue.js interpolation](https://vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions) 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. > **Tip:** > These checkboxes do not affect JavaScript expressions without line breaks inside. For example, `{{ foo }}` will not be split automatically anyway. | | Wrapping options | A wrapping style applies to various code constructs, specified in the left-hand pane (for example, method call arguments, or assignment statements). * Do not wrap - When this option is selected, no special wrapping style is applied, the nested alignment and braces settings are ignored. * Wrap if long - Select this option to wrap lines that go beyond the right margin with proper indentation. * Wrap always - Select this option to wrap all elements in lists so that there is one element per line with proper indentation. * Chop down if long - Select this option to wrap elements in lists that go beyond the right margin so that there is one element per line with proper indentation. | ## 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. * ![the Add button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.add.svg): use this button to add a rule. The empty rule area opens. * ![the Remove button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.remove.svg): use this button to remove the rule from the list. * ![the Edit button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.edit.svg): use this button to edit an existing rule. To see this button, navigate to the rule that you want to edit and click the button. In popup that opens, modify the rule fields. * ![the Move up button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.moveUp.svg) ![the Move down button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.moveDown.svg): use these buttons to move the selected rule up or down. | | Empty rule | Use this area to create a new matching rule or edit an existing one. You can select from the following filters: * Type: use this filter to choose tags or attributes for your rule. Note that clicking a type keyword twice negates the condition. * Name: use this field to specify entry names in the rule. This filter matches only entry names, such as field names, method names, class names, and so on. The filter supports regular expressions and uses a [standard syntax](http://docs.oracle.com/javase/7/docs/api/java/util/regex/Pattern.html). The match is performed against the entire name. * Namespace: use this field to specify the namespace in the rule. It lets you specify a rule that controls a namespace attribute position. * Order: use this list to select the sorting order for the rule. This option is useful when more than one element uses the same matching rule. In this case, selecting Keep order will keep the same order as was set before the rearrangement and selecting Order by Name will sort the elements with the same matching rule by their names. * Aliases: this option displays aliases that were defined in the Rules Alias Definition dialog. You can remove the ones you do not need. | | ![the Sort Alphabetically button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.objectBrowser.sorted.svg) | 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. ## See also ### Procedures [Code style schemes](configuring-code-style.html) ### Language and Framework-Specific Guidelines [Vue.js](vue-js.html)