# 代码样式：Vue 模板

> For the complete documentation index, see [llms.txt](https://www.jetbrains.com/zh-cn/help/idea/llms.txt).

> **TL;DR**
> `文件 | 设置 | 编辑器 | 代码风格 | Vue`  适用于 Windows 和 Linux
>
>
>
> `%instance% | 设置 | 编辑器 | 代码样式 | Vue`  适用于 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` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) !["设置"图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.settings.svg)
>
>
>
> 必需插件： [Vue.js](https://plugins.jetbrains.com/plugin/9442-vue-js)（IntelliJ IDEA Ultimate）

使用此页面配置 Vue 文件的格式选项。 当您更改这些设置时，   预览   面板将显示这将如何影响您的代码。

请指定哪些顶层选项卡应该缩进其内容，默认情况下，只有在  `模板`  选项卡内的代码才会应用缩进。 您还需要决定所有顶级选项卡的缩进是否应一致，或根据使用的语言有所不同，例如，是特定于 HTML 或 Pug 。

## 制表符和缩进

|  特定于块中的语言  |     选择此选项，可以让顶级选项卡的内容按照语言特定的样式进行缩进。     |
|  整个文件中都一样  |     选择此选项，将对文件中所有顶级选项卡内的代码应用统一的缩进。 使用下方的控制选项来配置统一的缩进。     |
|  使用制表符  |      * 如果选中此复选框，将使用制表符： * 按下 `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` (Visual Studio), `⇥` (Visual Studio (macOS)), `Tab` (NetBeans), `Tab` (Eclipse), `⇥` (Eclipse (macOS)) 键时 * 对于缩进 * 对于代码重排格式    * 如果取消勾选复选框，IntelliJ IDEA 将使用空格代替制表符。    |
|  智能制表符  |     一个缩进包含两部分。 一部分来自于嵌套代码块，另一部分由对齐确定。        * 如果选中此复选框，嵌套产生的部分将同时包含制表符和空格（如果有必要），而对齐定义的部分则仅由空格组成。    * 如果此复选框未选中，将只使用选项卡。 这意味着，在重新格式化后，适应指定制表符大小的一组空格将自动被替换为一个制表符，这可能导致微调对齐的破坏。     > **Tip:** > 如果选中了   使用制表符   复选框，那么   智能缩进   复选框将可用。    |
|  选项卡大小  |  在此字段中，指定一个制表符中能容纳的空格数。  |
|  缩进  |  在此字段中，指定为每个缩进级别插入的空格数量。  |
|  连续缩进  |     在此字段中，指定在数组元素、表达式、方法声明和方法调用之间插入的空格数量。     |
|  保持空行的缩进  |  如果选中此复选框，IntelliJ IDEA 会保留空行上的缩进，就像它们包含了一些代码一样。 如果取消选中该复选框，IntelliJ IDEA 将删除空行上的制表符和空格。  |
|  缩进顶级选项卡的子选项卡  |     默认情况下，只有在  `模板`  选项卡内的代码具有初始缩进。 如有必要，使用逗号作为分隔符添加其他选项卡。 例如，如果您在字段中指定  `script` ，则所有  `script`  选项卡内的代码会如   预览   面板所示获得初始缩进。     |

## 空格

使用此选项卡指定希望 IntelliJ IDEA 自动插入 Space 的位置。 选择描述相关位置的复选框，并在   预览   面板中检查结果。

## 换行和大括号

在此选项卡中，自定义 IntelliJ IDEA 将在 [重新格式化源代码](reformat-and-rearrange-code.html) 对各种代码结构应用的异常，括号位置和对齐选项。 在   预览   面板中检查结果。

> **Note:**
> 对齐设置优先于缩进选项。

|  可视化参考线  |  在此字段中，指定多个右边距。 您可以保留默认值，或者输入您的边距所需的空格数。 如果您想要指定多个边距，请输入由顿号分隔的数字。  |
|  插值处理  |     在此区域，为 [插值](https://vuejs.org/v2/guide/syntax.html#Interpolations) 选择一个包装样式，并指定您是否希望在新的一行  `{{ }}` （默认）或不希望有封闭的括号。       如果一个 Vue.js 插值内的 [JavaScript 表达式](https://vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions) 有换行符，IntelliJ IDEA 将自动从新的一行开始此 JavaScript 表达式，并在其后添加新的一行。       清除   在 '{{' 后换行   和   在 '}}' 前换行   复选框以改变此默认行为。      > **Tip:** > 这些复选框不会影响没有内部换行的 JavaScript 表达式。 例如，  `{{ foo }}`  不会自动拆分。    |
|     包装选项     |     换行样式适用于左侧窗格中指定的各种代码结构（例如，方法调用参数或赋值语句）。        * 不换行 - 当选中此选项时，不会应用任何特殊的换行样式，嵌套对齐和大括号设定将被忽略。    * 过长时换行 - 选择此选项可使用适当的缩进来换行超出右边距的行。    * 始终换行 - 选择此选项以将列表中的所有元素进行换行处理，使每行有一个元素，并具有适当的缩进。    * 过长时分行 - 选择此选项可将超出右边距的列表中的元素进行包装，以便每行有一个元素并且缩进适当。    |

## 排列

在此选项卡中，根据您的偏好定义一套规则来重排您的 Vue.js 模板中的代码。

|  匹配规则  |     使用此区域将元素顺序定义为规则列表，其中每条规则都有一个匹配项设置，例如修饰符或类型。        * !["添加"按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg)：使用此按钮来添加规则。 空规则 区域已打开。    * !["移除"按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.remove.svg)：使用此按钮从列表中移除规则。    * ![编辑按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.edit.svg)：使用此按钮编辑现有规则。 要查看此按钮，请导航至您想要编辑的规则并点击按钮。 在弹出的窗口中，修改规则字段。    * ![上移按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.moveUp.svg) ![下移按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.moveDown.svg)：使用这些按钮将选定的规则上移或下移。    |
|  空规则  |     使用此区域创建新的匹配规则或编辑现有规则。 您可以从以下筛选器中选择：        * 类型 ：使用此过滤器为您的规则选择选项卡或属性。 请注意，双击类型关键字将否定条件。    * 名称 ：使用此字段来在规则中指定条目名称。 此筛选器仅匹配条目名称，例如字段名称、方法名称、类名称等。 该过滤器支持正则表达式，并使用 [标准语法](http://docs.oracle.com/javase/7/docs/api/java/util/regex/Pattern.html)。 匹配是针对整个名称进行的。    * 命名空间 ：使用此字段来指定规则中的命名空间。 它让您可以指定一个控制命名空间属性位置的规则。    * 订单 ：使用此列表来选择规则的排序顺序。 当多个元素使用相同的匹配规则时，此选项非常有用。 在这种情况下，选择 保持顺序 将保持在重排之前设置的相同顺序，选择 按名称排序 将按照它们的名称对相同匹配规则的元素进行排序。    * 别名 ：此选项显示在 规则别名定义 对话框中定义的别名。 您可以删除不需要的部分。    |
|  ![按字母顺序排序" 按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.objectBrowser.sorted.svg)  |  当从   订单   列表中选择  按名称排序  时，会显示此图标。 图标表示此规则中的项目按字母顺序排序。  |

## 设置从

当适用时，链接将出现在页面的右上角。 点击此链接并选择要作为当前语言代码样式基础的语言。

要返回到初始的代码样式设置，并丢弃更改，请点击   重置  。

## See also

### 过程

[代码样式方案](configuring-code-style.html)

### 语言和框架特定指南

[Vue.js](vue-js.html)