Setting up a clean and consistent codebase is crucial for any Next.js project. Utilizing tools like Prettier and ESLint ensures your code is well-formatted and adheres to specified rules, making collaboration smoother and improving code quality.
This blog post guides you through integrating Prettier and ESLint into your Next.js 13 project, answering common questions, and providing practical steps and code snippets.
Prettier and ESLint serve different purposes. Prettier focuses on code formatting, while ESLint enforces coding standards and catches syntax errors. Combining both allows you to maintain a clean, error-free codebase, enhancing your development workflow.
Prettier: Automatically formats your code to improve readability.
ESLint: Ensures your code follows specific rules and catches potential errors.
First, let's set up Prettier in your Next.js project. This involves installing the necessary packages and configuring the prettier configuration file.
Run the following command to install Prettier as a development dependency:
1npm install --save-dev prettier
Create a .prettierrc file in the root of your project:
1{ 2 "semi": true, 3 "singleQuote": true, 4 "printWidth": 80, 5 "trailingComma": "es5" 6}
If you use Visual Studio Code, you can configure it to use Prettier automatically. Add the following settings to your settings.json:
1{ 2 "editor.formatOnSave": true, 3 "[javascript]": { 4 "editor.defaultFormatter": "esbenp.prettier-vscode" 5 }, 6 "[typescript]": { 7 "editor.defaultFormatter": "esbenp.prettier-vscode" 8 } 9}
Next, let's configure ESLint. The process involves installing ESLint, configuring the ESLint configuration file, and integrating it with Prettier.
Run the following command to install eslint:
1npm install --save-dev eslint
Create a .eslintrc.json file in the root of your project:
1{ 2 "env": { 3 "browser": true, 4 "es2021": true 5 }, 6 "extends": [ 7 "eslint:recommended", 8 "plugin:@next/next/recommended", 9 "plugin:prettier/recommended" 10 ], 11 "parserOptions": { 12 "ecmaFeatures": { 13 "jsx": true 14 }, 15 "ecmaVersion": 12, 16 "sourceType": "module" 17 }, 18 "rules": { 19 "prettier/prettier": ["error", { "endOfLine": "auto" }], 20 "react/react-in-jsx-scope": "off" 21 } 22}
To ensure Prettier and ESLint work together seamlessly, install the following plugins:
1npm install --save-dev eslint-plugin-prettier eslint-config-prettier
Update your .eslintrc.json to include Prettier configurations:
1{ 2 "extends": [ 3 "eslint:recommended", 4 "plugin:@next/next/recommended", 5 "plugin:prettier/recommended" 6 ], 7 "plugins": ["prettier"], 8 "rules": { 9 "prettier/prettier": ["error"] 10 } 11}
Add the following script to your package.json:
1"scripts": { 2 "lint": "eslint . --fix" 3}
Now, you can run ESLint with the following command:
1npm run lint
To ensure your code is linted and formatted before each commit, set up a pre-commit hook using lint-staged and husky.
1npm install --save-dev husky lint-staged
Add the following configuration to your package.json:
1"husky": { 2 "hooks": { 3 "pre-commit": "lint-staged" 4 } 5}, 6"lint-staged": { 7 "*.js": [ 8 "eslint --fix", 9 "prettier --write" 10 ], 11 "*.ts": [ 12 "eslint --fix", 13 "prettier --write" 14 ], 15 "*.jsx": [ 16 "eslint --fix", 17 "prettier --write" 18 ], 19 "*.tsx": [ 20 "eslint --fix", 21 "prettier --write" 22 ] 23}
To ensure your Tailwind CSS classes are sorted automatically, use the prettier-plugin-tailwindcss.
1npm install --save-dev prettier-plugin-tailwindcss
Add the prettier-plugin-tailwindcss to your .prettierrc:
1{ 2 "plugins": ["prettier-plugin-tailwindcss"] 3}
This plugin will automatically sort tailwind classes, ensuring a consistent order.
Next Core Web Vitals are metrics essential for a smooth user experience, focusing on performance, responsiveness, and visual stability. Using ESLint and Prettier helps you adhere to best practices, indirectly improving these vital metrics.
Integrating Prettier and ESLint in your Next.js project ensures a clean, maintainable, and error-free codebase. By following the steps outlined in this blog post, you can set up a robust development environment, leveraging the power of both tools. Happy coding!
Remember, combining Prettier and ESLint in your Next.js 13 project is not just about adhering to standards but also about creating a seamless development experience. With the proper configuration, your code will be cleaner, more consistent, and ready for any collaboration or scaling needs.
Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!
You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.