New ESLint flat config file format example

_{This note does not pretend to be complete – in fact, I don’t even want to understand how this junk works under the hood. However, it might save someone a day of work.}

For some reason, the ESLint developers once again changed (this 9.0.0 v. is the second or third time in my memory) the configuration file format and plugin packages, so now the old configs do not work, so adding a linter to a new project may cause a problem. In fact, thanks to the efforts of these wonderful people, even this note will most likely soon become useless.

Official way

To get started, you can use the command that is recommended to use for setup in the official guide:

npm init @eslint/config

However, after this, simply running the linter will most likely not produce any result. Even if you run the linter with the correct command specifying the files to check, it still won’t work:

The most interesting thing here is that the official guide gives a completely empty example of the config, as if you did not execute their command npm init @eslint/config

After running this command, the config will look something like this (if they haven’t changed anything again, lol):

import path from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";
import pluginJs from "@eslint/js"; // 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, recommendedConfig: pluginJs.configs.recommended
}); export default [ ...compat.extends("standard-with-typescript")
];

Example of the eslint.config.js for the new version

Another way

Since the official config, apparently, is quite crooked (and, to be honest, I don’t even know if it works correctly), you may want to install the linter yourself. For this config you will need to install the following packages in the project:

{ "devDependencies": { ... // your other deps "@eslint/eslintrc": "^3.0.2", "@eslint/js": "^9.0.0", "@typescript-eslint/eslint-plugin": "^6.21.0", "eslint": "^8.57.0", "eslint-config-standard-with-typescript": "^43.0.1", "eslint-plugin-import": "^2.29.1", "eslint-plugin-n": "^16.6.2", "eslint-plugin-promise": "^6.1.1" }
}

As i already said, just after install linter wouldn’t work anyway, because you still need add files section in config and, possible add some your own rules to it.

I found out that if need to add rules to the config file, you must do it in a certain way: since we already have some rules created by config command, we don’t need to just add new ones, but do it next way:

import path from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";
import pluginJs from "@eslint/js"; // 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, recommendedConfig: pluginJs.configs.recommended
}); export default [ ...compat.extends("standard-with-typescript").map( config => ({ ...config, files: ["**/*.tsx"], rules: { ...config.rules, "semi": "off", // For some reason the old rule is buggy and needs to be disabled "@typescript-eslint/semi": ["error", "always"], "indent": ["error", 2, { "SwitchCase": 2 }], "no-unreachable": "error", // Already in ts, but perhaps it catches more cases } }) ),
]; 

Working example of eslint.config.js with custom rules

Now you can start the linter with the following command (for some reason it is still necessary to additionally specify files in the console, I have no idea why):
npx eslint 'src/**/*.{ts,tsx}' --no-ignore

You can add it to your scripts section of package.json for easy launch via npm run.

Voila, everything should work now. I hope this is useful to someone.

_{As for my opinion, ESLint is absolute garbage, a perfect example of a garbage application, so if you have a choice, try looking for something else. In my company it is a standard tool, so for years i have had to deal with changing config formats, constant renaming of plugin packages (FOR THAT?) and compatibility problems caused by this junk software. ESLint you must burn in hell!}