Setup Next.js 13 ESLint & Prettier in VS Code

1. Setup Next.js 13 ESLint

Add ESLint to your project when use npx create next-app@latest.

2. Add an ESLint Config File

Start run:

npm install eslint-config-standard

This will install the standard ESLint configuration in your project. Then, add it to your .eslintrc.json file:

{
  "extends": ["next/core-web-vitals", "standard"]
}

3. Adding an ESLint Configuration for TailwindCSS

Run:

npm install eslint-plugin-tailwindcss

and add it to your .eslintrc.json file:

{
  "extends": [
    "next/core-web-vitals",
    "standard",
    "plugin:tailwindcss/recommended"
  ]
}

4. Prettier VS ESLint potential conflicts

ESLint sometimes likes to enter into conflict with Prettier. To avoid these situations, you should run:

npm install eslint-config-prettier

This will install a package that removes all ESLint rules that could conflict with Prettier. Once installed, add “prettier” to your .eslintrc.json file.

{
  "extends": [
    "next/core-web-vitals",
    "standard",
    "plugin:tailwindcss/recommended",
    "prettier"
  ]
}

5. Install Prettier

Don’t forget to install prettier before proceeding. Run:

npm install prettier

6. Setting things up for VSCode

Now that everything is set up command-line-wise, it’s time to integrate ESLint and Prettier with VSCode. For that, we will need to modify the settings.json file or create a config specific to our project that you can share with others if you’d like. We’ll go with the latter.

In your Next.js project at the root, create a .vscode folder and within it a settings.json file with the following code:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.addMissingImports": true
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

This sets up ESlint and Prettier to work within VSCode. Every time you hit save, both Prettier and ESLint will run. But to test it in action, there’s one final thing we have to do…

7. Install ESLint and Prettier from the Extensions Marketplace

Once both are installed, restart your Visual Studio Code. Now try to edit and save some files. You should see that Prettier and ESLint are now working. To test that the Tailwind CSS plugin is also working. Try to put flex class names as the last class member and see if it is returned to the front when saving.