How to Set Up ESLint with TypeScript

Image for post
Image for post
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 will allow ESLint to lint TypeScript code while will add TypeScript specfic ESLint rules.

In your 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 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 files and the files that match the 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!

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store