How to add Prettier and ESLint to your Next.js app

Alright, one of the first things I usually install in my pet project is Prettier and ESLint.

ESLint

First things first, lets start with ESLint. To install open your project folder and run:

npm install eslint @typescript-eslint/parser  @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y --save-dev

What are those packages?

eslint is the main ESLint package

@typescript-eslint/parser will allow ESLint to parse TypeScript files

@typescript-eslint/eslint-plugin will add TypeScript specific lint rules

eslint-plugin-react will add React specific lint rules

eslint-plugin-react-hooks will extend eslint-plugin-react to add React Hooks rules

eslint-plugin-jsx-a11y will add accessibility related rules

To configure ESLint we need to create a .eslintrc.js file:

touch .eslintrc.js

This is the configuration we'll be using:

module.exports = {
  root: true,
  env: {
    node: true,
    es6: true,
  },
  parserOptions: { ecmaVersion: 8 },
  ignorePatterns: ['node_modules/*', '.next/*', '.out/*', '!.prettierrc.js'],
  extends: ['eslint:recommended'],
  overrides: [
    {
      files: ['**/*.ts', '**/*.tsx'],
      parser: '@typescript-eslint/parser',
      settings: { react: { version: 'detect' } },
      env: {
        browser: true,
        node: true,
        es6: true,
      },
      extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:react/recommended',
        'plugin:react-hooks/recommended',
        'plugin:jsx-a11y/recommended',
      ],
      rules: {
        'react/prop-types': 'off',
        'react/react-in-jsx-scope': 'off',
        'jsx-a11y/anchor-is-valid': 'off',
        '@typescript-eslint/no-unused-vars': ['error'],
        '@typescript-eslint/explicit-function-return-type': [
          'warn',
          {
            allowExpressions: true,
            allowConciseArrowFunctionExpressionsStartingWithVoid: true,
          },
        ],
      },
    },
  ],
}

Prettier

To install Prettier run:

npm install prettier eslint-plugin-prettier eslint-config-prettier --save-dev

To configure Prettier is easier than ESLint, we still need to create a file to be able to configure it:

touch .prettierrc.js

Our configuration will look like:

module.exports = {
  semi: false,
  trailingComma: 'es5',
  singleQuote: true,
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  jsxBracketSameLine: false,
  bracketSpacing: true,
}

I advice you take a look at Prettier options.

ESLint + Prettier

Lets configure ESLint and Prettier together, open .eslintrc.js and update both the extends and rules options:

module.exports = {
  // ...
  overrides: [
    {
      // ...
      extends: [
        // ...
        'prettier/@typescript-eslint',
        'plugin:prettier/recommended',
      ],
      rules: {
        // ...
        'prettier/prettier': ['error', {}, { usePrettierrc: true }],
      },
    },
  ],
}

VSCode

The beauty of this is this one, create a file for settings.json inside a .vscode folder:

touch .vscode/settings.json

And put this in it:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true
}

Now when saving it should auto-format your files according with the rules we previously set. If you want you can check the whole code in this repo.

That's it ✌🏻