如何配置ESLint中多行函数调用的缩进规则？

1. 为什么ESLint要求8个空格？ #

ESLint默认的indent规则中，多行函数调用的参数默认采用对齐到函数调用起始括号的逻辑。看你的代码：

expect(mockDataService.fetchTodaysEntries).toHaveBeenCalledWith(mockModel.currentDate,
  expect.any(Function));

toHaveBeenCalledWith(的起始括号，从行首到该括号的位置刚好是8个空格（test函数块的2级缩进共4个空格，加上expect(mockDataService.fetchTodaysEntries).的长度），所以ESLint要求参数行缩进8个空格来和括号对齐。

2. 如何配置消除冲突？ #

你有两种可选方案，任选其一就能解决VS Code内置格式化与ESLint的冲突：

方案一：修改ESLint规则，适配VS Code格式化 #

在你的ESLint配置文件（如.eslintrc.js、.eslintrc.json）中，调整indent规则的CallExpression参数缩进设置，让多行参数相对于函数调用行缩进2个空格（对应你代码里的6个空格）：

{
  "rules": {
    "indent": ["error", 2, {
      "CallExpression": {
        "arguments": 2
      }
    }]
  }
}

这里"arguments": 2表示多行函数参数在函数调用行的缩进基础上再增加2个空格，和VS Code内置格式化的默认行为一致。

方案二：修改VS Code格式化设置，适配ESLint默认规则 #

其实VS Code内置格式化可以配置这个缩进行为，你可以在settings.json中添加以下设置，让参数对齐到函数调用的括号位置（适配ESLint默认要求的8个空格）：

{
  "javascript.format.options": {
    "indentCallArguments": true
  }
}

设置后，VS Code格式化时会自动把多行函数参数缩进对齐到括号位置，和ESLint默认规则匹配。

两种方案都能在不关闭所有缩进规则、不加忽略注释、不安装额外工具的前提下消除报错红线。

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