Prettier覆盖ESLint配置导致Angular项目导入格式保存异常

一、当前配置 #

1. VS Code 配置文件（.vscode/settings.json） #

{
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": true
  }
}

2. ESLint 规则配置（.eslintrc.json） #

{
  "max-len": ["error", 100],
  "semi": ["error", "never"],
  "import-newlines/enforce": [
    "error",
    {
      "items": 2,
      "max-len": 100,
      "semi": false
    }
  ]
}

二、问题详情 #

1. 触发冲突的导入语句 #

import {
  CONNECT_SESSION_USER,
  CREATE_SESSION,
} from 'src/operations/sessionOperations/mutations';

2. ESLint 错误提示 #

当导入元素数量为2个及以下时，禁止将导入拆分为多行

3. 保存时的异常表现 #

保存文件时，导入语句先被ESLint修正为符合规则的单行格式，紧接着又被Prettier重新拆分为多行，出现格式来回切换的异常。

三、解决方法 #

核心是让Prettier与ESLint规则对齐，避免两个工具互相覆盖格式，推荐通过ESLint整合Prettier规则的方案：

1. 安装依赖包

npm install eslint-plugin-prettier eslint-config-prettier --save-dev

2. 更新ESLint配置，整合Prettier规则
   修改.eslintrc.json，加入Prettier相关配置：

{
  "extends": [
    // 保留你项目原有的extends项（比如Angular官方规则）
    "prettier",
    "plugin:prettier/recommended"
  ],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "max-len": ["error", 100],
    "semi": ["error", "never"],
    "import-newlines/enforce": [
      "error",
      {
        "items": 2,
        "max-len": 100,
        "semi": false
      }
    ]
  }
}

3. 调整VS Code配置，统一由ESLint处理修复
   修改.vscode/settings.json，关闭自动格式化，让ESLint统一处理规则修复和格式化：

{
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": false
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": false
  }
}

这样配置后，保存文件时只会由ESLint一次性完成规则修复和格式化，避免两个工具的规则冲突导致格式来回切换的问题。

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