How to add ESLint to your TypeScript Project

I was wondering if I was able to use ESLint for my TypeScript Project, and for a small step and to keep learning I said let’s give it a try and there are advance configurations that it will help you with your project like remove semicolons (because it is not needed it JavaScript) and the list can go on.

ESLint

ESLint is an analyzer that help you find problems, and you can set up to adapt your own coding styles, really handy!

Installation

Create a directory
add the NPM command to start your package JSON

$ npm init -y

Install TypeScript and run the command to create tsconfig file and add your common configuration for TypeScript I will add only the baseUrl and adding a src folder and output folder

$ npm i typescript
$ tsc --init

Example adding baseUrl to the tsconfig.json

Install ESLint (parser, pluging)

$ npm i --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

Create ESLint file configuration eslintcr.js this is a really basic structure you can add or set the best configuration for you

configuration for .eslintcr.js

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

Create a ESLint ignore file, these directories won’t be analyzed with ESLint

Example eslintignore file

Create our TypeScript File and lunch our tsc command

Example class Book TypeScript

We will have something like this

The Whole directory

then run command for Eslint this will check all the code and will analyze if there are errors on it and will show it on console

$ npx eslint . --ext .js,.jsx,.ts,.tsx

Example errors output

We need to fix it

Example fixing error on output

Example No more problems

Conclusion

This is a small step for webpack for helping us analyze our TypeScript file for now, but we can set more things, and it will help us with huge projects and make our code more efficient and with the best practices.

Sources

typescript-eslint/README.md at master · typescript-eslint/typescript-eslint

The future of TypeScript on ESLint