DEV Community

Bruno Pinela
Bruno Pinela

Posted on • Edited on

2

Setup NextJs | EsLint + Prettier - Fast way 🚀

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"),
];
Enter fullscreen mode Exit fullscreen mode

then change eslintConfig:

const eslintConfig = [
  ...compat.config({
    extends: ["next/core-web-vitals", "next/typescript", "prettier"],
  }),
]
Enter fullscreen mode Exit fullscreen mode

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",
    },
  }), 
]
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

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

Image description

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more