Linting Our React App

“Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live” ― John Woods

How many years have you’ve been coding? 5 years? 10 years? A lifetime?

Have you’ve found your own code style?

Well, if you’ve found one for a programming language, you can’t apply it directly across different programming languages. Furthermore, if you’re working with other guys for the project, sometimes there’ll be some argument about which code style to use.

It’s common to use standard code convention, whether it defined by the programming language (such as PEP8 for Python) or by some popular companies using the language (like Airbnb and Google guide for JavaScript).

There are also some tools for checking the styling convention called linter. It usually comes in a form of CLI (Command Line Interface) — a program that can run from terminal.

Here, I’ll try to explain how we adopt the code convention applied by Airbnb using eslint.

Installing Eslint

You can install eslint using npm install. There are two different approaches for where to install the package: local or global. Some of the developers out there prefer global installation, which makes the binary of the package available across the system. But here we install eslint locally so other developer contributing to the project are also aware of this package.

npm install --save-dev eslint

This will install eslint in your node_modules and add it to your devDependency list.

You can start using it for linting a file (for example your_file.js):

./node_modules/.bin/eslint your_file.js

Initialize Configuration

eslint run based on a configuration that can be defined in a .eslintrc.js or .eslintrc.json or .eslintrc.yml. These files will be detected automatically by the eslint, but you can also specify other configuration file path if you want.

You can create it with the help of eslint --init and answer some of the questions.

This option will start config initialization wizard. It’s designed to help new users quickly create .eslintrc file by answering a few questions, choosing a popular style guide, or inspecting your source files and attempting to automatically generate a suitable configuration.

These are the questions (and our answer as the strategy we used):

? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? React
? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)Browser
? How would you like to define a style for your project? Use a popular style guide
? Which style guide do you want to follow? Airbnb (https://github.com/airbnb/javascript)
? What format do you want your config file to be in? JavaScript

Some problem we encountered

While applying eslint to our project, we’ve encountered some problem. Well, maybe it’s normal for linting a running project which already has a bunch of code written in it.

For us, the main problems are these two:

1. The parser
   The javascript is parsed using some script. If we not using the babel-parser, the eslint will throw some error. To fix this, just add parser configuration in .eslintrc file.
2. Integration with jest
   The eslint also not support jest syntax by default. So to enable it you have to add jest env to the configuration files.

References:

ESLint + Prettier For a Consistent React Codebase

Setting up ESLint in React