ESLint + Prettier 简单配置说明（Nextjs + TypeScript 项目）

ESLint + Prettier 简单配置说明（Nextjs + TypeScript 项目）

使用 ESLint 做代码质量检查，使用 Prettier 做代码格式化，并在 保存文件时自动触发（VS Code）。

需要安装的 VS Code 插件

• ESLint：dbaeumer.vscode-eslint
• Prettier - Code formatter：esbenp.prettier-vscode

配置文件一览

• ESLint（Flat Config）：eslint.config.mjs
  • Nextjs 项目创建时默认选配
  • 额外加入：eslint-config-prettier（关闭与 Prettier 冲突的 ESLint 格式类规则）
• Prettier 配置：.prettierrc
• Prettier 忽略文件：.prettierignore
• VS Code 工作区保存自动触发：.vscode/settings.json

配置文件内容

eslint.config.mjs

import { defineConfig, globalIgnores } from "eslint/config";
import nextVitals from "eslint-config-next/core-web-vitals";
import nextTs from "eslint-config-next/typescript";
import prettier from "eslint-config-prettier";

const eslintConfig = defineConfig([
  ...nextVitals,
  ...nextTs,
  // Disable ESLint rules that conflict with Prettier.
  prettier,
  // Override default ignores of eslint-config-next.
  globalIgnores([
    // Default ignores of eslint-config-next:
    ".next/**",
    "out/**",
    "build/**",
    "next-env.d.ts",
  ]),
]);

export default eslintConfig;

.prettierrc

{
  "semi": true,
  "singleQuote": false,
  "trailingComma": "all",
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "arrowParens": "always"
}

.prettierignore

.next
out
build
node_modules

.vscode/settings.json

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

package.json（scripts 片段）

{
  "scripts": {
    "lint": "eslint",
    "lint:fix": "eslint --fix",
    "format": "prettier . --write",
    "format:check": "prettier . --check"
  }
}

常用命令（pnpm）

在项目根目录运行：

• 只检查 ESLint

pnpm lint

• ESLint 自动修复

pnpm lint:fix

• Prettier 格式化全项目

pnpm format

• Prettier 校验（CI 常用）

pnpm format:check

为什么要加 eslint-config-prettier？

Prettier 专注做格式化；ESLint 也有一些“格式类规则”。两者同时开启时经常会出现：

• Prettier 格式化后，ESLint 报错
• ESLint 修复后，Prettier 又改回去

eslint-config-prettier 的作用是：关闭与 Prettier 冲突的 ESLint 规则，让两者分工明确、不会打架。