Code Style: Vue

Select this option to have the contents of top-level tags indented in the language-specific style.

Select this option to to apply uniform indentation to the code inside all top-level tags in a file. Use the controls below to configure uniform indentation.

• If this checkbox is selected, tab characters are used:

  • On pressing the Tab key

  • For indentation

  • For reformatting code

• If the checkbox is cleared, WebStorm uses spaces instead of 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.

In this field, specify the number of spaces to be inserted between the elements of an array, in expressions, method declarations, and method calls.

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.

In this area, select a wrapping style for 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 has line breaks, WebStorm 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).

• 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.