TypeScript ESLint Language Service Plugin

5.0.5 · active · verified Sun Apr 19

typescript-eslint-language-service is a TypeScript language service plugin designed to integrate ESLint functionality directly into TypeScript-aware IDEs. It reports ESLint errors as TypeScript semantic diagnostics and offers code-fixes for applicable ESLint issues, providing a unified linting experience. The current stable version is 5.0.5, with releases typically driven by bug fixes and updates to its peer dependencies, notably `eslint` and `@typescript-eslint/parser`. Key differentiators include its seamless integration into the TypeScript language service, allowing real-time feedback and quick fixes for ESLint rule violations without needing separate build steps or processes for linting, treating lint errors as native compiler errors within the IDE. It relies on peer dependencies `typescript`, `@typescript-eslint/parser`, and `eslint` for its operation.

Common errors

```
Cannot find package 'eslint' or package '@typescript-eslint/parser'
```
cause Missing or incompatible peer dependencies preventing the plugin from loading or functioning correctly.

fix Run `npm install -D eslint@^8 @typescript-eslint/parser@^5 typescript@^4` to install the required peer dependencies matching the `typescript-eslint-language-service@5.x.x` version.
```
Language service plugin 'typescript-eslint-language-service' could not be loaded.
```
cause Incorrect configuration in `tsconfig.json`, an incompatible Node.js/TypeScript version, or issues with peer dependency resolution.

fix Verify that the plugin name in `tsconfig.json` is exactly `"typescript-eslint-language-service"`. Confirm all peer dependencies (`eslint`, `@typescript-eslint/parser`, `typescript`) are correctly installed and meet the minimum version requirements. Check your IDE's logs for more specific error details.
```
ESLint rules are not being applied, or configuration changes are not picked up after `eslint@8.35.0`.
```
cause Compatibility issues with newer ESLint versions (e.g., specific bug fixed in plugin version 5.0.4) or incorrect `watchDirs` configuration.

fix Upgrade to `typescript-eslint-language-service@5.0.4` or newer to resolve known compatibility issues with `eslint@8.35.0`. Also, ensure any custom ESLint config file locations are included in the `watchDirs` plugin option in `tsconfig.json`.

Warnings

breaking Version 5.0.0 introduced breaking changes, requiring `eslint` version `8.0.0` or higher and `@typescript-eslint/parser` version `5.0.0` or higher as peer dependencies.
Fix: Ensure `eslint@^8` and `@typescript-eslint/parser@^5` are installed in your project. If you cannot upgrade these peer dependencies, you must use `typescript-eslint-language-service@4.x.x`.
breaking Version 4.0.0 introduced breaking changes, requiring `@typescript-eslint/parser` version `4.0.0` or higher as a peer dependency.
Fix: Upgrade `@typescript-eslint/parser` to `^4`. If you cannot upgrade, use `typescript-eslint-language-service@3.x.x`.
gotcha The plugin's functionality can be disabled by setting the `TS_ESLINT_SERVICE_DISABLED` environment variable, which might lead to unexpected lack of ESLint feedback in your IDE.
Fix: Ensure the `TS_ESLINT_SERVICE_DISABLED` environment variable is not set, or set to a falsy value, when you expect ESLint diagnostics to be active within your TypeScript IDE.
gotcha By default, the plugin only watches `.eslintrc.*` files in the project root. If your ESLint configuration files are located elsewhere, changes to them might not be immediately reflected.
Fix: Use the `watchDirs` option in your `tsconfig.json` plugin configuration to specify additional directories containing ESLint configuration files, for example: `{"name": "typescript-eslint-language-service", "watchDirs": ["config"]}`.

Install

npm install typescript-eslint-language-service npm
yarn add typescript-eslint-language-service yarn
pnpm add typescript-eslint-language-service pnpm

Imports

typescript-eslint-language-service
wrong:
```
import { PluginName } from 'typescript-eslint-language-service';
const plugin = require('typescript-eslint-language-service');
```
correct:
```
{
  "compilerOptions": {
    "plugins": [
      {
        "name": "typescript-eslint-language-service",
        "watchDirs": ["src"]
      }
    ]
  }
}
```
This package is a TypeScript language service plugin and is configured via `tsconfig.json`'s `compilerOptions.plugins` array, not imported directly into JavaScript/TypeScript code. The `name` property within the plugin object must exactly match the package name.
PluginOptions
```
type PluginOptions = {
  name: "typescript-eslint-language-service";
  watchDirs?: string[];
};
```
While not directly imported, the `PluginOptions` type illustrates the configurable properties of the plugin when defined in `tsconfig.json`.

Quickstart

This `tsconfig.json` snippet demonstrates how to activate the TypeScript ESLint language service plugin in your project, enabling real-time ESLint feedback and auto-fixes directly within your IDE.

{
  "compilerOptions": {
    "target": "es2020",
    "module": "esnext",
    "lib": ["es2020", "dom"],
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "react-jsx",
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    // Configure the TypeScript ESLint Language Service plugin
    // This enables ESLint errors and fixes to appear directly in your IDE
    "plugins": [
      {
        "name": "typescript-eslint-language-service",
        // Optionally, specify additional directories to watch for ESLint config changes.
        // By default, only .eslintrc.* files in the project root are watched.
        // Example: "watchDirs": ["config", "eslint-rules"]
      }
    ]
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", ".eslintrc.js"],
  "exclude": ["node_modules", "dist"]
}

view raw JSON →