@kael89/eslint-config-ts

ESLint configuration for TypeScript projects

This the base ESLint configuration I use in personal TypeScript projects:

• ✔ Extends the popular Airbnb Style Guide
• ✔ Uses Prettier for code formatting
• ✔ Provides additional linting for React

Installation

1. Install the package and its peer dependencies:

yarn add -D @kael89/eslint-config-ts eslint prettier

2. Extend this package in your ESLint configuration:

{
  "eslintConfig": {
    "extends": "@kael89/ts"
  }
}

Note: If you are using the new JSX transform from React 17, use react/jsx-runtime to disable some relevant rules. See eslint-plugin-react:

{
  "eslintConfig": {
    "extends": ["@kael89/ts", "plugin:react/jsx-runtime"]
  }
}

Gotchas

Non standard tsconfig.json paths

If you use a TS configuration file other than the default (tsconfig.json under the project's root), you need to specify its path:

{
  "eslintConfig": {
    "parserOptions": {
      "project": "./packages/my-ts-package/tsconfig.dev.json"
    }
  }
}

React >= 17

If you are using the new JSX transform from React 17, extend react/jsx-runtime in your eslint config (add "plugin:react/jsx-runtime" to "extends") to disable the relevant rules. See eslint-plugin-react for more information.

Extraneous dependencies in tests

import/no-extraneous-dependencies will complain if dependencies used in tests are specified as devDependencies. This is a false positive, and we can use the following configuration to avoid it:

{
  "rules": {
    "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": ["**/__tests__/**"],
        "packageDir": [".", "../../"]
      }
    ]
  }
}

• devDependencies: a pattern that matches our test files
• packageDir: a list of paths where package.json files will be loaded from (optional)

The exact configuration will depend on your setup.

Tip: If you are using VSCode to open a monorepo, you may get better linting results for rules that need to scan the project upwards if you load it as a multi-root workspace. You can then use "packageDir": [".", "../../"] in your eslint config to load dependencies from both the current workspace and the root package.json.

@typescript-eslint/indent issue

If you get the following error:

Configuration for rule "@typescript-eslint/indent" is invalid

it is a known eslint-config-airbnb-typescript issue, see that link for possible solutions.