Next.js项目中ESLint+Prettier自动格式化失效问题排查

开发者阿泽

2026-7-12

ESLint + Prettier 集成后格式修复无效的解决办法

以下是你可能遗漏的配置或步骤：

未安装 prettier 核心包：eslint-config-prettier 仅用于关闭与 Prettier 冲突的 ESLint 规则，实际格式化需要依赖 prettier 本身。执行安装命令：
```
npm install --save-dev prettier
```

缺少 eslint-plugin-prettier 插件：该插件能将 Prettier 的格式化规则转化为 ESLint 规则，让 eslint --fix 可以调用 Prettier 修复格式问题。安装并配置：

安装依赖：

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

修改 ESLint 配置文件，将 plugin:prettier/recommended 加入 extends 数组最后一位（确保覆盖其他规则）：

若使用扁平配置（eslint.config.js）：

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
import prettier from 'eslint-plugin-prettier/recommended';

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  'next/core-web-vitals',
  prettier // 放在最后
);

若使用旧版 JSON 配置（.eslintrc.json）：

{
  "extends": [
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended" // 放在最后
  ]
}

Prettier 配置文件缺失：创建 .prettierrc 或 prettier.config.js 定义你的格式化规则（比如缩进、引号类型），示例：
```
{
  "singleQuote": true,
  "tabWidth": 2,
  "semi": false
}
```
ESLint 配置未覆盖目标文件：确保 ESLint 配置中包含 tsx 文件，扁平配置里需指定：
```
{
  files: ['**/*.{ts,tsx,js,jsx}'],
  // 其他规则配置
}
```
检查忽略文件：确认 .eslintignore 中没有排除 app/page.tsx 或整个 app 目录，否则 ESLint 不会处理该文件。