如何调整React默认ESLint规则实现函数参数解构向左对齐

配置方案 #

这个缩进问题需要调整ESLint的缩进规则配置，根据你是否使用TypeScript分为两种情况：

纯JS/JSX项目配置 #

在你的ESLint配置文件（如.eslintrc.json、.eslintrc.js）的rules字段中添加如下配置：

{
  "rules": {
    "indent": ["error", 2, {
      "FunctionDeclaration": { "parameters": "first" },
      "FunctionExpression": { "parameters": "first" },
      "CallExpression": { "arguments": "first" },
      "ObjectExpression": "first"
    }]
  }
}

配置说明：

• 数字2代表缩进为2个空格，如果你习惯用4个空格缩进可修改为4
• "first"参数表示：函数参数、调用参数、对象属性首行换行后，后续行仅对齐当前作用域的缩进层级，不需要和左括号/左大括号的位置对齐

TS/TSX项目配置 #

TS项目通常会用@typescript-eslint的缩进规则替代原生规则避免语法冲突，配置如下：

{
  "rules": {
    "indent": "off",
    "@typescript-eslint/indent": ["error", 2, {
      "FunctionDeclaration": { "parameters": "first" },
      "FunctionExpression": { "parameters": "first" },
      "CallExpression": { "arguments": "first" },
      "ObjectExpression": "first"
    }]
  }
}

验证规则 #

配置修改完成后，执行npx eslint --fix 对应文件路径即可自动修复已有文件的缩进问题，后续保存自动格式化就会按照你期望的效果对齐。

如果你同时使用了Prettier格式化工具，需要保证Prettier的tabWidth配置和ESLint的缩进宽度一致，避免规则冲突。

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