supprt eslint 9

[trixobird]

Hi, I am getting a lot of depedency warnings now that eslint has released 9. Do you have plans to support this in the near future? Is there way to use this style-guide in the new flat hierarchy of eslint that has no extends any more?

[andy-checkd]

There is a package to help use plugins that aren't configured to work with ESLint v9 found here. But because the rules in the style guides themselves are deeply nested, I've been unable to get them to work with any confidence that they are being applied.

Hopefully this will help someone else have more luck

[fredericrous]

if vercel/style-guide wants to keep eslint-plugin-jsx-a11y, we need it to support v9 too. jsx-eslint/eslint-plugin-jsx-a11y#978 there might be other dependencies like that. I haven't checked passed this one

[trixobird]

@andy-checkd did you manage to make any progress with the @eslint/compat I tried this:

import {resolve} from "node:path";
import { fixupRule, fixupConfigRules, fixupPluginRules } from "@eslint/compat";
import vercelNode from "@vercel/style-guide/eslint/node";
import vercelTypescript from "@vercel/style-guide/eslint/typescript";

const project = resolve(process.cwd(), "tsconfig.json");

export default [
  ...fixupConfigRules(vercelTypescript),
  // vercelNode,
  vercelTypescript,
  {
    languageOptions: {
      parserOptions: {
        project,
      },
      globals: {
        React: true,
        JSX: true,
      },
    },
    settings: {
      "import/resolver": {
        typescript: {
          project,
        },
      },
    },
    ignores: ["node_modules/", "dist/"],
  }
];

But I am getting the same erro with and without using fixupConfigRules

[rherwig]

I was able to get it to work using the @eslint/eslintrc package and its FlatCompat utility. The relevant part in the sample below is the use of this utility.

// eslint.config.js
// @ts-check
import js from "@eslint/js";
import ts from "typescript-eslint";
import prettier from 'eslint-config-prettier';
import { FlatCompat } from "@eslint/eslintrc";
import vercelNext from '@vercel/style-guide/eslint/next';

const compat = new FlatCompat();

export default ts.config(
    js.configs.recommended,
    ...ts.configs.recommended,
    ...compat.config(vercelNext), // <--
    prettier,
);

Please note that I did not extensively test this. This is a minimal example I found to work in my mono-repo (scaffolded via turborepo).

For reference, I used these package versions (knowing they have peer dep issues):

"@eslint/js": "9.6.0",
"@eslint/eslintrc": "3.1.0",
"@vercel/style-guide": "6.0.0",
"eslint": "9.6.0",
"eslint-config-prettier": "9.1.0",
"typescript-eslint": "8.0.0-alpha.39",
"typescript": "5.5.3"

[yamcodes]

@rherwig:

I was able to get it to work using the @eslint/eslintrc package and its FlatCompat utility. The relevant part in the sample below is the use of this utility.

// eslint.config.js
// @ts-check
import js from "@eslint/js";
import ts from "typescript-eslint";
import prettier from 'eslint-config-prettier';
import { FlatCompat } from "@eslint/eslintrc";
import vercelNext from '@vercel/style-guide/eslint/next';

const compat = new FlatCompat();

export default ts.config(
    js.configs.recommended,
    ...ts.configs.recommended,
    ...compat.config(vercelNext), // <--
    prettier,
);

Please note that I did not extensively test this. This is a minimal example I found to work in my mono-repo (scaffolded via turborepo).

For reference, I used these package versions (knowing they have peer dep issues):

"@eslint/js": "9.6.0",
"@eslint/eslintrc": "3.1.0",
"@vercel/style-guide": "6.0.0",
"eslint": "9.6.0",
"eslint-config-prettier": "9.1.0",
"typescript-eslint": "8.0.0-alpha.39",
"typescript": "5.5.3"

