How to Configure ESLint for TypeScript Projects

TL;DR

One thing that is important in projects but often neglected is code style and standardization. Fortunately for those who really wants to enforce certain code style or standards to their projects, eslint got our back!

ESLint is quite easy to setup but when you add typescript, then the complexity increases a little bit but don't be afraid as this article will guide you through it.

Installing Essential Packages

before we can use eslint, we must install some essential packages.

$ npm install -D -E eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

• eslint: Provides a flexible configuration system that allows you to define custom rules or leverage existing rule sets for specific coding styles
• @typescript-eslint/parser: A parser plugin specifically designed for ESLint to handle TypeScript code.
• @typescript-eslint/eslint-plugin: Provides a collection of ESLint rules specifically designed for TypeScript code.

Setting up the ESLint

Now that we have installed the essential packages, we can now start creating the eslint config. Let's start by creating a file called .eslintrc.json and inside the file we write the following.

{
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint",
  ],
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  parserOptions: {
    sourceType: "module",
    ecmaVersion: 2023,
  },
}

• parser: "@typescript-eslint/parser": This line specifies the parser ESLint should use. Setting it to @typescript-eslint/parser ensures that ESLint can understand the syntax and types specific to TypeScript code.
• plugins: ["@typescript-eslint"]: This section defines the plugins used for linting. This plugin provides a collection of rules specifically designed for TypeScript code.
• extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"]: This section defines the base configurations that our setup inherits from.
  • "eslint:recommended": This extends your configuration with ESLint's recommended set of rules for JavaScript code
  • "plugin:@typescript-eslint/recommended": This extends our configuration with the recommended set of rules from the @typescript-eslint plugin
• sourceType: "module":This option specifies the type of source code being parsed. Here, it's set to "module", indicating that the code is expected to be written in a module system like ES modules
• ecmaVersion: 2023: This option specifies the ECMAScript version that the parser should expect the code to be written in.

That's the configuration that we needed, as well as the explanation for each properties.

Exploring the Rules

Now after setting up the ESLint, you are left with exploring the various rules of eslint and match it into your liking. You can explore the available rules in ESLint docs and TypeScript ESLint docs.

If you don't feel like exploring the rules and want to just install a plugin, don't worry we got your back. We have made a plugin that is curated and tailored to improve your productivity, project's maintainability, and type safety. Check out our eslint-plugin-typescript as well as eslint-plugin-typescript-react