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?

• 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 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.

{
...
"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

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

 "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

{
    "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 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

{
  "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

{
    "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

{
    "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.

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

Problem: import/no-unresolved

How to fix it?

Install eslint-import-resolver-typescript package

npm install eslint-import-resolver-typescript --save-dev

After that on eslintrc.json add a new property called settings

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

Problem: no-use-before-define

How to fix it?

This is common when there is a mismatched version with @typescript-eslint. To fix just add the following in eslintrc.json over rules.

{
    "rules": {
        "no-use-before-define": "off",
        "@typescript-eslint/no-use-before-define": ["error"]
    }
}

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! 👍

References

• Airbnb Style Guide
• ESLint extension
• eslint-import-resolver-typescript
• ESLint
• Why is code quality important?