typescripteslintvscode-extensions

How do I configure ESLint flat config with TypeScript in VS Code (without FlatCompat)?


How do I:


Solution

  • ESLint flat config is quite different from the previous format. To help understand the "flat config" the following pointers helped me:

    Setup for VS Code - at the time of writing you'll need:

    Install the following dependencies:

        yarn add --dev \
          eslint \
          @eslint/js \
          typescript-eslint \
          --
    

    Use the following eslint.config.mjs file to get you started (locate it alongside package.json). This provides defaults from https://typescript-eslint.io/getting-started/. This config additionally allows you to add ignored files, which is useful because .eslintignore is no longer available. NB the config is 'just Javascript' so you can make additional changes. This uses module.exports which avoids the need to add type: "module" to package.json:

    // @ts-check
    
    import eslint from '@eslint/js';
    import tseslint from 'typescript-eslint';
    
    // https://typescript-eslint.io/getting-started/
    
    const ignores = [
      '**/*.js',
    ];
    
    export default tseslint.config(
      {
        ...eslint.configs.recommended,
        ignores,
      },
      ...tseslint.configs.recommended.map((config) => ({
        ...config,
        ignores,
      })),
    );
    

    Pro:

    Con: