Vue模板注释对齐触发多空格错误的解决方法

你遇到的是ESLint的stylistic/no-multi-spaces规则限制——它禁止代码行中出现多余连续空格，而你用空格对齐注释的写法刚好触发了该规则。以下是几种能保留注释对齐同时解决错误的方法：

方案1：修改ESLint全局配置，允许注释前的多空格 #

在项目的ESLint配置文件（如.eslintrc.js、.eslintrc.json）中，给stylistic/no-multi-spaces规则添加例外，适配对象属性行的注释对齐场景：

module.exports = {
  // 其他配置项...
  rules: {
    // 其他规则...
    'stylistic/no-multi-spaces': ['error', {
      ignoreEOLComments: true, // 允许行尾注释前的多空格
      exceptions: {
        Property: true // 允许对象属性行的多空格对齐
      }
    }]
  }
}

配置后，ESLint会忽略对象属性行尾注释前的多余空格，既保留对齐格式，又不会报错。

方案2：对特定代码块临时禁用规则 #

如果不想修改全局配置，可以在目标代码块前后添加ESLint注释，临时跳过该规则检查：

// eslint-disable-next-line stylistic/no-multi-spaces
showSelectedValue: {                // ------- showSelectedValue -------
    type: Boolean,                  // Switches between showing the
    default: true,                  // selected items or the placeholder
},                                  // name. Defaults to true.
// eslint-enable-next-line stylistic/no-multi-spaces

也可以给每一行添加单行禁用注释，但会让代码稍显杂乱，适合处理个别代码块的场景：

showSelectedValue: {                // eslint-disable-line stylistic/no-multi-spaces // ------- showSelectedValue -------
    type: Boolean,                  // eslint-disable-line stylistic/no-multi-spaces // Switches between showing the
    default: true,                  // eslint-disable-line stylistic/no-multi-spaces // selected items or the placeholder
},                                  // eslint-disable-line stylistic/no-multi-spaces // name. Defaults to true.

方案3：用制表符代替空格对齐 #

如果团队规范允许，将对齐注释的空格替换为制表符（Tab）。ESLint的stylistic/no-multi-spaces规则默认不会检查制表符，这样既能实现注释对齐，又不会触发错误。

内容的提问来源于stack exchange，提问作者SamFF