ESLint 9 (beta) Step by Step Installation Guide

[erosman]

I have seen Configuration Migration Guide.
Is there an step by step guide for ESLint 9 (beta) installation?
(e.g. on Linux with VS Code & VS Code ESLint extension)

• Uninstall ESLint 8
• Install ESLint 9 beta
• Convert .eslintrc.json rules to eslint.config.js

Here is a snippet of .eslintrc.json

{
  "env": {
    "browser": true,
    "es2024": true,
    "greasemonkey": true,
    "webextensions": true
  },

  "extends": "eslint:recommended",

  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },

  "globals": {
  },

  "plugins": [
    "@stylistic/js"
  ],

  "rules": {
    "no-case-declarations": "off",
    "more-rules": "... truncated..."
  },

  "overrides": [
    {
      "files": ["*.user.js"],
      "excludedFiles": "*.none.js",
      "rules": {
        "quotes": ["error", "single"]
      }
    }
  ]
}

[mdjermanovic]

It's not step-by-step, but all important points should be covered by the Migrate to v9.x guide:

https://eslint.org/docs/next/use/migrate-to-9.0.0

[mdjermanovic]

As for the VS Code ESLint extension, v3 will automatically detect flat config (https://github.com/microsoft/vscode-eslint/releases/tag/3.0.1-alpha.1).

With v2, you need to set eslint.experimental.useFlatConfig to true in your VS Code settings. For example, in .vscode/settings.json file:

{
    "eslint.experimental.useFlatConfig": true
}

[Yareaj]

You are a life saver, thanks!

[erosman]

Is there a complete example of eslint.config.js?

[erosman]

For reference, Embrace the Future: Navigating the New Flat Configuration of ESLint seems like a good start.

[erosman]

I tried "eslint.experimental.useFlatConfig": true but ESLInt failed to run in VS Code.
There must be some errors.
Where can I check the errors?

[mdjermanovic]

Click the OUTPUT tab and select ESLint from the list to see all vscode-eslint logs.

[erosman]

To use flat config with ESLint v8, place a eslint.config.js file in the root of your project or set the ESLINT_USE_FLAT_CONFIG environment variable to true.

eslint@8.57.0
VS Code ESLint extension 2.4.4
"eslint.experimental.useFlatConfig": true

I get the following error.

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1185:20)
    at Module._compile (node:internal/modules/cjs/loader:1227:27)
    at Object..js (node:internal/modules/cjs/loader:1326:10)
    at Module.load (node:internal/modules/cjs/loader:1126:32)
    at node:internal/modules/cjs/loader:967:12
    at Function._load (node:electron/js2c/node_init:2:13357)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
[Error - 4:08:23 PM] An unexpected error occurred:
[Error - 4:08:23 PM] /home/.../eslint.config.js:1
import globals from "globals"; 

[mdjermanovic]

Looks like your eslint.config,js file is ESM but your project is CommonJS so .js files are loaded as CommonJS modules. You could either convert eslint.config.js to CommonJS module format or rename it to eslint.config.mjs.

[erosman]

Tested eslint@8.57.0

• Works with eslint.config.mjs
• Doesn't work with eslint.config.js

Installed & tested eslint@9.0.0-beta.2

• Works with eslint.config.mjs
• Doesn't work with eslint.config.js

package.json

Added "type": "module", to the package.json and now it loads eslint.config.js without a problem.

[JerryWu1234]

const { FlatCompat } = require("@eslint/eslintrc");
const js = require("@eslint/js");

const compat = new FlatCompat({
    baseDirectory: __dirname,
    resolvePluginsRelativeTo: __dirname,       // optional
    recommendedConfig: js.configs.recommended, // optional unless using "eslint:recommended"
    allConfig: js.configs.all, 
});

module.exports = [
  
  ...compat.config({
    env: {
      browser: true,
      es2021: true,
      node: true,
    },
    ignorePatterns: [
      "**/*.log",
      "**/.DS_Store",
      "*.",
      ".vscode/settings.json",
      ".history",
      ".yarn",
      "bazel-*",
      "bazel-bin",
      "bazel-out",
      "bazel-qwik",
      "bazel-testlogs",
      "dist",
      "dist-dev",
      "lib",
      "lib-types",
      "etc",
      "external",
      "node_modules",
      "temp",
      "tsc-out",
      "tsdoc-metadata.json",
      "target",
      "output",
      "rollup.config.js",
      "build",
      ".cache",
      ".vscode",
      ".rollup.cache",
      "dist",
      "tsconfig.tsbuildinfo",
      "vite.config.ts",
      "*.spec.tsx",
      "*.spec.ts",
      ".netlify",
      "pnpm-lock.yaml",
      "package-lock.json",
      "yarn.lock",
      "server",
    ],
    extends: [
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended",
      "plugin:qwik/recommended",
    ],
    parser: "@typescript-eslint/parser",
    parserOptions: {
      tsconfigRootDir: __dirname,
      project: ["./tsconfig.json"],
      ecmaVersion: 2021,
      sourceType: "module",
      ecmaFeatures: {
        jsx: true,
      },
    },
  
    plugins: ["@typescript-eslint"],
    rules: {
      "@typescript-eslint/no-explicit-any": "off",
      "@typescript-eslint/explicit-module-boundary-types": "off",
      "@typescript-eslint/no-inferrable-types": "off",
      "@typescript-eslint/no-non-null-assertion": "off",
      "@typescript-eslint/no-empty-interface": "off",
      "@typescript-eslint/no-namespace": "off",
      "@typescript-eslint/no-empty-function": "off",
      "@typescript-eslint/no-this-alias": "off",
      "@typescript-eslint/ban-types": "off",
      "@typescript-eslint/ban-ts-comment": "off",
      "prefer-spread": "off",
      "no-case-declarations": "off",
      "no-console": "off",
      "@typescript-eslint/no-unused-vars": ["error"],
      "@typescript-eslint/consistent-type-imports": "warn",
      "@typescript-eslint/no-unnecessary-condition": "warn",
    },
  })
];

Error: Error while loading rule 'qwik/valid-lexical-scope': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser

I will get this error

[jonlepage]

thank you for making eslint more complicated, unusable, it motivates us to move to Biomes after spending 8 hours dealing with errors everywhere in the new config file, these sad after having used eslint for 7 years!
the v9 was hellish for us, biomes work the first time in .... 1 min ! eslint9 not work after ... 8hours !$$$

[MrSuddenJoy]

@jonlepage are you ok?

[fl-wxiao]

I'm about to get depressed

[MrSuddenJoy]

@fl-wxiao by reading this crap from @jonlepage? If so, than I assume you are completely sane 👍🏻

[hinst]

ESLint 9 is a weird update that definitely has some problems, which will hopefully be resolved in the future