JS + Next + ESLint + Prettier + VSCode

JS + Next + ESLint + Prettier + VSCode.md

Quick procedure to have ESLint + Prettier + automatic VSCode lint in a Next JS app.

Next.js

yarn create next-app

Next.js comes with an ESlint.

Prettier

yarn add -D prettier eslint-plugin-prettier eslint-config-prettier

Note : eslint-config-prettier runs Prettier as an ESLint rule. eslint-config-prettier just disabled all ESLint formating rules to avoid conflicts with Prettier.

My .eslintrc.json is :

{
  "extends": [
    "next/core-web-vitals",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "trailingComma": "all",
        "semi": false,
        "printWidth": 120
      }
    ],
    "no-console": "error"
  }
}

PS : I am used to override this rules (trailing comma, semi and printWidth) but feel free to use a pure Prettier.

VScode

Install Prettier and ESlint plugin in VSCode, if not present.

Add a .vscode/settings.json

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "editor.formatOnSave": true,
    "workbench.colorCustomizations": {
        "statusBar.background": "#e563b3e1" // Change this color!
    }
}

PS : it is deliberate to not format on save, because we let ESLint (which is helped by Prettier for format concerns) takes care of it.

This should work now. 🚀

To troubleshoot :

• if you have problem, try to remove .eslintrc.json and run npx eslint --init. It will lead you to a proper configuration.
• Cmd-Shift-P : ESLint > Restart ESLint server
• Cmd-J :Output : See ESlint log
• yarn lint : to see if it works in CLI.