How can I use the new ESLint flat config in a Next.js project and also use 'canonical' rules?

[ryancwalsh]

Summary

I have a TypeScript Next.js project called K that uses the built-in Next.js ESLint rules + "extends" a 3rd-party package that includes rules from Canonical, etc.

I want to:

1. Create my own 3rd-party package (using TypeScript) that consists of Next.js ESLint rules + some rules from Canonical, etc, and I want it to use the new ESLint "flat config".
2. Change my K project to use the new ESLint "flat config" and have NO rules defined locally in that project but instead important all rules from my new package.

I've read:

• https://eslint.org/blog/2022/08/new-config-system-part-2/
• https://eslint.org/docs/latest/use/configure/configuration-files-new
• https://nextjs.org/docs/pages/building-your-application/configuring/eslint

But I've still been unable to figure out what to do.

Below is my src/eslint.config.ts which I transpile to eslint.config.js.

How would you accomplish what I'm trying to do? Thanks.

Additional information

import path from 'path';
    import { fileURLToPath } from 'url';

    import { FlatCompat } from '@eslint/eslintrc';
    import typeScriptEslintPlugin from '@typescript-eslint/eslint-plugin';
    import tsParser from '@typescript-eslint/parser';
    import { type Linter } from 'eslint';
    import functional from 'eslint-plugin-functional';
    import globals from 'globals';
    // import eslintPluginImport from 'eslint-plugin-import'; // Seems unnecessary. Maybe it's included in the 'canonical'?

    // mimic CommonJS variables -- not needed if using CommonJS
    const filename = fileURLToPath(import.meta.url);
    const dirname = path.dirname(filename);

    const compat = new FlatCompat({
      baseDirectory: dirname,
    });

    const customRules = {
      '@babel/object-curly-spacing': 'off',
      'array-bracket-newline': 'off',
      'array-element-newline': 'off',
      'func-style': 'off',
      'line-comment-position': 'off',
      // https://eslint.org/docs/latest/rules/max-len
      'max-len': ['warn', { code: 150, ignoreComments: false, ignoreRegExpLiterals: true, ignoreStrings: true, ignoreTemplateLiterals: true }],

      // https://eslint.org/docs/rules/max-lines
      'max-lines': ['error', { max: 300, skipBlankLines: true, skipComments: true }],

      // https://eslint.org/docs/rules/max-lines-per-function
      'max-lines-per-function': ['error', { max: 30, skipBlankLines: true, skipComments: true }],

      // https://eslint.org/docs/latest/rules/no-console
      // 'no-console': ['error', { allow: ['warn', 'error'] }],
      'no-console': ['warn'],

      'no-inline-comments': 'off',
      'no-warning-comments': 'off',
      'object-curly-newline': 'off',
      'object-property-newline': 'off',
      'react-hooks/exhaustive-deps': [
        'warn',
        {
          additionalHooks: '(useRecoilCallback|useRecoilTransaction_UNSTABLE)', // https://recoiljs.org/docs/introduction/installation#eslint
        },
      ],
    };

    const config: Linter.Config = [
      ...compat.extends('@next/next/recommended', 'canonical/prettier'),
      // TODO: eslint rules for jest, if the Next.js rules don't handle it.
      ...compat.extends('canonical', 'canonical/prettier'),
      ...compat.extends('canonical/json', 'canonical/prettier').map((item: Linter.Config) => {
        return {
          ...item,
          files: ['*.json'],
        };
      }),
      ...compat.extends('canonical/yaml', 'canonical/prettier').map((item: Linter.Config) => {
        return {
          ...item,
          files: ['*.yaml'],
        };
      }),
      // TODO: This section seems to conflict with the `tsParser` section. What's the best way to combine them or eliminate whatever isn't necessary?
      // ...compat.extends('canonical/typescript', 'canonical/prettier').map((item: Linter.Config) => {
      //   return {
      //     ...item,
      //     files: ['*.ts'],
      //     languageOptions: {
      //       parser: tsParser, // Is there a way to find this within `item` instead of importing it separately?
      //       parserOptions: {
      //         project: './tsconfig.json',
      //       },
      //     },
      //   };
      // }),
      {
        files: ['{**/{index,_app}.tsx,next.config.js,**/eslint.config.js,**/eslint.config.ts,pages/*.tsx}'],
        rules: {
          'canonical/filename-match-exported': 'off',
        },
      },
      {
        rules: {
          'canonical/destructuring-property-newline': 'off',
          'canonical/import-specifier-newline': 'off',
          'import/extensions': [
            'error',
            {
              css: 'always',
              js: 'never',
              json: 'always',
              jsx: 'never',
              mjs: 'never',
              ts: 'never',
              tsx: 'never',
            },
          ],
          'import/no-unassigned-import': [
            'error',
            {
              allow: ['**/*.css'],
            },
          ],
          'import/order': [
            'error',
            {
              alphabetize: {
                caseInsensitive: false,
                order: 'asc',
              },
              groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
              'newlines-between': 'always',
              warnOnUnassignedImports: false,
            },
          ],
          'jsdoc/valid-types': 'off',
        },
      },
      {
        rules: {
          'import/extensions': [
            // https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/extensions.md#importextensions
            'off',
            {
              'nextauth]': 'never',
            },
          ],
        },
      },
      {
        ignores: ['.next/*'],
      },
      {
        files: ['**/*.ts', '**/*.tsx'],
        languageOptions: {
          parser: tsParser,
          parserOptions: {
            ecmaFeatures: {
              modules: true,
            },
            ecmaVersion: 'latest',
            project: './tsconfig.json',
          },
        },
        plugins: {
          '@typescript-eslint': typeScriptEslintPlugin,
          functional,
          // import: eslintPluginImport,
          ts: typeScriptEslintPlugin,
        },
        rules: {
          ...typeScriptEslintPlugin.configs['eslint-recommended'].rules,
          ...typeScriptEslintPlugin.configs.recommended.rules,
          'ts/return-await': 'error', // https://typescript-eslint.io/rules/return-await/
        },
      },
      {
        files: ['*.json'],
        rules: {
          'jsonc/sort-keys': 'off',
        },
      },
      {
        files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
        languageOptions: {
          globals: {
            ...globals.browser,
            ...globals.node,
          },
        },
        rules: {
          ...customRules,
        },
      },
    ];

    const innerConfigs: Linter.Config = Object.values(config);
    for (const innerConfig of innerConfigs) {
      console.log(innerConfig.rules);
    }

    export default config;

Example

No response

[Gritteh]

I really need an answer to this as well.

After updating eslint config to flat format, eslint needs it to be in an eslint.config.js file for eslint to be happy with the flat format.

However, next.js (when you run next lint) is looking for an eslintrc.json file, which is no longer valid with eslint flat config.

So, how do we get next to look at a different config file?? I can't find the solution to that anywhere

If we do get next to find the file, will it even be compatible with flat config?

[ernieMrtnz]

Not sure if you found an answer but Eslint has this package: @eslint/compat that can be helpful