Using ESLint with TypeScript

Kenny DuMez
Kenny DuMez
Graphite software engineer

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.

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.

Key rules and plugins:

  1. @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"]
    }
  2. 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
    }
    }
  3. @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"]
    }
  4. @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"]
    }
    ]
    }
  5. @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>`"
    }
    }
    ]
    }
  6. @typescript-eslint/consistent-type-imports: Enforces consistent usage of type imports throughout the project.

    Terminal
    "rules": {
    "@typescript-eslint/consistent-type-imports": ["error"]
    }
  7. @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"]
    }

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.

Git inspired
Graphite's CLI and VS Code extension make working with Git effortless.
Learn more

Graphite
Git stacked on GitHub

Stacked pull requests are easier to read, easier to write, and easier to manage.
Teams that stack ship better software, faster.

Or install our CLI.
Product Screenshot 1
Product Screenshot 2