This worked for import vercelNode from '@vercel/style-guide/eslint/node';, but not for import vercelTypescript from '@vercel/style-guide/eslint/typescript';:

  server:lint | 
  server:lint | Oops! Something went wrong! :(
  server:lint | 
  server:lint | ESLint: 9.9.0
  server:lint | 
  server:lint | ConfigError: Config (unnamed): Key "plugins": Cannot redefine plugin "@typescript-eslint".
  server:lint |     at rethrowConfigError (/Users/yamcodes/code/graphql-playground/node_modules/@eslint/config-array/dist/cjs/index.cjs:303:8)
  server:lint |     at /Users/yamcodes/code/graphql-playground/node_modules/@eslint/config-array/dist/cjs/index.cjs:1098:5
  server:lint |     at Array.reduce (<anonymous>)
  server:lint |     at FlatConfigArray.getConfigWithStatus (/Users/yamcodes/code/graphql-playground/node_modules/@eslint/config-array/dist/cjs/index.cjs:1091:43)
  server:lint |     at FlatConfigArray.getConfig (/Users/yamcodes/code/graphql-playground/node_modules/@eslint/config-array/dist/cjs/index.cjs:1120:15)
  server:lint |     at /Users/yamcodes/code/graphql-playground/node_modules/eslint/lib/eslint/eslint-helpers.js:346:56
  server:lint |     at Array.reduce (<anonymous>)
  server:lint |     at /Users/yamcodes/code/graphql-playground/node_modules/eslint/lib/eslint/eslint-helpers.js:333:36
  server:lint |     at /Users/yamcodes/code/graphql-playground/node_modules/eslint/lib/eslint/eslint-helpers.js:296:32
  server:lint |     at Object.isAppliedFilter (/Users/yamcodes/code/graphql-playground/node_modules/@nodelib/fs.walk/out/readers/common.js:12:31)
▪▪▪▪ server:lint (961ms, a32fada6)
Error: task_runner::run_failed

  × Task server:lint failed to run.
  ╰─▶ Process eslint failed: exit code 2

---

Edit:
I was able to resolve this by removing the ...ts.configs.recommended line from my export, whereas ts is the import import ts from 'typescript-eslint';.

[trixobird]

hi @yamcodes I tried your suggestion, but didn't work for me

import vercelNode from '@vercel/style-guide/eslint/node';
import js from '@eslint/js';
import ts from 'typescript-eslint';
import prettier from 'eslint-config-prettier';
import { FlatCompat } from '@eslint/eslintrc';

const compat = new FlatCompat({ recommendedConfig: {} });

export default ts.config(
  js.configs.recommended,
  ...ts.configs.recommended,
  ...compat.config(vercelNode), // <--
  prettier,
);

  "devDependencies": {
    "eslint-config-turbo": "^2.0.12",
    "@eslint/js": "9.6.0",
    "@eslint/eslintrc": "3.1.0",
    "@vercel/style-guide": "6.0.0",
    "eslint": "9.6.0",
    "eslint-config-prettier": "9.1.0",
    "typescript-eslint": "8.0.0-alpha.39",
    "typescript": "5.5.3"
  }

I am getting

Oops! Something went wrong! :(

ESLint: 9.6.0

TypeError: context.getScope is not a function
...

Did you encouter this by any chance?

[yamcodes]

Hey @trixobird , I've managed to fix my errors using this structure:

eslint.config.js

import { resolve, dirname } from 'node:path';
import { fileURLToPath } from 'node:url';
import js from '@eslint/js';
import ts from 'typescript-eslint';
import { FlatCompat } from '@eslint/eslintrc';
import { includeIgnoreFile, fixupConfigRules } from '@eslint/compat';
import vercelNode from '@vercel/style-guide/eslint/node';
import vercelTypeScript from '@vercel/style-guide/eslint/typescript';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const compat = new FlatCompat({
  baseDirectory: __dirname,
  recommendedConfig: js.configs.recommended,
  allConfig: js.configs.all,
});
const gitignorePath = resolve(__dirname, '.gitignore');

/** @type {import("eslint").Linter.Config} */
export default ts.config(
  includeIgnoreFile(gitignorePath),
  {
    files: ['*.{ts,tsx}'],
    ignores: ['node_modules/', '*.min.js', '*.map', '*.snap', 'dist'],
  },
  js.configs.recommended,
  ...compat.env(vercelNode.env),
  ...fixupConfigRules(compat.config(vercelTypeScript)),
  {
    languageOptions: {
      parserOptions: {
        project: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
    rules: {
      'no-console': 'warn',
      '@typescript-eslint/restrict-template-expressions': [
        'warn',
        {
          allowAny: true,
          allowBoolean: true,
          allowNullish: true,
          allowNumber: true,
          allowRegExp: true,
        },
      ],
      'no-unused-vars': 'off',
      '@typescript-eslint/no-unused-vars': [
        'warn',
        {
          argsIgnorePattern: '^_',
          varsIgnorePattern: '^_',
          caughtErrorsIgnorePattern: '^_',
        },
      ],
    },
  },
);

I've attached the entirety of my eslint.config.js file, please note these two important lines:

  ...compat.env(vercelNode.env),
  ...fixupConfigRules(compat.config(vercelTypeScript)),

I hope this works for you!

[trixobird]

Hi again, thank you for your answer. I was able to make the lint working with your suggestions, but it does not seem to honor the vercel configs. consol.log is allowed, and so as kebab files names

[acomanescu]

Any news on this issue?

[musjj]

Next.js now supports v9: vercel/next.js#71218

I hope that an update will land here before Next.js v15 comes out.

[acomanescu]

I've submitted a PR for this, hopefully we'll have this available soon.