🧑‍💻 用 Next.js 打造全栈项目的 ESLint + Prettier 配置指南

------一场前端代码世界里的"格式战争"

朋友，当你第一次打开一份没有格式化的代码时，你是否有过这种感受：

"这是谁写的谜语？" 🤯

缩进有的四格，有的两格；引号时而单引号，时而双引号；末尾分号呢？消失了！

这种凌乱的代码，就像排队打饭时有人突然插队。

所以，我们登场的两大守护者就是：

ESLint 🕵️‍♀️：代码的警察，负责抓你写的不规范、不安全、不优雅的语句。
Prettier 💅：代码造型师，负责帮你烫头、剪刘海，让整个团队的代码风格统一大方。

今天我将带你在 Next.js 全栈项目 中，把这两个"护法"配齐，并打造一套 无缝衔接 的开发体验。

🎬 第一步：新建项目，铺好舞台

假设你电脑上已经有 Node.js（至少 18 版本）和 npm/yarn/pnpm。

创建 Next.js 项目：

perl 复制代码

npx create-next-app@latest my-app
cd my-app

启动看看项目能否跑通：

arduino 复制代码

npm run dev

👉 打开浏览器 http://localhost:3000，确认你能看到 Next.js 的欢迎界面。

🔧 第二步：登场，安装 ESLint + Prettier

项目创建的时候，Next.js 默认就会把 ESLint 带上。如果你不确定，可以再来一次：

css 复制代码

npm install eslint --save-dev

接着安装 Prettier，以及让它们和谐共处的插件：

arduino 复制代码

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

小插曲 🎭：

ESLint 和 Prettier 的关系，好比两位性格强烈的室友：

ESLint：我希望他把碗洗了，垃圾倒掉！

Prettier：我希望房间整齐，有花有香。
中间可能会吵架，我们得当调解员 ➡️ 这就是 eslint-config-prettier 和 eslint-plugin-prettier 的职责。

📜 第三步：配置 ESLint

在项目根目录创建或修改 .eslintrc.json：

json 复制代码

{
  "extends": [
    "next/core-web-vitals",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "no-unused-vars": "warn",
    "semi": ["error", "always"],
    "quotes": ["error", "single"]
  }
}

解释一下：

next/core-web-vitals：Next.js 官方提供的最佳实践规则。
plugin:prettier/recommended：平息 ESLint 与 Prettier 的矛盾，统一裁判。
rules：你可以根据团队习惯写上自己的小脾气。比如：
- no-unused-vars: 警告没用到的变量。
- semi: 语句结尾必须加分号。
- quotes: 强制用单引号，因为双引号太浮夸。

🎨 第四步：配置 Prettier

在根目录创建 .prettierrc：

json 复制代码

{
  "singleQuote": true,
  "semi": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "tabWidth": 2
}

这就像给理发师下单：

singleQuote: 单引号我最酷。
semi: 每句话都要有句号，不然不完整。
trailingComma: 多行对象结尾加个逗号，看起来更简洁。
printWidth: 超过 80 字符换行，不要让你的代码横跨太平洋。
tabWidth: 两格缩进，既清晰又省空间。

⌨️ 第五步：让它自动跑起来

在 package.json 增加两条命令：

json 复制代码

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

这样你就可以：

npm run lint 🔎 检查代码有没有犯错。
npm run format 💇 一键帮代码梳成帅哥型。

⚡ 第六步：编辑器集成（VS Code 党必看）

在 VS Code 中安装插件：

ESLint ✔️
Prettier - Code formatter ✔️

然后到 .vscode/settings.json（没有就自己建）：

json 复制代码

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

从此以后，你只要保存文件，Prettier 就会拍拍你肩膀说：

"放松，我都帮你整理好了～" 😎

✨ 最终效果

当你写下这样一段狼藉代码：

arduino 复制代码

const hello="world"
console.log("hello", hello)

保存后，它会被自动梳理为：

ini 复制代码

const hello = 'world';
console.log('hello', hello);

整齐划一，如同阅兵方阵。

再也不用团队会议上互相吐槽 "你怎么又忘记分号了！" 🚫

🎭 彩蛋：ESLint 和 Prettier 的段子

ESLint：你变量没用！
Prettier：你排版不行！
代码：哎，别吵了，你们合体才是最强 🦸。

配置好这一整套，你的 Next.js 全栈项目就像有了自动清洁工和造型师，既干净又好看。

📌 总结

安装 ESLint、Prettier、相关插件。
配置 .eslintrc.json 调整规则。
创建 .prettierrc 定义风格。
在 package.json 中添加脚本。
编辑器集成自动保存格式化。

至此，你的团队就能：

保持代码风格统一 🧹
避免低级错误 🛡️
解放大脑，专注业务开发 🚀