ESLint

Many modern frameworks like Next.js already have built-in ESLint support. In case you would like to set it up manually though, here are the steps:

Terminal


npm init @eslint/config

Follow the wizard to configure ESLint to your needs. After that you can fix your project with:

Terminal


npx eslint . --fix

ESLint & Prettier

While ESLint takes care of your code style, Prettier takes care of your code formatting. Combine them to get the best of both worlds:

Terminal


npm install -D prettier eslint-config-prettier eslint-plugin-prettier

Next, extend your ESLint config:

.eslintrc.json


{
  "extends": ["eslint:recommended", "plugin:prettier/recommended"]
}

Finally, add a .prettierrc.json to your project if you haven't done already:

.prettierrc.json


{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

ESLint & VS Code

For even more powerful features, install the ESLint VS Code Extension.

You should also add the following to your VS Code settings:

.vscode/settings.json


{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Getting Started Guide

Next.js ESLint Docs

ESLint VS Code Extension

Read the docs

Github Issues

Github Discussions

Ask a developer

ESLint & Prettier

ESLint & VS Code