How to Set Up ESLint with TypeScript

Photo by RhondaK Native Florida Folk Artist on Unsplash

How to lint your TypeScript project? Many may wonder. For this blog, I would like to talk about TSLint if it’s not deprecated. So let’s focus on ESLint instead for the long term.

To install ESLint and relevant parser/plugin package, run:

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

Note that the @typescript-eslint/parser will allow ESLint to lint TypeScript code while @typescript-eslint/eslint-plugin will add TypeScript specfic ESLint rules.

In your .eslintrc file add the following:

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: ['plugin:@typescript-eslint/recommended'], // this is optional 
}

To run your ESLint more convenient, add an npm script

{
  "scripts": {
    ...
    "lint": "eslint . --ext .ts",
  }
}

Note the — ext flag is for you to specify which file extensions ESLint will use when searching for target files in the directories you specify. By default, ESLint lints *.js files and the files that match the overrides entries of your configuration.

Examples:

# Use only .ts extension
eslint . --ext .ts
# Use both .js and .ts
eslint . --ext .js --ext .ts
# Also use both .js and .ts
eslint . --ext .js,.ts

Ready to try it out? Let’s run the following command.

npm run lint

Happy reading!

❄️ 🌨 ☃️ ❄️ 🌨 ☃️ ❄️ 🌨 ☃️ ❄️ 🌨 ☃️ ❄️ 🌨 ☃️ ❄️ 🌨 ☃️ ❄️ 🌨 ☃️ ❄️ 🌨 ☃️ ❄️ 🌨 ☃️ ❄️ 🌨 ☃️ ❄️ 🌨 ☃️ ❄️ 🌨 ☃️ ❄️ 🌨 ☃️ ❄️ 🌨 ☃️ ❄️ 🌨 ☃️ ❄️ 🌨 ☃️ ❄️ 🌨