typescript-eslint

typescript-eslint is an important addition to a monorepo, bringing the linting of ESLint to your TypeScript code. Without typescript-eslint enabled in your repository, ESLint won't be able to properly understand TypeScript and you'll be missing important checks for your codebase health.

Once properly installed, typescript-eslint will enable new superpowers for your linter, finding bugs, enforcing standards, and recommending a common style for everyone in the codebase.

Using typescript-eslint

The official typescript-eslint documentation has an excellent breakdown on how to use typescript-eslint in a monorepo. Rather than rehash their already excellent docs here in Maestros, we encourage you to hop over there to learn the fundamentals. Below, we'll show an example of combining that documentation with the rest of the "happy path" here in Maestros.

Enabling typescript-eslint in our monorepo

Our first step is to install the typescript-eslint packages that we will need into our monorepo. We'll install these dependencies into our @repo/lint package.

{
  "name": "@repo/lint",
  "dependencies": {
    // Replace latest with current version
    "@typescript-eslint/eslint-plugin": "latest",
    "@typescript-eslint/parser": "latest"
  }
}

{
  "name": "@repo/lint",
  "dependencies": {
    // Replace latest with current version
    "@typescript-eslint/eslint-plugin": "latest",
    "@typescript-eslint/parser": "latest"
  }
}

{
  "name": "@repo/lint",
  "dependencies": {
    // Replace latest with current version
    "@typescript-eslint/eslint-plugin": "latest",
    "@typescript-eslint/parser": "latest"
  }
}

{
  "name": "@repo/lint",
  "dependencies": {
    // Replace latest with current version
    "@typescript-eslint/eslint-plugin": "latest",
    "@typescript-eslint/parser": "latest"
  }
}

The plugin and parser will now be available in our workspaces' linting commands. To enable it, we'll add a few lines to any workspace where we want the plugin enabled.

/** @type {import("eslint").Linter.Config} */
module.exports = {
  root: true,
  extends: [require.resolve('@repo/lint/next.js')],
  parserOptions: {
    project: true,
  },
  plugins: ['@typescript-eslint'],
};

/** @type {import("eslint").Linter.Config} */
module.exports = {
  root: true,
  extends: [require.resolve('@repo/lint/next.js')],
  parserOptions: {
    project: true,
  },
  plugins: ['@typescript-eslint'],
};

/** @type {import("eslint").Linter.Config} */
module.exports = {
  root: true,
  extends: [require.resolve('@repo/lint/next.js')],
  parserOptions: {
    project: true,
  },
  plugins: ['@typescript-eslint'],
};

/** @type {import("eslint").Linter.Config} */
module.exports = {
  root: true,
  extends: [require.resolve('@repo/lint/next.js')],
  parserOptions: {
    project: true,
  },
  plugins: ['@typescript-eslint'],
};

Add new linting rules

Last, we'll add the plugin so typescript-eslint can recommend some best practices throughout our codebase. For any of your root configurations that you'd like typescript-eslint to help you with add these to your extends key:

extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended-type-checked']

extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended-type-checked']

extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended-type-checked']

extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended-type-checked']

You'll now get the recommended lint checks from the typescript-eslint team and avoid some key bugs that could be lurking in your codebase.