To set up a Next.js 13 project with ESLint and Prettier, you can follow these steps:
Step 1: Create a Next.js Project
Replace my-nextjs-app with the name of your project.
Step 2: Install ESLint and Prettier
Navigate to your project directory and install ESLint, Prettier, and required plugins:
npm install –save-dev eslint prettier eslint-plugin-react eslint-config-prettier eslint-plugin-prettier prettier-plugin-tailwindcss
Step 3: Create ESLint Configuration
Create an ESLint configuration file named .eslintrc.js in your project root:
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
},
};
Step 4: Create Prettier Configuration
Create a Prettier configuration file named .prettierrc.js in your project root:
semi: true,
trailingComma: ‘all’,
singleQuote: true,
printWidth: 100,
tabWidth: 2,
plugins: [“prettier-plugin-tailwindcss”],
};
Step 5: Configure VSCode (Optional)
If you’re using Visual Studio Code, you can install the ESLint and Prettier extensions for automatic linting and formatting.
Step 6: Add Scripts to package.json
Add the following scripts to your package.json file:
“lint”: “eslint .”,
“format”: “prettier –write .”
}
Step 7: Run ESLint and Prettier
npm run format # Format code with Prettier
