@typescript-eslint /parser vs /eslint-plugin

Question

It seems that @typescript-eslint/parser and @typescript-eslint/eslint-plugin are required to get ESLint properly working in TypeScript codebases.

How are they different? Why are they shipped separately if they are both required?

Answer 1

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).