How to integrate ESLint with your React Typescript project (2021)
Tags: eslint, javascript, react, webdev
Published: 2021-05-31 17:33:02

When we are working on a project of the most common problem is the code quality, for that reason, there are several tools that can be integrated into our project to make sure of that. 


# Importance of Code Quality?

![Importance of Code Quality.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1622481802986/i00LPR0R2.png)

- **Making software robust**: The ability to cope up with the errors during the program execution in spite of the unusual conditions.
- **Increasing readability and ease of editing**: Good quality of code makes sure that codes are written in such a way that makes them highly readable. The use of comments, proper indentation, clear notations, and simplicity in the flow are some factors. 
- **Making program sustainable**: Software is said to be sustainable when it can survive over time with minimal changes. 
- **Promotes easy transferability**: Code quality practices make the translation of software across platforms straightforward with minimal changes.
- **Decreasing technical debt**: One of the biggest problems in software projects is technical debt, a software with poor quality is set to fail early unless a significant number of changes are brought into the program repeatedly and hence increasing the technical debt. The extra development work is time and capital-consuming, which a high-quality code avoids.

In this post, we will see how to integrate ESLint in your React project and some common stuff related to configuration. [ESLint](https://www.npmjs.com/package/eslint) is an npm package that helps to find and fix problems in projects. Provide some feature as find problems, fix automatically and also customization based in our project and team rules.

# Install ESLint package dependency

First of all, we need to install ESLint

```
npm install eslint --save-dev
```

After running that you will see that eslint was added as a development dependency in the package.json file. 

```json
{
...
"devDependencies": {
    "eslint": "^7.26.0"
  },
...
}
```

**Note**: The Eslint version could be different there isn't a problem with that.

# Setup ESLint in our project

Run the next command in the terminal inside the project folder

```
npx eslint --init
```

After running this command, you will need to answer some questions related to your project and the configuration you want.

> **How would you like to use ESLint?** 

**Answer**: to check syntax, find problems, and enforce code style

> **What type of modules does your project use?**

**Answer**: JavaScript modules (import/export)

> Which framework does your project use?

**Answer**: React

> **Does your project use TypeScript?**

**Answer**: Yes

> **Where does your code run?**

**Answer**: Browser

> **How would you like to define a style for your project?**

**Answer**: Use a popular style guide

> **Which style guide do you want to follow?**

**Answer**: Airbnb: [https://github.com/airbnb/javascript](https://github.com/airbnb/javascript)

> **What format do you want your config file to be in?**

**Answer**: JSON

> **Would you like to install them now with npm?**

**Answer**: Yes

Then, it will install all the packages needed. After the installation, the development dependencies in the package.json file could something similar to 

```json
 "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.24.0",
    "@typescript-eslint/parser": "^4.24.0",
    "eslint": "^7.26.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-plugin-import": "^2.23.3",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.23.2",
    "eslint-plugin-react-hooks": "^4.2.0",
  },
```

After that you will that was created a new file called .eslintrc.json at the root of the project with the rules and configuration related to ESLint. The file content should looks something similar to

```json
{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "plugin:react/recommended",
        "airbnb"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {}
}
```

# Running ESLint

Install [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) for VSCode, After that need to reload the VSCode window once to get proper linting.*

ESLint will automatically start detecting errors/warnings in the files. If that's not the case then either your project has no linting errors or ESLint is not properly set up. 

To test if the linting works, we should run the ESLint command in the terminal with folder path and notice output.

```
npx eslint .
```

Finally, you can also add linting to scripts in package.json as a part of your pipeline process in the project


```json
{
  "scripts": {
      "lint": "eslint src/*",
      "lint:fix": "eslint src/* --fix",
      "lint:quiet": "eslint src/* --quiet"   
  }
}
```
**Notes**:
- To automatically fix some errors, you can use ‘--fix’ in the command
- If you want to ignore warnings, you can use ‘ --quiet’ in the command
- To specify some type of files to check you can use '--ext' and pass the extensions that want to be checked

## .eslintignore

To disable the linting of some files/folders you could create a .eslintignore at the root of the project.

```
node_modules
dist
coverage
```

# How to solve common ESLint rules problems

> **Problem**: import/extensions

#### How to fix it?
In **eslintrc.json**, over **rules**, add the following

```json
{
    "rules": {
        "import/extensions": ["error", "ignorePackages", { "ts": "never", "tsx": "never" } ]
    }
}

```

> **Problem**: react/jsx-filename-extension

#### How to fix it?
In **eslintrc.json**, over **rules**, add the following

```json
{
    "rules": {
        "react/jsx-filename-extension": ["warn", { "extensions": [".tsx",] }],
    }
}
```

> **Problem**: import/no-extraneous-dependencies

#### How to fix it?
This is common when we are working in the devDependencies. To fix just add the following in **eslintrc.json** over **rules**.

```json
{
    "rules": {
        "import/no-extraneous-dependencies": ["error", {"devDependencies": true}]
    }
}
```

> **Problem**: import/no-unresolved

#### How to fix it?
Install [eslint-import-resolver-typescript](https://www.npmjs.com/package/eslint-import-resolver-typescript) package

```
npm install eslint-import-resolver-typescript --save-dev
```
After that on eslintrc.json add a new property called settings

```json
{
    "settings": {
        "import/resolver": {
            "typescript": {}
        }
    }
}
```

# Conclusion

Eslint is an awesome tool that we need to integrate into every project due that improve the code quality in our React projects. Need to consider every specific case of use, just to make sure the best performance and render time speed in our React projects. 

I will be updating this post based on your comments and recommendations so let me know in any case that you have a common rule problem with Eslint and React that can be added or something like that. Thanks for all! 👍

<a href="https://www.buymeacoffee.com/brayanarrieta"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=brayanarrieta&button_colour=5F7FFF&font_colour=ffffff&font_family=Cookie&outline_colour=000000&coffee_colour=FFDD00"></a>

# References
- [Airbnb Style Guide](https://github.com/airbnb/javascript)
- [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- [eslint-import-resolver-typescript](https://www.npmjs.com/package/eslint-import-resolver-typescript)
- [ESLint](https://www.npmjs.com/package/eslint)
- [Why is code quality important?](https://www.codegrip.tech/productivity/why-is-code-quality-important/)