ESLint indent规则配置错误：链式调用表达式引发格式冲突

你遇到的缩进冲突，本质是ESLint的CallExpression: { arguments: 1 }规则和Prettier的默认缩进逻辑不兼容，具体细节如下：

1. ESLint规则的要求 #

你在ESLint的indent配置中设置了"CallExpression": { "arguments": 1 }，这个规则的含义是：多行函数调用的参数，需要相对于函数名的起始位置缩进1个缩进级别（也就是2个空格，因为你的tabWidth设为2）。

对于你的代码来说，when函数的调用位于模板字符串的 ${when(这一行，ESLint会以when这个函数名的位置为基准，要求后续参数只缩进2个空格，最终期望参数的缩进量为4或6空格。

2. Prettier的格式化逻辑 #

Prettier在处理模板字符串内的多行函数调用时，默认行为是将参数缩进至和函数调用的左括号(对齐。在你的代码里，when(的左括号位于 ${when(的末尾，换行后Prettier会把参数缩进至这个括号的位置，也就是8或10空格，这直接超出了ESLint的要求，从而触发缩进错误。

另外，你的代码里还有一个语法问题：when函数的第二个参数() => html<div>on condition true</div>``后面缺少逗号，这也会干扰Prettier的正常格式化，可能加剧缩进冲突。

解决建议 #

• 调整ESLint的CallExpression配置：将"arguments": 1改为"arguments": "first"，这个配置会让ESLint要求参数缩进至和第一个参数对齐，和Prettier的行为一致。修改后的ESLint规则如下：

  "indent": [
    "error",
    2,
    {
      "SwitchCase": 1,
      "CallExpression": { "arguments": "first" }
    }
  ]
  

• 彻底消除冲突：使用eslint-config-prettier插件，它会自动禁用所有和Prettier冲突的ESLint规则，从根源上避免这类格式矛盾。

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