Using ESLint with TypeScript

Using ESLint with TypeScript helps maintain high code quality, catch common errors, and enforce code style and best practices. This guide will provide an in-depth look at how to set up and configure ESLint in a TypeScript project, highlighting key plugins, rules, and configurations.

Step 1: Configuring ESLint with TypeScript

Installation: In this example we'll install ESLint with npm. If you haven't already initialized npm in your project, do that first, then install ESLint and the necessary TypeScript extensions.

Terminal

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

eslint: The core ESLint library.
@typescript-eslint/parser: A parser that allows ESLint to understand TypeScript syntax.
@typescript-eslint/eslint-plugin: A plugin that contains a set of ESLint rules that are specific to TypeScript.

Configuration: Once ESLint is installed, create an ESLint configuration file in your project root. You can do this by running eslint --init and choosing the appropriate options for TypeScript, or by manually creating a .eslintrc.json file that looks something like this:

Terminal

{
  "parser": "@typescript-eslint/parser",
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "rules": {
    // Custom rules here
  }
}

This configuration configures ESLint to use the TypeScript parser and apply recommended rules from both ESLint and the TypeScript ESLint plugin.

Step 2: Configuring TypeScript ESLint rules

Key rules and plugins:

@typescript-eslint/no-unused-vars: This rule extends the base ESLint no-unused-vars rule. It helps in catching unused variables in your TypeScript code, preventing potential bugs and reducing bloat.
Terminal
```
"rules": {
  "@typescript-eslint/no-unused-vars": ["error"]
}
```
eslint-import-resolver-typescript: This resolver helps ESLint resolve the file paths in your TypeScript project when using modules. You can install it separately by running:
Terminal
```
npm install eslint-import-resolver-typescript --save-dev
```
Then, configure it in your ESLint configuration:
Terminal
```
"settings": {
  "import/resolver": {
    "typescript": {} // loads <rootdir>/tsconfig.json to eslint
  }
}
```
@typescript-eslint/no-explicit-any: Forbids the use of the any type, pushing for a more specific type definition, increasing type safety.
Terminal
```
"rules": {
  "@typescript-eslint/no-explicit-any": ["error"]
}
```

@typescript-eslint/naming-convention: Enforces naming conventions using ESLint. This rule can be customized to require specific patterns for variables, types, properties, etc.

Terminal

"rules": {
  "@typescript-eslint/naming-convention": [
    "error",
    {
      "selector": "variableLike",
      "format": ["camelCase"]
    },
    {
      "selector": "typeLike",
      "format": ["PascalCase"]
    }
  ]
}

@typescript-eslint/ban-types: Prevents the use of specific types that are considered problematic. This rule can be configured to ban types like {} or Object that are too generic.

Terminal

"rules": {
  "@typescript-eslint/ban-types": [
    "error",
    {
      "types": {
        "Object": "Use {} instead",
        "{}": "Specify more detailed type or use `Record<string, unknown>`"
      }
    }
  ]
}

@typescript-eslint/consistent-type-imports: Enforces consistent usage of type imports throughout the project.
Terminal
```
"rules": {
  "@typescript-eslint/consistent-type-imports": ["error"]
}
```
@typescript-eslint/no-unsafe-assignment: Prevents unsafe assignments that can lead to runtime errors, such as assigning any typed variables to variables of a more specific type.
Terminal
```
"rules": {
  "@typescript-eslint/no-unsafe-assignment": ["warn"]
}
```

Step 3: Integrating ESLint into your workflow

Running ESLint: You can run ESLint manually via the command line or integrate it into your IDE to get real-time feedback. To run ESLint manually, run:

Terminal

npx eslint . --ext .ts,.tsx

IDE integration: Most modern IDEs like Visual Studio Code support ESLint integration. Install the ESLint plugin and it will automatically use your project's ESLint configuration.

For further reading see the official ESLint documentation.