Setup Next.js 13 ESLint & Prettier in VS Code

Follow this guide to effortlessly set up ESLint and Prettier in VS Code for your Next.js 13 project, ensuring clean and consistent code.

Setup Next.js 13 ESLint & Prettier in VS Code

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

Start run:

bash
 npm install eslint-config-standard
bash
 npm install eslint-config-standard

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

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

Run:

bash
 npm install eslint-plugin-tailwindcss
bash
 npm install eslint-plugin-tailwindcss

and add it to your .eslintrc.json file:

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

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

bash
 npm install eslint-config-prettier
bash
 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.

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

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

bash
 npm install prettier
bash
 npm install prettier

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:

typescript
 {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.addMissingImports": true
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}
typescript
 {
  "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…

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.