WebStorm中ESLint与Prettier冲突问题及配置求助

需求明确 #

• Prettier 负责所有文件的格式化
• ESLint 仅作用于 .html、.js、.ts 文件
• 彻底解决二者规则冲突问题

最终配置文件 #

1. .prettierrc（保持原有配置，默认覆盖所有支持文件） #

{
  "endOfLine": "auto",
  "arrowParens": "avoid",
  "printWidth": 120,
  "singleQuote": true,
  "useTabs": false,
  "tabWidth": 2,
  "semi": true,
  "bracketSpacing": true,
  "trailingComma": "all",
  "overrides": [
    {
      "files": "*.scss",
      "options": {
        "singleQuote": false
      }
    }
  ]
}

2. 修改后的 .eslintrc.json #

核心调整：

• 引入 eslint-config-prettier 禁用ESLint中与Prettier冲突的规则
• 引入 eslint-plugin-prettier 将Prettier规则整合为ESLint规则
• 通过 ignorePatterns 排除非目标文件，明确ESLint作用范围

{
  "root": true,
  "ignorePatterns": [
    "projects/**/*",
    "*.d.ts",
    "*.scss",
    "*.css",
    "*.json",
    "*.md"
  ],
  "plugins": [
    "html",
    "import",
    "simple-import-sort",
    "@typescript-eslint",
    "prettier"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@angular-eslint/recommended",
    "plugin:@angular-eslint/template/process-inline-templates",
    "airbnb-typescript/base",
    "plugin:prettier/recommended"
  ],
  "overrides": [
    {
      "files": [
        "*.ts",
        "*.js"
      ],
      "parserOptions": {
        "project": [
          "tsconfig.json"
        ],
        "createDefaultProgram": true
      },
      "rules": {
        "prettier/prettier": "error"
      }
    },
    {
      "files": [
        "*.component.html",
        "*.container.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended"
      ]
    },
    {
      "files": [
        "*.component.ts",
        "*.container.ts"
      ],
      "extends": [
        "plugin:@angular-eslint/template/process-inline-templates"
      ]
    }
  ]
}

依赖安装 #

执行以下命令安装冲突解决所需依赖：

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

WebStorm 配置步骤 #

1. Prettier 全局设置 #

打开 File > Settings > Languages & Frameworks > JavaScript > Prettier：

• 勾选 On code reformat 和 On save，确保保存/格式化时自动应用Prettier规则
• 确认 Prettier package 指向项目本地的 node_modules/prettier
• 配置文件选择项目根目录的 .prettierrc

2. ESLint 配置 #

打开 File > Settings > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint：

• 选择 Automatic ESLint configuration，让IDE自动识别项目ESLint配置
• 勾选 Run eslint --fix on save，保存时自动修复ESLint可修复问题

3. 保存动作配置 #

打开 File > Settings > Tools > Actions on Save：

• 勾选 Reformat code（确保使用Prettier作为格式化工具）
• 勾选 Run eslint --fix
• 按需勾选 Optimize imports

验证方法 #

1. 修改 .ts 文件，故意写出不符合Prettier的格式（如超长行、双引号）
2. 保存文件，查看是否自动修复为符合Prettier的格式，且ESLint无报错
3. 修改 .scss 文件，验证Prettier单独生效（单引号不生效，符合overrides配置）

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