如何禁用ESlint/Prettier强制箭头函数体添加括号？

1. 定位问题来源 #

先明确括号强制添加的根源：

• 临时移除ESlint配置中的prettier扩展，运行npx eslint 你的组件文件.vue，观察括号是否消失。若消失，问题来自Prettier；否则是ESlint规则导致。

2. 针对Prettier的解决办法 #

Prettier默认会给赋值这类副作用表达式的箭头函数体添加括号，避免语法歧义。要修改该行为：

• 在ESlint配置中手动启用arrow-body-style规则并设置为as-needed，同时确保规则未被eslint-config-prettier禁用：

  // .eslintrc.json 或 .eslintrc.js
  {
    "rules": {
      "arrow-body-style": ["error", "as-needed", { "requireReturnForObjectLiteral": false }],
      "@typescript-eslint/arrow-body-style": ["error", "as-needed", { "requireReturnForObjectLiteral": false }]
    }
  }
  

• 若规则被eslint-config-prettier禁用，需调整extends顺序（将prettier放在最后）并手动覆盖：

  {
    "extends": [
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended",
      "plugin:vue/vue3-strongly-recommended",
      "@vue/eslint-config-typescript/recommended",
      "plugin:nuxt/recommended",
      "@nuxtjs/eslint-config-typescript",
      "prettier"
    ],
    "rules": {
      "arrow-body-style": ["error", "as-needed"],
      "@typescript-eslint/arrow-body-style": ["error", "as-needed"]
    }
  }
  

3. 针对ESlint规则的解决办法 #

若为ESlint规则导致，调整no-extra-parens相关规则：

{
  "rules": {
    "no-extra-parens": ["error", "functions"],
    "@typescript-eslint/no-extra-parens": ["error", "functions"]
  }
}

"functions"选项会禁止给箭头函数体这类函数表达式添加不必要的括号。

4. Vue模板内箭头函数的特殊处理 #

针对Vue模板指令（如@input）中的箭头函数，检查并调整Vue插件规则：

{
  "rules": {
    "vue/arrow-function-style": ["error", "as-needed"]
  }
}

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