Setup NextJs | EsLint + Prettier - Fast way 🚀

Bruno Pinela — Thu, 16 Jan 2025 20:28:30 +0000

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!

DEV Community: Bruno Pinela

Setup NextJs | EsLint + Prettier - Fast way 🚀