EsLint, Prettier, Next


Uncategorized

Updated Aug 27th, 2021

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”

Conformance

As great as Built-in Linting with NextJs right out of the box. Only runs on build. Can run manually by adding a “lint” script that triggers “next lint” to the package.json file. Use a tool called “husky” to automate, add linting rules any time you try to commit. Automate not only linting, but fixing some of these problems.


Top