在 VS Code 中配置 Next.js 13 的 ESLint 与 Prettier

1. 配置 Next.js 13 的 ESLint

使用 npx create next-app@latest 创建项目时，选择添加 ESLint。

2. 添加 ESLint 配置文件

先运行：

npm install eslint-config-standard

这会在项目中安装 standard 风格的 ESLint 配置。然后把它添加到 .eslintrc.json 文件中：

{
  "extends": ["next/core-web-vitals", "standard"]
}

3. 为 TailwindCSS 添加 ESLint 配置

运行：

npm install eslint-plugin-tailwindcss

然后把它添加到 .eslintrc.json 文件中：

{
  "extends": [
    "next/core-web-vitals",
    "standard",
    "plugin:tailwindcss/recommended"
  ]
}

4. Prettier 与 ESLint 的潜在冲突

ESLint 有时会和 Prettier 发生冲突。为了避免这种情况，你需要运行：

npm install eslint-config-prettier

这个包会关闭所有可能与 Prettier 冲突的 ESLint 规则。安装完成后，把 "prettier" 添加到 .eslintrc.json 文件中。

{
  "extends": [
    "next/core-web-vitals",
    "standard",
    "plugin:tailwindcss/recommended",
    "prettier"
  ]
}

5. 安装 Prettier

继续之前别忘了安装 Prettier。运行：

npm install prettier

6. 配置 VSCode

命令行层面的配置都完成了，接下来把 ESLint 和 Prettier 集成到 VSCode 中。为此，我们需要修改 settings.json 文件，或者为项目单独创建一份配置，这样还可以方便地分享给其他人。这里我们采用后一种方式。

在 Next.js 项目的根目录下创建一个 .vscode 文件夹，并在其中新建一个 settings.json 文件，写入以下代码：

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

这样 ESLint 和 Prettier 就能在 VSCode 中协同工作了。每次保存文件时，Prettier 和 ESLint 都会自动运行。不过想真正看到效果，还剩最后一步……

7. 从扩展市场安装 ESLint 和 Prettier

两个扩展都装好之后，重启 Visual Studio Code。现在试着编辑并保存一些文件，你应该能看到 Prettier 和 ESLint 已经生效了。要验证 Tailwind CSS 插件是否也在正常工作，可以把 flex 类名放到类名列表的最后，保存后看它是否被自动排回前面。