Prepare for ESLint's new config system, Flag Config

Gao

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.

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 new globals 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. 😄