Overview

From Vercel here

Bruno Antunes Video that walks through testing configuration with NextJS also has a section on ESLint that cleared a lot of things up. Here are the notes to that video (and a link to the video).

I avoided using ESLint for a while but Bruno’s video made it clear the importance and also how to disable rules and work nicely with Next JS and prettier.

Use Prettier for formatting and linters for catching bugs.

Rules from DevAsLife

I saw this video and was interested in his setup and the rules he tweaked.

In the “package.json” file,

"prettier":"prettier -write ."

In the “eslintrc.json” file:

"rules": {
  "no-unused-vars": {
    "error",
      {
        "argsIgnorePattern":"^_",
        "varsIgnorePattern":"^_"
      }
  }
}

In the “prettier.config.js” file:

const options = {
  arrowParens: "avoid",
  singleQuote: true,
  bracketSpacing: true,
  endOfLine: "lf",
  semi: false,
  tabWidth: 2,
  trailingComma: "none",
}

module.exports = options

In the “.prettierignore” file:

node_modules
.next

Note: I also saw the following rules in .pretterrc file in tr.com v6.0

{
  "arrowParens": "always",
  "bracketSpacing": true,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false
}

ESLint

Downloaded VSCode Extension by Microsoft (20m downloads)

Prettier

Homepage here. Kevin Powell video here.

Opinionated. What does this mean? Well from the docs, “Prettier is not a kitchen-sink code formatter that attempts to print your code in any way you wish. It is opinionated. By far the biggest reason for adopting Prettier is to stop all the ongoing debates over styles.”

May Want to install not only the Prettier extension but the “Prettier ESLint” extension by Rebecca Vest so they work well together.

If you need project-specific settings you can do so a bunch of different ways and the method you choose will effect precedence (a “.prettierrc” file has precedence over a “prettier.config.js” file).

Warning on Next Build With Colby F. Headless WP Starter

“No ESLint configuration detected. Run next lint to begin setup” Error on build, something to do with prettier, and Eslint. Bang head against the wall here.

In the “prettierrc.js” file

module.exports = {
  singleQuote: true,
  printWidth: 120,
  overrides: [
    {
      files: '*.scss',
      options: {
        singleQuote: false,
      },
    },
  ],
};

In the “eslintrc.js” file:

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:prettier/recommended',
    'plugin:@next/next/recommended',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react', 'react-hooks'],
  rules: {
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',
    'react/prop-types': 'off',
    'react/react-in-jsx-scope': 'off',
    '@next/next/no-img-element': 'off',
  },
};

Link in terminal/console after errors here.

From that page, “Usage with Prettier – ESLint also contains code formatting rules, which can conflict with your existing Prettier setup. We recommend including eslint-config-prettier in your ESLint config to make ESLint and Prettier work together.”

{
  "extends": ["next", "prettier"]
}

Deleting all prettier and ESLint files did the trick and I was able to build. Clearly not the answer but it worked. Opening the index.html file it looks like the site is broken but this is normal. Need to test on a server using next command or just deploy to basic hosting.

I re-cloned the “next-wordpress-starter” and the issue still happens on build. Adding the “.vscode/settings.json” file did not fix the issue.

Skip ESLint on Next Build

Read how to do this in the docs here.

Config ESLint and Prettier Together

ESLint also contains code formatting rules, which can conflict with your existing Prettier setup. We recommend including eslint-config-prettier in your ESLint config to make ESLint and Prettier work together.

See docs here.

Colby Fayock Video “Automatic Next.js Code Linting with ESLint & Husky Git Hooks”

Video here. Similar one here.

Conformance added in Next 11. Includes linting built-in out of the box.

As great as Built-in Linting with Next JS is right out of the box, it only runs on build. Can run manually by adding a “lint” script that triggers “next lint” to the “package.json” file. But you need to remember to do that.

Alternatively we could use a tool called “husky” to automate the linting process any time you try to commit. Automate not only linting, but ESLint can also fix some of these problems automagically.