React Code Quality

In any Frontend project, especially with big teams, it is important to standardize the code style and formatting, this has many benefits:

1- It will ensure clean code which follows the best and consistent practices across the team, especially with newbies who might not know why a specific way of writing code is better than another.

2- It Will help everyone to learn and get improved, as every linting rule is there for a purpose and each JS standard has a list of reasons with examples why any specific rule is needed.

3- It reduces code review time and makes it more focused on code quality and optimizations instead of syntax and style, so you don’t have to add comments again to ask your colleague to use const instead of var, or remove an unused variable or module.

4- It will help the developer gaining more confidence in his code.

So, I hope I convinced you or gave you enough reasons to convince you to adopt linting and styling tools for your project.

The most famous tools in the JS community for code formatting and syntax linting are Prettier and ESlint.

Eslint:

Eslint is a code linting tool with the goal of making code more consistent and avoiding bugs.

Now, what is linting?

Code linting is a type of static analysis that is frequently used to find problematic patterns or code that doesn’t adhere to certain style guidelines. There are code linters for most programming languages, and compilers sometimes incorporate linting into the compilation process.

Why do we need one for JavaScript?

Since JavaScript is dynamic and a loosely typed language, it is prone to developer errors. Without the benefit of a compilation process, .js files are typically executed in order to find syntax or other errors.

Linting tools like ESLint allow developers to find problems with their JavaScript code without executing it.

What makes ESLint so special?

Good question! Everything in ESLint is pluggable. You can add rules on run time — the rules and formatter don’t have to be bundled to be used. Every linting rule you add is stand-alone, any rule can be turned on or off. Each rule can be set to a warning or an error. Your choice.

Using ESLint, you get complete customization of how you want your style guide to look.

How to use it?

So let us see how to configure that for our react js project.

1. Open the terminal in your project root folder and install eslint as a dev dependency.

npm install eslint --save-dev
or
yarn add eslint --dev

2. After that we will generate your .eslintrc.json file to generate your eslint configuration file.

npx eslint --init
or
yarn run eslint --init

3. This might prompt multiple options so, first select To check syntax and find problems after that select JavaScript modules (import/export) then select React Now it will ask Does your project use TypeScript No/Yes. Now select Browser and then JSON option. It will then prompt you to install eslint-plugin-react so click on yes.

4. Replace your .eslintrc.js file content with content from this gist.

Prettier

Prettier is an opinionated code formatter. It formats code for you in a specific way.

Why do we need one for JavaScript?

1. It's quite easy to use even with the existing codebase.
2. It uses the least controversial coding style while formatting your code.
3. It handles the code formatting quite well.
4. It helps the newbies for maintaining the code quality.

How to use it?

1. Open the terminal in your project root folder and install prettier as a dev dependency.

npm install prettier --save-dev
or
yarn add prettier --dev

2. For Standalone use only — Let’s create a .prettierrc.json file in our root app folder, and add some prettier rules to it.

You can find some recommended prettier rules here.

Eslint with Prettier

Linters usually contain not only code quality rules, but also stylistic rules. Most stylistic rules are unnecessary when using Prettier, but worse — they might conflict with Prettier! Use Prettier for code formatting concerns, and linters for code-quality concerns.

You can find Prettier vs. Linters at this link.

So to avoid any conflict with linters like eslint we have to use some packages.

npm install eslint-config-prettier eslint-plugin-prettier --save-dev
or
yarn add eslint-config-prettier eslint-plugin-prettier --dev

You can find some recommended eslint and prettier configurations here.

You don't need to run a linter or prettier, react application will automatically handle it on hot reloading.

Thanks a lot for reading this article. Make sure you give this post claps if you enjoyed this post. 👏👏👏👏