Background
ESLint has an old issue, that shareable config can not have it's own plugin, you have to use peerDependencies and let user install plugins themself. Link
This issue has been closed with a new design in this Augest. Here are the blogs explaining it.
- https://eslint.org/blog/2022/08/new-config-system-part-1/
- https://eslint.org/blog/2022/08/new-config-system-part-2/
- https://eslint.org/blog/2022/08/new-config-system-part-3/
So it is time to prepare for new config system today.
About Flat Config
The new system is using the new flat config system to replace the old extends system to setup shared config.
What is Flat Config ? Just using an array instead, and merge the array config.
It also has a lot of new design.
- Use
node.js
native es module instead of old custom require system. - Remove
env
, use newglobals
package instead.
Other changee are all benifits from the flat config
system.
- Each config can define an
ecmaVersion
. - Each config can define an
parser
- More powerful and configurable plugins
- All old plugins works as well
- Backward compatible
Try It
The new config system isn’t yet tied into eslint yet. But since ESLint v8.21.0, it incorporates several ways to try out flat config.
Using flat config with the Linter class
const linter = new Linter({ configType: "flat" }); const messages = linter.verify("new Map()", { languageOptions: { ecmaVersion: 5, sourceType: "script" }, rules: { "no-undef": "error" } }, "filename.js");
Using flat config with the ESLint class
// ESM import pkg from "eslint/use-at-your-own-risk"; const { FlatESLint } = pkg; // CommonJS const { FlatESLint } = require("eslint/use-at-your-own-risk");
const eslint = new FlatESLint({ cwd: originalDir, overrideConfigFile: "other.config.js" }); const results = await eslint.lintText("foo");
Testing rules with flat config and the RuleTester class
// ESM import pkg from "eslint/use-at-your-own-risk"; const { FlatRuleTester } = pkg; // CommonJS const { FlatRuleTester } = require("eslint/use-at-your-own-risk");
const ruleTester = new FlatRuleTester({ languageOptions: { ecmaVersion: 5, sourceType: "script" } }); ruleTester.setDefaultConfig({ languageOptions: { ecmaVersion: 5, sourceType: "script" } });
ruleTester.run("my-rule", rule, { valid: [ { code: "var test = 'foo'", languageOptions: { sourceType: "script" } }, { code: "var test2 = 'bar'", languageOptions: { globals: { test: true } } } ], invalid: [ { code: "bar", languageOptions: { sourceType: "script" }, errors: 1 } ] });
Plan
Create a new branch for eslint new system and make a breaking change.
A new Major version will be created.
Try and play. 😄