typescripteslinttypescript-eslinteslint-flat-config

How do you configure ESLint's parser and plug-ins using ESLint's flat configuration?


I want to configure ESLint using the new configuration available for it, "flat config" (i.e. eslint.config.js file). I am currently working on a TypeScript project for a client, and ESLint must be configured such that it is able to parse TypeScript syntax, but I cannot seem to correctly configure ESLint to use the TS-parser plugins. In the old-school .json configuration, the plug-ins work fine. Does someone know how to correctly configure the TS-parser plug-ins for ESLint using the flat config, so that ESLint is able to parse and lint TypeScript documents?


The parser plug-ins I need to configure correctly can be seen below:


You can see my current configuration file below. I have tried subtle differences in the configuration, but the file below contains the configuration that I feel like should work, but as I already mentioned, it does not.

import eslintPlugin from '@typescript-eslint/eslint-plugin'

export default [
  {
    files: ["src/**/*.ts", "src/main.cts", "src/main.mts"],
    ignores: ["**/*.d.*", "**/*.map.*", "**/*.js", "**/*.mjs", "**/*.cjs"],
    plugins: { eslintPlugin },

    languageOptions: {
      ecmaVersion: "latest",
      sourceType: "module",
      parser: "eslintPlugin/parser",
    },

    rules: {
      semi: "error",
      quotes: ["error", "single"],
      indent: [
        "error",
        2,
        {
          SwitchCase: 1,
          VariableDeclarator: "first",
          ImportDeclaration: "first",
          ArrayExpression: "first",
          ObjectExpression: "first",
          CallExpression: { arguments: "first" },
          FunctionDeclaration: { body: 1, parameters: 4 },
          FunctionExpression: { body: 1, parameters: 4 },
        },
      ],
    },
  },

];


Solution

  • I am using ESLint's flat-config using flat config with TypeScript. Here's what I think are the important parts of the config:

      import ts from '@typescript-eslint/eslint-plugin';
      import tsParser from '@typescript-eslint/parser';
      import functional from 'eslint-plugin-functional';
      import imprt from 'eslint-plugin-import'; // 'import' is ambiguous & prettier has trouble
    
      languageOptions: { 
        parser: tsParser,  
        parserOptions: {  
          ecmaFeatures: { 
            modules: true
          },
          ecmaVersion: 'latest',
          project: './tsconfig.json',  
        },
      },
    
      plugins: {  
        functional,      
        import: imprt,  
        '@typescript-eslint': ts,  
        ts,  
      },
    
    
      rules: {  
        ts.configs['eslint-recommended'].rules,
        ts.configs['recommended'].rules,
        'ts/return-await': 2,
      }
    
    

    Take note that the ts plugin is there twice. The shared configs use the longer namespace, and I perfer using a shorter namespace.