This content originally appeared on DEV Community and was authored by Bruno Pinela
First of all, lets create a nextJs application:
npx create-next-app@latest
Then add this package to set prettier configuration for eslint to avoid conflicts between eslint and prettier
npm install --save-dev eslint-config-prettier
On eslint.config.mjs file at your project root add "prettier" at eslintConfig extends:
const eslintConfig = [
...compat.extends("next/core-web-vitals", "next/typescript", "prettier"),
];
then change eslintConfig:
const eslintConfig = [
...compat.config({
extends: ["next/core-web-vitals", "next/typescript", "prettier"],
}),
]
The idea is make it able to you can add your specific rules like
const eslintConfig = [
...compat.config({
extends: ["next/core-web-vitals", "next/typescript", "prettier"],
rules: {
"react/react-in-jsx-scope": "off",
},
}),
]
Now that you setup all eslint configuration lets make all the prettier formatters works, creating a .prettierrc file at project root and add:
{
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"printWidth": 80,
"trailingComma": "es5"
}
NOTE: HERE I ADDED MY PERSONAL CHOICE OF PRETTIER CONFIGURATION, BUT YOU CAN ADD YOURS, FOLLOWING PRETTIER DOCUMENTATION (https://prettier.io/docs/en/options.html)
Now everything is up!
But to it works fine, make sure you have ESlint and Prettier extensions installed on your VsCode
Also, VsCode offers to you some ways to auto format your code and apply all your rules on save action for example
You can just create a .vscode folder at project root and inside of it a settings.json file
with the following content:
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "always",
"source.removeUnusedImports": "always"
}
}
And again, VsCode has a lot of options of settings
you can take a look here: https://code.visualstudio.com/docs/getstarted/settings
For now, that is it guys :)
Hope I could help you!
If you have any suggestions for improving this article or know a better way to approach it, feel free to share your thoughts in the comments.
Cya!
This content originally appeared on DEV Community and was authored by Bruno Pinela
Bruno Pinela | Sciencx (2025-01-16T20:28:30+00:00) Setup NextJs | EsLint + Prettier – Fast way 🚀. Retrieved from https://www.scien.cx/2025/01/16/setup-nextjs-eslint-prettier-fast-way-%f0%9f%9a%80/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.