WebStorm 与 ESLint 设置 Vue 模板属性换行不对齐

Vue 模板里一个标签属性多了就得换行，默认的格式化行为是把后续属性和第一个属性垂直对齐，也就是缩进到标签名后面那个位置：

<el-table-column prop="name" label="名称" width="180" />

这种对齐方式我不喜欢，理由有几个。缩进量取决于标签名的长度，标签名一长属性就被推到很右边，代码往右漂；改标签名（比如把 div 换成 section）会导致所有属性行的缩进都要跟着变，一个语义修改产出一大片格式 diff；而且这种缩进不是固定的 2 或 4 空格倍数，和文件里其他部分的缩进节奏对不上。

我更想要的是固定一级缩进：

<el-table-column prop="name" label="名称" width="180" />

要改成这样，得同时改两处配置——编辑器的格式化规则和 ESLint 的检查规则。只改一个的话，会出现保存时格式化成 A 样式、ESLint 立刻报错要求改成 B 样式的死循环，这是最常见的坑。

WebStorm 的设置

下图是 WebStorm 里的位置：Preferences → Editor → Code Style → HTML（Vue 文件的模板部分走 HTML 的规则），找到 Alignment 那一栏，把「Attributes」的对齐选项取消掉：

ESLint 的设置

eslint 中的 vue 配置

对应的规则是 vue/html-indent，来自 eslint-plugin-vue。它同时管缩进量和对齐方式：

{
  // 缩进
  'vue/html-indent'
:
  [2, 2, {
    'attribute': 1,
    'baseIndent': 1,
    'closeBracket': 0,
    // 在多行情况下，属性是否应与第一个属性垂直对齐的条件。
    'alignAttributesVertically': false,
    'ignores': []
  }]
}

逐个说下这些选项。

数组第一项 2 是 ESLint 的规则级别，2 表示 error（违反就报错中断），1 是 warn，0 是关闭。第二项 2 是缩进单位——每级缩进 2 个空格，想用 tab 就写字符串 'tab'。

attribute: 1 表示属性相对标签缩进 1 级（也就是 2 个空格）。

baseIndent: 1 是 <template> 内部的整体基准缩进，1 表示模板内容比 <template> 标签缩进 1 级。设成 0 的话模板内容和 <template> 顶格对齐，Vue 官方风格指南倾向于缩进，我保持 1。

closeBracket: 0 控制闭合的 > 或 /> 的缩进级别。设 0 意味着它和标签起始位置对齐，就是上面示例里 /> 单独一行顶格的效果。

alignAttributesVertically: false 是这篇的关键，它就是关掉「属性与第一个属性垂直对齐」这个行为的开关。注意这个选项只在属性和标签名同一行时才起作用——也就是 <el-table-column prop="name" 这种第一个属性紧跟标签名的写法。如果第一个属性就换行了（推荐的写法），所有属性天然都按 attribute 指定的级别缩进，这个选项无关紧要。

ignores 接受一组选择器，匹配到的节点跳过缩进检查。一般留空，除非有特殊格式要求的自定义组件。

用 Prettier 的话

如果项目里用 Prettier 管格式，上面这套就别配了——Prettier 的属性换行行为是它自己算的，不可配置，而且它本来就是固定一级缩进不做垂直对齐，正好是我们想要的效果。

这时候要做的反而是把 ESLint 的格式规则全部关掉，装 eslint-config-prettier 并放在 extends 数组的最后一位，让它覆盖前面所有配置里的格式规则。否则 vue/html-indent 和 Prettier 会互相打架，表现就是保存后 ESLint 报错、按 ESLint 修复后又被 Prettier 改回去。

WebStorm 那边同理，开了 Prettier 的「On save」之后，Code Style 里的对齐设置就不生效了（格式化交给 Prettier 做），不用去改。