Setting up ESLINT with TS/JS in your React project in 2023
Tags: react, javascript, webdev, productivity
Published: 2023-03-20 11:01:11

_ESLINT_: Does not matter if you are a seasoned or a novice developer, ESLINT is definitely a term you have come across or heard of at the very least. Even I had heard of it a lot and even used it in applications that already had it configured but never had the liberty and or the chance to set it up on my own in a bare project. And that is exactly what we shall be doing today using the following tools:

**ESLINT** is a pluggable linting tool for JS as well as JSX (basically React) which helps you detect possible errors in your code ranging from a wide array of possibilities such as unused variables in files, illegal comparisons, etc.

**PRETTIER** is probably the most popular code formatter to enforce a certain and consistent style guide in your codebase.

**HUSKY** in its own words is a simple tool to improve your commits and more by making use of [git hooks](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks).



## SETTING UP ESLINT
It's as simple as running the following command in a terminal at the root of your project:

`npm init @eslint/config`

Once you execute it, you will be prompted with a bunch of questions as follows:-
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ugk9xbv96z0or74owbq.png)

Based on your requirements and environment, answer the questions accordingly. At least with eslint version 8.0.1, you are only presented with 2 style guides: [standard](https://github.com/standard/eslint-config-standard) and [XO](https://github.com/xojs/xo).
Personally, I prefer the standard styling guide but at any give time, it is a personal choice and as such feel free to choose any from a bunch of available options. Once all dependencies are installed, ensure that you have the following packages added as devDependencies to your project:

- @typescript-eslint/eslint-plugin
- @typescript-eslint/parser
- eslint 
- eslint-config-standard-with-typescript
- eslint-plugin-import
- eslint-plugin-n
- eslint-plugin-promise
- eslint-plugin-react

At the time of writing this article, eslint latest version is 8.0.1 and there is a high chance that you may not get @typescript-eslint/parser added directly. If that is the case, do not worry. Just add the same as a dev dependency using

`npm i --save-dev @typescript-eslint/parser`

Following is a screenshot of the linter configuration that I work with. Feel free to go about the rules section and tweak it as per your flow. However, it is advisable that you do not go about changing the rules cause any style guide is written keeping certain things in mind but like all things, it is **your** call ultimately.

```
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "plugin:react/recommended",
    "standard-with-typescript",
    "plugin:import/typescript",
    "plugin:prettier/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": ["react", "prettier"],
  "rules": {
    "@typescript-eslint/triple-slash-reference": "off"
  }
}
```

**NOTE**: _Do remember to add a **.eslintignore** file and keep non-essential files such as build, node_modules, dist, etc. in there otherwise the linter will keep yelling at you to fix those changes as well_.


##SETTING UP PRETTIER
This is comparatively a simple process cause most of the setup for prettier was already taken care of when we set up eslint and the related config file. Hit up the following command:-

`npm i --save-dev prettier eslint-config-prettier eslint-plugin-prettier`

Add a **.prettierrc.js** file as follows:

```
module.exports = {
  arrowParens: "avoid",
  bracketSameLine: true,
  bracketSpacing: false,
  singleQuote: false,
  trailingComma: "all",
  tabWidth: 2,
  useTabs: false,
  semi: true,
  printWidth: 80,
};
```

**NOTE**: 
- _Just like a **.eslintignore**, add a **.prettierignore** file containing elements that don't need to be checked_.
- _Don't forget to check the **format on save** setting in VSCode to allow prettier to enforce your changes automatically when you save your code_.


##SETTING UP HUSKY**
We are almost there. This is probably the trickiest and yet the easiest part of everything. The [Husky CLI](https://typicode.github.io/husky/#/) makes it really easy to set things up. Once again, power up a terminal and run the following command:-
`npx husky-init && npm install`

This creates a **.husky** folder at your root level with an existing file called _pre-commit_ and this is the file where you want to add some things so that your codebase is scanned for issues before you are able to commit your code. But before we jump to this file, you wanna edit the **scripts** part of your **package.json** by adding the following lines:

```
"lint": "eslint .",
"lint:fix": "eslint --fix .",
"prettier": "prettier --write .",
```

Once this is done, you head over to the pre-commit file discussed earlier and add a simple line over there:
`npm run lint`
which ultimately translates that before you commit your changes, run the lint script as specified in the package.json file.

To be absolutely sure of things, before committing your code, run the following commands in order: 
`npm run prettier`

`npm run lint:fix`

These will make sure that your code is at least formatted properly and devoid of as many errors that eslint could have fixed automatically for you. If you still see errors on your terminal, head over to the erroneous files and fix the issues manually and then only can you move forward with committing your code.

**************************************************************

And that wraps it up. You are all done towards making and keeping your code well maintained. **HAPPY HACKING!**