使用 ESLint + Prettier + Tailwind CSS 设置 Next.js 14 项目
要设置一个包含 ESLint 和 Prettier 的 Next.js 13 项目，您可以按照以下步骤操作：
步骤 1：创建一个 Next.js 项目
npx create-next-app my-nextjs-app
将 my-nextjs-app 替换为您的项目名称。
步骤 2：安装 ESLint 和 Prettier
导航至您的项目目录并安装 ESLint、Prettier 和所需的插件：
cd my-nextjs-app
npm install --save-dev eslint prettier eslint-plugin-react eslint-config-prettier eslint-plugin-prettier prettier-plugin-tailwindcss
步骤 3：创建 ESLint 配置
在项目根目录下创建一个名为 .eslintrc.js 的 ESLint 配置文件：
module.exports = {
extends: ['next', 'next/core-web-vitals', 'eslint:recommended', 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
plugins: ['react', '@typescript-eslint'],
parserOptions: {
ecmaVersion: 2021,
sourceType: 'module',
},
rules: {
// Add your custom ESLint rules here
},
};
步骤 4：创建 Prettier 配置
在项目根目录下创建一个名为.prettierrc.js的 Prettier 配置文件：
module.exports = {
semi: true,
trailingComma: 'all',
singleQuote: true,
printWidth: 100,
tabWidth: 2,
plugins: ["prettier-plugin-tailwindcss"],
};
步骤 5：配置 VSCode（可选）
如果您使用的是 Visual Studio Code，您可以安装 ESLint 和 Prettier 扩展程序来实现自动代码检查和格式化。
步骤 6：将脚本添加到 package.json 文件中
将以下脚本添加到您的package.json文件中：
"scripts": {
"lint": "eslint .",
"format": "prettier --write ."
}
步骤 7：运行 ESLint 和 Prettier
npm run lint # Run ESLint
npm run format # Format code with Prettier