寻求强制Promise链式调用换行缩进的ESLint规则

嘿，刚好能帮到你！要实现你想要的每个.then单独占一行且缩进4个空格的Promise链式调用格式，只需要配合使用ESLint的两个核心规则即可：

所需规则说明 #

• newline-per-chained-call：强制链式调用的每个方法（比如.then、.catch）单独占据一行，避免链式调用挤在同一行。
• indent：控制代码缩进，这里我们需要配置成员表达式（也就是.then这类链式调用的部分）缩进4个空格。

具体配置示例 #

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

module.exports = {
  // 其他配置项...
  rules: {
    // 强制链式调用每个方法换行
    'newline-per-chained-call': ['error', { ignoreChainWithDepth: 1 }],
    // 配置缩进为4个空格，链式调用的成员表达式缩进一级
    'indent': ['error', 4, {
      MemberExpression: 1,
      // 可以根据你的代码风格添加其他缩进配置，比如函数体、参数的缩进
      FunctionDeclaration: { body: 1, parameters: 1 },
      FunctionExpression: { body: 1, parameters: 1 }
    }]
  }
};

规则生效后的效果 #

配置完成后，ESLint会自动检查并修复不符合要求的代码：

不符合规范的代码会被提示错误 #

// ❌ 错误：链式调用挤在同一行，缩进不足
aPromiseCall().then(() => { // logic }).then(() => { // logic }).catch(() => { })

自动修复后符合规范的代码 #

// ✅ 正确：每个.then/.catch单独一行，缩进4个空格
aPromiseCall()
    .then(() => { // logic })
    .then(() => { // logic })
    .catch(() => { })

针对TypeScript项目的调整 #

如果你是在TypeScript项目中使用ESLint，需要使用@typescript-eslint/indent规则替代原生的indent规则，配置示例如下：

module.exports = {
  // 其他配置项...
  rules: {
    'newline-per-chained-call': ['error', { ignoreChainWithDepth: 1 }],
    '@typescript-eslint/indent': ['error', 4, {
      MemberExpression: 1,
      // 按需添加TypeScript相关的缩进配置
    }]
  }
};

内容的提问来源于stack exchange，提问作者Igor L.