ESLint + Prettier + Lint Staged + Husky

Installation

$ yarn add -D eslint prettier @kirill.konshin/eslint-config-next-custom husky lint-staged

PNPM

https://eslint.org/docs/latest/use/getting-started#manual-set-up

auto-install-peers=true
node-linker=hoisted

Settings

eslint.config.mjs:

import { defineConfig } from 'eslint/config';
import customConfig, { nextPlugin, includeIgnoreFile } from '@kirill.konshin/eslint-config-next-custom';

export default defineConfig([
    ...customConfig,
    {
        files: ['**/*.{js,jsx,ts,tsx}'],
        plugins: {
            next: nextPlugin,
        },
        settings: {
            next: {
                rootDir: process.cwd() + '/path/to/next-app',
            },
        },
    },
    {
        name: 'Custom rules',
        rules: {
            // overrides
        },
    },
    includeIgnoreFile(import.meta.url, '.gitignore'),
    includeIgnoreFile(import.meta.url, '.prettierignore'),
]);

.prettierrc.mjs:

import { prettier } from '@kirill.konshin/eslint-config-next-custom';
export default prettier;

or

import { prettier } from '@kirill.konshin/eslint-config-next-custom';

export default {
    ...prettier,
    // overrides
};

package.json:

{
    scripts: {
        eslint: 'eslint --fix --concurrency=auto --cache --cache-location node_modules/.cache/eslint', // to see files use --debug
        prettier: 'prettier --write --log-level=warn --ignore-path .gitignore --ignore-path .prettierignore', // to see files use --log-level=log
        'lint:all': 'yarn eslint . && yarn prettier .',
        'lint:staged': 'lint-staged',
    },
}

IDEA settings:

• Eslint: **/*.{js,jsx,ts,tsx,cjs,cts,mjs,mts,htm,html,md,mdx,vue}
• Prettier: {**/*}.{js,jsx,ts,tsx,cjs,cts,mjs,mts,htm,html,md,mdx,css,scss,sass,less,yml,yaml,json}

Lint Staged

.lintstagedrc.mjs

import { listStagedConfig } from '@kirill.konshin/eslint-config-next-custom';
export default listStagedConfig();

Husky

package.json:

{
    scripts: {
        prepare: 'husky || next types || true',
    },
}

.husky/pre-commit:

#!/bin/zsh
source ~/.zshrc # for VSCode terminal
yarn lint:staged

Issues

• ESLint 9
  • [x] https://github.com/microsoft/rushstack/issues/4635 Failed to patch ESLint because the calling module was not recognized
  • [x] https://github.com/microsoft/rushstack/issues/4965 Failed to patch ESLint because the calling module was not recognized
• ESLint 10
  • [ ] https://github.com/vercel/next.js/issues/89764 TypeError: Error while loading rule 'react/display-name': contextOrFilename.getFilename is not a function