---
id: legacy-eslint-setup
title: Legacy ESLint Setup
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

## Quickstart

These steps will get you running ESLint with our recommended rules on your TypeScript code as quickly as possible.

:::note
This page is for [ESLint's legacy config format](https://eslint.org/docs/latest/use/configure/configuration-files).
See [Getting Started](../getting-started/Quickstart.mdx) for [ESLint's new "flat" configuration format](https://eslint.org/docs/latest/use/configure/configuration-files-new).
:::

### Step 1: Installation

First, install the required packages for [ESLint](https://eslint.org), [TypeScript](https://typescriptlang.org), and this plugin:

```bash npm2yarn
npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint typescript
```

### Step 2: Configuration

Next, create a `.eslintrc.cjs` config file in the root of your project, and populate it with the following:

```js title=".eslintrc.cjs"
/* eslint-env node */
module.exports = {
  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  root: true,
};
```

:::info
If your project doesn't use ESM, naming the file as `.eslintrc.js` is fine. See [ESLint's Configuration Files docs](https://eslint.org/docs/user-guide/configuring/configuration-files) for more info.
:::

### Step 3: Running ESLint

Open a terminal to the root of your project and run the following command:

<Tabs groupId="npm2yarn">
<TabItem value="npm">

```bash
npx eslint .
```

</TabItem>
<TabItem value="Yarn">

```bash
yarn eslint .
```

</TabItem>
<TabItem value="pnpm">

```bash
pnpm eslint .
```

</TabItem>
</Tabs>

ESLint will lint all TypeScript compatible files within the current folder, and will output the results to your terminal.

## Details

- `parser: '@typescript-eslint/parser'` tells ESLint to use the [`@typescript-eslint/parser`](../packages/Parser.mdx) package you installed to parse your source files.
  - This is required, or else ESLint will throw errors as it tries to parse TypeScript code as if it were regular JavaScript.
- `plugins: ['@typescript-eslint']` tells ESLint to load the [`@typescript-eslint/eslint-plugin`](../packages/ESLint_Plugin.mdx) package as a plugin.
  - This allows you to use typescript-eslint's rules within your codebase.
- `extends: [ ... ]` tells ESLint that your config extends the given configurations.
  - `eslint:recommended` is ESLint's inbuilt "recommended" config - it turns on a small, sensible set of rules which lint for well-known best-practices.
  - `plugin:@typescript-eslint/recommended` is our "recommended" config - it's similar to `eslint:recommended`, except it turns on TypeScript-specific rules from our plugin.
- `root: true` is a generally good ESLint practice to indicate this file is the root-level one used by the project and ESLint should not search beyond this directory for config files.

## Next Steps

If you're having problems getting this working, please have a look at our [Troubleshooting & FAQs](../troubleshooting/faqs/General.mdx).

### Additional Configs

We recommend you consider enabling the following two configs:

- [`strict`](../users/Shared_Configurations.mdx#strict): a superset of `recommended` that includes more opinionated rules which may also catch bugs.
- [`stylistic`](../users/Shared_Configurations.mdx#stylistic): additional rules that enforce consistent styling without significantly catching bugs or changing logic.

```js title=".eslintrc.cjs"
/* eslint-env node */
module.exports = {
  extends: [
    'eslint:recommended',
    // Remove this line
    'plugin:@typescript-eslint/recommended',
    // Added lines start
    'plugin:@typescript-eslint/strict',
    'plugin:@typescript-eslint/stylistic',
    // Added lines end
  ],
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  root: true,
};
```

You can read more about these in our [shared configurations docs](../users/Shared_Configurations.mdx).

### Typed Linting

We also provide a plethora of powerful rules that utilize the power of TypeScript's type information.
[Visit the next page for a typed rules setup guide](./Typed_Linting.mdx).

### Documentation Resources

- You can read more about configuring ESLint [in their documentation on configuration](https://eslint.org/docs/user-guide/configuring).
- You can read more about the rules provided by ESLint [in their documentation on their rules](https://eslint.org/docs/rules/).
- You can read more about the rules provided by typescript-eslint in [our rules documentation](/rules).
