ESLint + TypeScript plugins for TypeScript: complete guide with examples

Introduction: What are ESLint + TypeScript plugins and why are they needed?

In modern web development, TypeScript has become the de facto standard for creating scalable and reliable applications. However, even the strictest TypeScript compiler cannot catch all logical errors, stylistic inconsistencies, or potential bugs that may arise during code writing. This is where ESLint comes to the rescue — a powerful linter for JavaScript that, with the help of special plugins, adapts to work with TypeScript.

ESLint + TypeScript plugins are not a separate library in the usual sense (like, for example, Lodash), but rather an ecosystem of tools. The main package — eslint — is responsible for code analysis, while the plugins @typescript-eslint/eslint-plugin and @typescript-eslint/parser add support for TypeScript syntax and provide hundreds of rules specific to TypeScript.

Why is this needed?

\n
• Early error detection: The linter can detect potential issues that the TypeScript compiler would miss (e.g., unused variables, incorrect use of promises, type issues that are not syntactic).
\n
• Consistent code style: In a development team, the linter ensures adherence to a unified code style (indentation, quotes, semicolons), making the code more readable and predictable.
\n
• Automatic fixing: Many ESLint rules support auto-fixing (--fix), allowing you to automatically format code and fix simple errors.
\n
• IDE integration: Most modern code editors (VS Code, WebStorm) have built-in ESLint support, allowing you to see errors and warnings directly while writing code.
\n

On the website pythonlib.ru, we strive to provide the most useful guides. This article will be your comprehensive reference for setting up and using ESLint with TypeScript.

Installing ESLint and TypeScript plugins

Installation is done via the package manager npm (or yarn, pnpm). It is assumed that you already have a project with a package.json file and TypeScript (typescript) installed.

Run in the terminal at the root of your project:

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

Let's break down what we installed:

\n
• eslint — the core linter.
\n
• @typescript-eslint/parser — a parser that allows ESLint to understand TypeScript syntax (including generics, decorators, types, etc.).
\n
• @typescript-eslint/eslint-plugin — a plugin that contains a set of rules specific to TypeScript (e.g., @typescript-eslint/no-unused-vars instead of the standard no-unused-vars).
\n

Additionally (recommended):

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

This will allow you to integrate ESLint with Prettier (a code formatter) and avoid conflicts between them.

Quick start: configuration and first run

After installation, you need to create a configuration file. The easiest way is to generate it using the built-in ESLint wizard:

npx eslint --init

You will be asked several questions. Choose:

\n
• How would you like to use ESLint? — To check syntax, find problems, and enforce code style
\n
• What type of modules does your project use? — JavaScript modules (import/export)
\n
• Which framework does your project use? — None of these