Writing "static-checks" in a React Project.

Cover photo by Dan Dennis

This article is a citation of what Adedeji Stephen originally proposed in a GitHub repository he created. This article is going to walk you through how to set up these "static checks" in a React project.

"Static checks". Why did he even call it that? Okay, let's break it down...

Static checks are more or less the little commands or scripts that you place in the package.json file of a particular project, which ensures that developers follow a strict coding style while collectively on a project.

Code formatting.

In a React project (most JavaScript web projects), you would definitely need to make the code you write readable for other people. Hence the term, "formatting your code".

To perform this particular check, the installation of Prettier's npm package is required. Though, there are other packages that can help you with that. Here is the link to the npm package.

Here's how you can add the check as an npm script that formats all types of file extensions that you specify in the command.

"format": "prettier --write \"src/**/*.+(js|jsx|css|scss)\""

It isn't compulsory that you name the command "format". You can choose to call it anything. It's your choice really.

Although VScode has an extension marketplace that you get the prettier extension from, so there'd be no need to use the npm package if you have that already pre-installed.

ESLint

ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code.

You can set up a static check with eslint, following these steps.

Install eslint and its prettier config via the node package manager.
```
npm i -D eslint eslint-config-prettier
```
The -D flag ensures that these packages are saved as dev-dependencies (i.e they are only to be used in development mode. These dependencies are not shipped alongside the original code to production).
Create the configuration file (you can call it .eslintrc.js or .eslintrc.json, your choice).
```
touch .eslintrc.js
```
Setup the configuration file. Since this article is in the scope of a React Project. I'd recommend that you make use of the Airbnb JavaScript style guide and install the dependencies needed for a typical react project that follows the Airbnb style guide.

npm i -D eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

The "eslint-plugin-import" is an eslint plugin that ensures that the support of the import/export syntax or javascript keywords in a react project.

The "eslint-plugin-jsx-a11y" ensures that accessibility rules are followed strictly when writing JSX code. An example is when there's an omission of the "alt" attribute in an <img /> tag, eslint would throw an error.

The "eslint-plugin-react" runs all the checks that ensure that the proper way/style of writing React code is followed strictly. An example is the "state destructuring assignment" in react components.

When all these dependencies have been made available. All that is needed from you is to setup your config file. Copy the snippet below.

{
  "extends": ["airbnb", "prettier"],
  "parserOptions": {
    "ecmaVersion": 2020,
    "ecmaFeatures": {
      "jsx": true
    },
    "sourceType": "module"
  },
  "env": {
    "browser": true,
    "node": true
  }
}

Once you're done with that. You can add the npm command that lints (corrects) your code style for you

"lint": "eslint --fix \"src/**/*.+(js|jsx)\""

Adding Husky

Husky is a Git hook tool that helps improve your commits and a lot of other stuff too. Check out their documentation.

npm i -D husky lint-staged

In this scope. we'd be using husky to ensure that the lining and formatting of the code that is/was written is done before a commit message can be created.

"We are using Lint-staged to ensure that only the files that are being staged are run through our code quality tools (eslint and prettier), not the entire matching files in the codebase. "

Now you need to add husky's lint-staged config inside package.json

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

lint-staged

"lint-staged": {
  "src/**/*.+(js|jsx|json|yml|yaml|md)": [
    "prettier --write"
  ],
  "src/**/*.+(js|jsx)": [
    "eslint --fix --quiet"
  ]
}

And, yeah that's all.

Thanks for reading through up to this point. Kindly share your opinion on what you think might be better a way of creating static checks for your projects in the comment section.