VSCode Angular项目中ESLint与Prettier格式化冲突求助

我将Prettier设为默认格式化器并开启保存自动格式化，但出现了ESLint与Prettier行为不一致的问题：Prettier格式化后的代码不符合ESLint要求。

示例代码冲突情况 #

原始代码：

const actionAbove = findNodeInForm(this.form, (nodeAbove.data as FlowChartData).key.replace('Group', '').replace('Root', ''));

被ESLint标记为错误，修复后代码变为：

const actionAbove = findNodeInForm(
      this.form,
      (nodeAbove.data as FlowChartData).key.replace('Group', '').replace('Root', '')
    );

但保存时又会被Prettier重新格式化为单行。

我的配置文件 #

Prettier配置

{
  "singleQuote": true,
  "printWidth": 120
}

ESLint配置

{
  "root": true,
  "ignorePatterns": ["projects/**/*", "src/models/*"],
  "plugins": ["prettier"],

  "overrides": [
    {
      "files": ["*.ts"],
      "parserOptions": {
        "project": ["tsconfig.json", "e2e/tsconfig.e2e.json"],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates",
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:@typescript-eslint/recommended-requiring-type-checking",
        "plugin:prettier/recommended",
        "prettier"
      ],
      "rules": {
        "prettier/prettier": [
          "error",
          {
            "endOfLine": "auto"
          }
        ],
        "@typescript-eslint/array-type": [
          "error",
          {
            "default": "array"
          }
        ],
        "@typescript-eslint/consistent-type-definitions": "error",
        "@typescript-eslint/dot-notation": "off",
        "@typescript-eslint/explicit-member-accessibility": [
          "off",
          {
            "accessibility": "explicit"
          }
        ],
        "@typescript-eslint/no-empty-function": "error",
        "@typescript-eslint/no-this-alias": "error",
        "@typescript-eslint/no-unused-vars": "error",
        "@typescript-eslint/no-var-requires": "error",
        "arrow-parens": ["off", "always"],
        "brace-style": ["error", "1tbs"],
        "id-blacklist": "off",
        "id-match": "off",
        "import/no-extraneous-dependencies": "off",
        "import/no-internal-modules": "off",
        "linebreak-style": "off",
        "max-classes-per-file": ["error", 1],
        "new-parens": "off",
        "newline-per-chained-call": "off",
        "no-duplicate-case": "error",
        "no-duplicate-imports": "error",
        "no-empty": "error",
        "no-extra-bind": "error",
        "no-extra-semi": "off",
        "no-irregular-whitespace": "off",
        "no-new-func": "error",
        "no-redeclare": "error",
        "no-return-await": "error",
        "no-sequences": "error",
        "no-sparse-arrays": "error",
        "no-template-curly-in-string": "error",
        "no-underscore-dangle": "off",
        "prefer-object-spread": "error",
        "quote-props": "off",
        "react/jsx-curly-spacing": "off",
        "react/jsx-equals-spacing": "off",
        "react/jsx-wrap-multilines": "off",
        "space-before-function-paren": "off",
        "space-in-parens": ["off", "never"]
      }
    },
    {
      "files": ["*.html"],
      "extends": ["plugin:@angular-eslint/template/recommended", "prettier"],
      "rules": {}
    }
  ]
}

问题根源与解决办法 #

冲突原因

ESLint中存在强制函数调用参数换行的规则（大概率是@typescript-eslint/function-call-argument-newline），但Prettier的printWidth设为120时，判定该行代码长度未超过阈值，所以自动合并为单行，导致两者行为冲突。

具体解决步骤

方案一：统一Prettier换行规则

修改Prettier配置，强制函数调用参数换行，与ESLint修复后的格式对齐：

{
  "singleQuote": true,
  "printWidth": 120,
  "functionCallArgumentNewline": "always"
}

方案二：调整ESLint规则

若不想强制所有函数参数换行，可关闭ESLint中对应的强制换行规则：
在ESLint的rules节点添加：

"@typescript-eslint/function-call-argument-newline": ["off"]

或设置为与Prettier兼容的策略：

"@typescript-eslint/function-call-argument-newline": ["error", "consistent"]

方案三：同步ESLint与Prettier配置

确保ESLint中prettier/prettier规则的配置与.prettierrc完全一致，避免两边配置偏差：

"prettier/prettier": [
  "error",
  {
    "singleQuote": true,
    "printWidth": 120,
    "endOfLine": "auto"
  }
]

验证方法

修改配置后，运行eslint --fix格式化代码，再保存文件，检查是否还会出现格式回滚的情况。若仍有问题，排查是否存在其他强制换行的ESLint规则（如max-len），或IDE格式化设置是否覆盖了配置文件。

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