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
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
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
Create our TypeScript File and lunch our tsc command
We will have something like this
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
We need to fix it
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.