Next.js中ESLint的brace-style规则未对保存自动格式化生效如何解决

问题原因 #

你遇到的问题本质是格式化工具优先级冲突：ESLint仅负责代码规范校验与规则修复，但如果你的开发环境同时启用了其他格式化工具（最常见为Prettier），且该工具的规则优先级高于ESLint自动修复，就会出现ESLint报错但保存后被其他工具覆写为不符合规则格式的情况。

解决方案 #

场景1：不使用Prettier，仅用ESLint做代码格式化 #

直接在编辑器（以VSCode为例）的settings.json中调整配置，指定ESLint为默认格式化器并开启保存自动修复：

{
  // 关闭Prettier的启用开关（如果装了Prettier插件）
  "prettier.enable": false,
  // 指定默认格式化器为ESLint
  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  // 开启保存时自动执行ESLint修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

场景2：需要同时使用Prettier做格式化 #

Prettier原生不支持stroustrup风格的大括号换行规则，需要额外安装适配插件，同时调整ESLint和Prettier的配置避免规则冲突：

1. 安装依赖包

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

2. 修改ESLint配置（.eslintrc），添加Prettier兼容配置，关闭两者冲突的规则：

{
  "extends": ["next", "next/core-web-vitals", "prettier"],
  "rules": {
    "brace-style": ["error", "stroustrup"]
  }
}

3. 新增/修改Prettier配置文件（如.prettierrc），配置大括号风格为stroustrup：

{
  "plugins": ["prettier-plugin-brace-style"],
  "braceStyle": "stroustrup"
}

配置完成后重启编辑器即可生效，保存时代码会遵循stroustrup风格自动格式化。

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