Vue中ESLint no-multi-spaces规则在methods/computed内失效求助

安全阿岳

2026-7-25

解决方案

要实现Vue组件methods/computed中函数名与括号间必须有且仅有一个空格的规范，需要正确配置space-before-function-paren规则，具体如下：

1. 明确规则分工

no-multi-spaces：仅负责检测代码中除特定场景外的多空格问题，不处理函数名与括号之间的空格，所以之前的配置无法覆盖你的需求。
space-before-function-paren：专门管控函数名/关键字与左括号之间的空格数量，这才是你需要重点配置的规则。

2. 具体ESLint配置

在你的ESLint配置文件（如.eslintrc.js）中，添加或修改以下规则：

module.exports = {
  // 其他配置...
  rules: {
    // 保留你原有的no-multi-spaces配置
    'no-multi-spaces': ['error', { ignoreEOLComments: true }],
    // 配置space-before-function-paren规则
    'space-before-function-paren': [
      'error',
      {
        // 普通函数（如methods里的方法）强制要求函数名与括号间有一个空格
        named: 'always',
        // 匿名函数可根据需求配置，这里保持默认或按需调整
        anonymous: 'always',
        // 箭头函数可按需配置，比如不要求空格
        asyncArrow: 'always'
      }
    ],
    // 确保vue/no-multi-spaces规则生效（管控Vue模板里的多空格）
    'vue/no-multi-spaces': ['error', {
      ignoreProperties: false
    }]
  }
}

3. 规则生效说明

named: 'always'：强制所有命名函数（包括Vue methods/computed里的方法）的函数名与左括号之间必须有一个空格，直接覆盖你要求的规范：
- 触发报错：foo() { ... }（无空格）、bar () { ... }（多空格）
- 允许通过：foo () { ... }（单个空格）
若项目中有其他函数类型（如箭头函数、匿名函数），可根据团队规范调整anonymous和asyncArrow的配置项。