As explained in the Getting Started guide:

• parser: '@typescript-eslint/parser' tells ESLint to use the @typescript-eslint/parser package you installed to parse your source files.

  • This is required, or else ESLint will throw errors as it tries to parse TypeScript code as if it were regular JavaScript.

• plugins: ['@typescript-eslint'] tells ESLint to load the @typescript-eslint/eslint-plugin package as a plugin.

  • This allows you to use typescript-eslint's rules within your codebase.

In short: the eslint-plugin package contains the actual lint rules, and the parser plugin adds support for parsing TypeScript files (ESLint on its own does not support TypeScript — it used to, but that project evolved into typescript-eslint).

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.