Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aridanpantoja/eslint-prettier-nextjs
Comprehensive guide for integrating ESLint and Prettier into a Next.js project
https://github.com/aridanpantoja/eslint-prettier-nextjs
eslint nextjs prettier prettier-eslint prettier-plugin-tailwindcss react tailwindcss
Last synced: 19 days ago
JSON representation
Comprehensive guide for integrating ESLint and Prettier into a Next.js project
- Host: GitHub
- URL: https://github.com/aridanpantoja/eslint-prettier-nextjs
- Owner: aridanpantoja
- License: mit
- Created: 2024-10-27T01:13:05.000Z (19 days ago)
- Default Branch: main
- Last Pushed: 2024-10-27T03:12:04.000Z (19 days ago)
- Last Synced: 2024-10-27T03:24:40.119Z (19 days ago)
- Topics: eslint, nextjs, prettier, prettier-eslint, prettier-plugin-tailwindcss, react, tailwindcss
- Homepage:
- Size: 5.86 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
ESLint + Prettier Setup for Next.js 💻
This repository provides a comprehensive guide for integrating ESLint and Prettier into a Next.js project with TailwindCSS.
Read this in other languages: Português
Project Overview 📋
This repository provides a setup for integrating ESLint and Prettier into your Next.js project with TailwindCSS.
- **ESLint**: Analyzes JavaScript/TypeScript code for potential issues and enforces best practices.
- **Prettier**: Formats code for consistent styling.
- **TailwindCSS Support**: Integrates `prettier-plugin-tailwindcss` to organize TailwindCSS classes.
Getting Started
To get started with this project, follow the steps below:
### Prerequisites
Ensure you have the following:
- **Node.js**: Download from [nodejs.org](https://nodejs.org/).
- **npm** or **yarn**: Comes with Node.js; for yarn, visit [yarnpkg.com](https://yarnpkg.com/).
- **Next.js Project**: Create a new project with the command: `npx create-next-app@latest my-next-app` or `yarn create next-app my-next-app`
- When prompted, choose `Yes` for using ESLint.
> If you're not using TailwindCSS, you can skip installing `prettier-plugin-tailwindcss` and remove it from your `.prettierrc.json` file.
#### 1. Install Required Dependencies
Using npm:
```bash
npm install -D eslint-config-prettier eslint-plugin-jsx-a11y eslint-plugin-prettier prettier-plugin-tailwindcss
```
Using yarn:
```bash
yarn add --dev eslint-config-prettier eslint-plugin-jsx-a11y eslint-plugin-prettier prettier-plugin-tailwindcss
```
#### 2. Configure ESLint and Prettier
After installing the dependencies, create or update your `.eslintrc.json` file with the following configuration:
```json
{
"extends": [
"next/core-web-vitals",
"next/typescript",
"plugin:prettier/recommended",
"plugin:jsx-a11y/recommended"
],
"plugins": ["prettier", "jsx-a11y"],
"rules": {
"prettier/prettier": "error",
"react/react-in-jsx-scope": "off",
"jsx-a11y/alt-text": "warn",
"jsx-a11y/aria-props": "warn",
"jsx-a11y/aria-proptypes": "warn",
"jsx-a11y/aria-unsupported-elements": "warn",
"jsx-a11y/role-has-required-aria-props": "warn",
"jsx-a11y/role-supports-aria-props": "warn"
}
}
```
Next, create a `.prettierrc.json` file to customize your Prettier settings, if desired:
```json
{
"trailingComma": "all",
"semi": false,
"tabWidth": 2,
"singleQuote": true,
"printWidth": 80,
"endOfLine": "auto",
"arrowParens": "always",
"plugins": ["prettier-plugin-tailwindcss"]
}
```
If you're not using TailwindCSS, your configuration should be as follows:
```json
{
"trailingComma": "all",
"semi": false,
"tabWidth": 2,
"singleQuote": true,
"printWidth": 80,
"endOfLine": "auto",
"arrowParens": "always"
}
```
#### 3. Configure VSCode for AutoFix
To enable automatic code fixes on save in Visual Studio Code, add the following setting to your `settings.json`:
```json
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "always",
}
```
Contribute 🚀
If you want to contribute, clone this repo, create your work branch and get your hands dirty!
```bash
git clone https://github.com/aridanpantoja/eslint-prettier-nextjs.git
```
```bash
git checkout -b feature/NAME
```
At the end, open a Pull Request explaining the problem solved or feature made, if exists, append screenshot of visual modifications and wait for the review!
### Documentations that might help
[📝 How to create a Pull Request](https://www.atlassian.com/br/git/tutorials/making-a-pull-request) |
[💾 Commit pattern](https://gist.github.com/joshbuchea/6f47e86d2510bce28f8e7f42ae84c716)
License 📃
This project is under [MIT](./LICENSE) license