Legacy ESLint Setup
Quickstart
These steps will get you running ESLint with our recommended rules on your TypeScript code as quickly as possible.
This page is for ESLint's legacy config format. See Getting Started for ESLint's new "flat" configuration format.
Step 1: Installation
First, install the required packages for ESLint, TypeScript, and this plugin:
- npm
- Yarn
- pnpm
npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint typescript
yarn add --dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint typescript
pnpm add --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:
/* eslint-env node */
module.exports = {
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
root: true,
};
If your project doesn't use ESM, naming the file as .eslintrc.js
is fine. See ESLint's Configuration Files docs for more info.
Step 3: Running ESLint
Open a terminal to the root of your project and run the following command:
- npm
- Yarn
- pnpm
npx eslint .
yarn eslint .
pnpm eslint .
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
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
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 toeslint: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.
Additional Configs
We recommend you consider enabling the following two configs:
strict
: a superset ofrecommended
that includes more opinionated rules which may also catch bugs.stylistic
: additional rules that enforce consistent styling without significantly catching bugs or changing logic.
/* eslint-env node */
module.exports = {
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:@typescript-eslint/strict',
'plugin:@typescript-eslint/stylistic',
],
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
root: true,
};
You can read more about these in our shared configurations docs.
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.
Documentation Resources
- You can read more about configuring ESLint in their documentation on configuration.
- You can read more about the rules provided by ESLint in their documentation on their rules.
- You can read more about the rules provided by typescript-eslint in our rules documentation.