VSCode中ESLint与Prettier保存格式化不遵循ESLint规则问题

安全阿岳

2026-7-27

解决VSCode中ESLint+Prettier保存格式化不遵循ESLint规则的问题

1. 配置VSCode默认格式化器及保存行为

确保VSCode使用ESLint作为默认格式化工具，并开启保存时自动修复ESLint问题。打开VSCode设置（快捷键Ctrl+,），点击右上角「打开设置(JSON)」，添加或修改以下配置：

{
  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]
}

2. 解决ESLint与Prettier的规则冲突

Prettier的格式化规则可能覆盖ESLint配置，需将Prettier集成到ESLint工作流中，确保规则统一：

安装依赖

执行命令安装必要插件：

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

更新ESLint配置

修改.eslintrc.js，在extends数组末尾添加plugin:prettier/recommended（该配置会禁用所有与Prettier冲突的ESLint规则，并将Prettier规则转为ESLint错误提示）：

module.exports = {
  // ... 原有配置
  extends: [
    'plugin:react/recommended',
    'airbnb',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:import/typescript',
    'plugin:prettier/recommended' // 新增，放在最后
  ],
  // ... 原有配置
};

3. 检查规则一致性

确保核心规则匹配：

你的配置中ESLint的indent与Prettier的tabWidth均为2，无冲突
若需保留react/jsx-first-prop-new-line规则，可在.prettierrc.json中添加"singleAttributePerLine": true，让Prettier行为与该ESLint规则对齐