How to inspect ESLint configuration file

Photo by Mark Koch on Unsplash

ESLint is a great tool for enforcing quality through static analysis in your projects, and it now uses a flat config that simplifies the configuration process.

From my perspective, ESLint is excellent as long as it works as expected once configured, but debugging the configuration file has never been easy.

Fortunately, the flat config lets you use a helpful developer tool called ESLint Config Inspector, which I will explore in more detail in this blog post.

Let’s assume you’ve just added ESLint to your Angular application, so the eslint.config.js file looks as follows:

// @ts-check
const eslint = require("@eslint/js");
const tseslint = require("typescript-eslint");
const angular = require("angular-eslint");

module.exports = tseslint.config(
  {
    files: ["**/*.ts"],
    extends: [
      eslint.configs.recommended,
      ...tseslint.configs.recommended,
      ...tseslint.configs.stylistic,
      ...angular.configs.tsRecommended,
    ],
    processor: angular.processInlineTemplates,
    rules: {
      "@angular-eslint/directive-selector": [
        "error",
        {
          type: "attribute",
          prefix: "app",
          style: "camelCase",
        },
      ],
      "@angular-eslint/component-selector": [
        "error",
        {
          type: "element",
          prefix: "app",
          style: "kebab-case",
        },
      ],
    },
  },
  {
    files: ["**/*.html"],
    extends: [
      ...angular.configs.templateRecommended,
      ...angular.configs.templateAccessibility,
    ],
    rules: {},
  }
);

It works well; both TypeScript and HTML files are taken into consideration. But what actually happens under the hood?

Let’s run the following command to launch the ESLint Config Inspector:

npx eslint --inspect-config

The interface consists of three tabs:

• Configs
• Rules
• Files

Configs

This view shows all the configuration objects (config items) in your ESLint configuration. There are 19 config items, but their origins may not be clear. If you look at the configuration that applies to the TypeScript files, you can see that we extend four third-party entries:

module.exports = tseslint.config(
  {
    files: ["**/*.ts"],
    extends: [
      eslint.configs.recommended,
      ...tseslint.configs.recommended,
      ...tseslint.configs.stylistic,
      ...angular.configs.tsRecommended,
    ],
    ...
  },
  ...
);

When it comes to HTML files, there are two third-party entries:

module.exports = tseslint.config(
  {
    files: ["**/*.html"],
    extends: [
      ...angular.configs.templateRecommended,
      ...angular.configs.templateAccessibility,
    ],
    rules: {},
  },
  ...
);

Let’s focus on the tseslint.configs.recommended entry to understand why the Configs view shows 19 config items. It turns out that this entry holds an array of configuration objects, contributing significantly to the total count.

• base: Sets plugin and parser fields.

• eslint-recommended: Adjust rules from the eslint.configs.recommended to work well with TypeScript files.

• recommended: Configure rules specific to TypeScript files.

You can easily see how a given configuration object affects the severity (off, warning, error) of a rule by the icon preceding the rule’s name. It also provides some information about the rule itself, such as whether it’s recommended, supports autofix, and a short description.

In summary, the Configs tab allows you to inspect all the configuration objects that apply to your ESLint configuration file.

Rules

This view shows the rules configured in all the items we saw in the Configs tab.

This view may seem overwhelming at first due to the many filters available. You can filter rules by:

• plugins (rule’s plugin)
• usage (rule’s severity and other grouped filters)
• state (rule’s meta information — if it’s recommended, fixable, deprecated)

Finally, there’s a search feature so you can filter by phrase.

What’s really powerful about this view is its ability to show how a given configuration object affects a rule’s resulting setting.

We can see how config items defined later in the configuration take precedence and override the rule’s severity level. This is useful when you want to understand why a certain rule is active or inactive in the final configuration.

Files

Last but not least, you can focus on a specific file and examine which configuration objects apply to it.

In addition, you can see the list of matching rules and check which configuration object is the source of a rule.

The ESLint Config Inspector is an invaluable tool for developers using ESLint’s flat configuration. It provides a detailed breakdown of configuration objects, rules, and their application to specific files. This makes it easier to debug and understand the setup. The tool can save time and reduce frustration by offering clarity and insight into your ESLint configuration, ensuring it works as expected across your project.

I hope you liked my blog post, thanks for reading! 🙂