Search code examples
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.