Leveraging ESLint for your React project

- 3 mins

Leveraging ESLint for your React project

JavaScript is a dynamic and flexible language. However, one trade-off is that this freedom allows syntax errors, problematic patterns, and wrong set variables (like global variables) to slip into your code without realizing it. All of this happens because you need to run the code, whereas compiled languages will give you immediate feedback.

Wikipedia gives us a hint where linting originated from:

lint, or a linter, is a tool that analyzes source code to flag programming errors, bugs, stylistic errors, and suspicious constructs. The term originates from a Unix utility that examined C language source code. – Wikipedia

To lint your code falls in the category of white-box testing as the internal structure/design/implementation of the item being tested is known to the Software Engineer. Linting tools are powerful, available for various programming languages, and well established in today’s Software Development processes. In short, linting means:

Today we want to take a closer look at how we can leverage ESLint for React projects.

Adapting ESLint for your React project

Following, I want to highlight three plugins from above that will generate instant quick wins for your development process besides increasing the user experience.

eslint-plugin-react

The es-lint-plugin-react package provides you React specific linting rules like

The last rule in the above list is essential to be one step closer to a performant React app. As mentioned in React and MobX: Performance Optimization, binding functions early will allow you to avoid creating new closures in the render method and further re-renders of components.

eslint-plugin-react-hooks

Hooks are a relevant new addition to React (16.8). Now you don’t need a class to use state or other React features.

Let’s take a close look at the rules of this ESLint package.

react-hooks/rules-of-hooks

One important thing beforehand is that React relies on the order in which Hooks are called.

react-hooks/exhaustive-deps

eslint-plugin-jsx-a11y

The accessibility of websites and apps is one of the most overlook areas these days. Helpers like ESLint packages or Google Chrome Lighthouse reports help to identify and solve existing gaps.

One great advantage of adding this package to your codebase is that it reminds you adding arias roles as much as an alt text for your images or not using javascript:void in your anchor tags. Every single element on the web has that follows accessibility guidelines like W3C contributes to an open and inclusive space.

Fin

Don’t worry if your linter feels a bit overwhelmed after adding those plugins. In my experience, they contribute to a sound foundation of your codebase and your process. Every team needs to find its sweet spot as much linting, and too many active rules define limitations in the wrong place.

Checkout the reference to the office docuemnation below for more details.

References

Florian Josef Reheis

Florian Josef Reheis

Business Controller turned Software Engineer & Digital Marketer

comments powered by Disqus
rss facebook twitter github youtube mail spotify lastfm instagram linkedin google google-plus pinterest medium vimeo stackoverflow reddit quora quora