ESLint Flat Config Support

[JoshuaKGoldberg]

Overview

ESLint is adding an exciting new config system called "flat" configs:

• Configuration files docs: https://eslint.org/docs/latest/use/configure/configuration-files-new
• Configuration migration guide: https://eslint.org/docs/latest/use/configure/migration-guide

@typescript-eslint/eslint-plugin does not yet officially support ESLint flat configs. We'd certainly like it to soon. But doing so is a nontrivial in-progress task and isn't done yet. Flat configs with TypeScript code may work in your specific project. They may not.

Tracking references:

• feat: add types for flat config files #7273: adding type definitions to work with well-typed flat config files
• Change Request: document flat configs in plugins eslint/eslint#17242: upstream ESLint issue for adding the docs we need to know how to provide support
• feat: add support for flat configs #7935: adds support for flat config files to our tooling

If you're filing a complex / configuration issue on typescript-eslint, for now, please make sure you're using traditional ESLint configs. We'll post back in this issue once we can officially provide support for using @typescript-eslint/eslint-plugin with flat configs.

[bradzacher]

As per the OP...

@typescript-eslint/eslint-plugin does not yet officially support ESLint flat configs. We'd certainly like it to soon. But doing so is a nontrivial in-progress task and isn't done yet.
Flat configs with TypeScript code may work in your specific project. They may not.

We have not used or tested flat configs at all, and we don't know the correct style for configs and we provide no guarantees that anything works.
If properly configured, the new system is supposed to be 1:1 compatible - but we don't know for sure.

Until we have official support for flat configs - using them with our tooling is considered "no warranty provided" and our advice is to instead using a "classic" config for now.

[pauliesnug]

+1 I'm very much looking forward to this as well as the FlatESLint config types in the TSEslint and DefinitelyTyped repos!

[bradzacher]

Yes - it's all "just javascript" so if you manually pull our configs apart then you can reassemble them into the correct shape to satisfy the new flat config structure.

But you are relying on implementation details of the configs to pull them apart like this.

Instead it's better if you use eslint's compatibility tooling to work with our configs for now until we have full support. See: https://www.npmjs.com/package/@eslint/eslintrc

[bradzacher]

We have a config to help disable type-aware rules: https://typescript-eslint.io/linting/configs#disable-type-checked

Which you can apply to just JS files using overrides (aka file filters in flat configs)

[alexeyr-ci]

Which you can apply to just JS files using overrides (aka file filters in flat configs)

I don't think we can without going inside the config structure which we wanted to avoid in the first place. Though maybe

{
  files: ['**/*.{js,jsx}'],
  ...compat.extends('plugin:@typescript-eslint/disable-type-checked')[0],
}

is good enough.

[alexeyr-ci]

Actually, going the other way seems better to me:

  ...compat.extends(
    // whatever configs you need, e.g.
    'plugin:@typescript-eslint/strict-type-checked',
    'plugin:@typescript-eslint/stylistic-type-checked',
  ).map(c => ({
    ...c,
    files: ['**/*.{ts,tsx}'],
  })),

[bradzacher]

If anyone wants to use our tooling (or any tooling that hasn't updated yet) with flat configs you can do so right now without doing any dodgy stuff like pulling apart our tooling or re-defining our configs.

You can use the official compatibility tooling - @eslint/eslintrc.

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

const compat = new FlatCompat({ resolvePluginsRelativeTo: __dirname });

module.exports = [
  // use our recommended config
  compat.extends("plugin:@typescript-eslint/recommended"),
  
  // use our plugin by itself
  compat.plugin("@typescript-eslint"),
  // this will define make our rules available as `@typescript-eslint/`

  // or translate an entire eslintrc style config!
  compat.config({
    extends: [
      'plugin:@typescript-eslint/recommended-type-checked',
    ],
    plugins: ['@typescript-eslint'],
    parser: '@typescript-eslint/parser',
    parserOptions: {
      project: true,
      tsconfigRootDir: __dirname,
    },
  }),
];

Again there's no need to jump through hoops and try to figure out how to disect our packages to attempt to reconstruct them so it works with flat configs - just use the official tooling.

However we don't recommend people use flat configs yet just because they are still not fully stable. We haven't released support yet because we have encountered crashes!
The tooling is also brand new and as such there aren't any utilities to help compose configs in nice ways so it can be clunky working to migrate more complex setups.

If you want to use them - please feel free! But know that you are using a beta that doesn't yet support all valid configs and as such you may encounter crashes.

---

Going to lock this for now as this is our officially recommended path for using our tooling in flat configs for now. Once we are ready we shall release support with full documentation.

[bradzacher]

This will be releasing with our v7 release next week.