Next.js 项目——从入门到入门（Eslint+Prettier）

在Next.js项目中集成ESLint和Prettier，可以帮助我们维护代码风格的一致性并及时发现代码中的问题。以下是如何配置的步骤和示例代码：

1. 安装必要的包：

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

2. 创建.eslintrc.js或.eslintrc.json文件，并添加以下配置：

{
  "extends": ["react-app", "react-app/jest", "prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

3. 在项目根目录下创建.prettierrc文件，并添加以下配置（根据需要自定义）：

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

4. 在package.json中添加lint脚本：

{
  "scripts": {
    "lint": "eslint --ext .js,.jsx,.ts,.tsx ."
  }
}

5. 运行lint检查：

npm run lint

这样就配置了ESLint和Prettier，它们会在你运行lint脚本时检查代码质量和格式问题。在IDE或文本编辑器中也可以配置保存时自动格式化功能，例如在Visual Studio Code中安装eslint和prettier插件，并在设置中添加以下配置：

{
  "editor.formatOnSave": true
}

这样每次保存文件时，都会自动运行ESLint和Prettier进行格式化和代码质量检查。