Adding more tools to control code quality
Tags: opensource, javascript, codequality
Published: 2021-11-05 05:05:06

Last month, I had to work with different Static Analysis tooling like Prettier, Flake8, esLint as required by those open source projects to make their code style identical and at good quality. 

This week, I have a chance implement them [into my project](https://github.com/TueNguyen2911/tue-1st-ssg/pull/27) as an author to ensure my code stay consistent when different people contribute. The extensions I chose to add to the workflow are: 
 - [Prettier](https://prettier.io/)
 - [ESLint](https://eslint.org/)
 - Editor/IDE Integration(.vscode/)
 - Git Pre-Commit Hook(`husky` and `lint-staged`)

## Prettier 
This code formatter is very popular in the Web-dev community as it: 
- An opinionated code formatter
- Supports many languages
- Integrates with most editors
- Has few options
- Doesn't take long to configure

To install `Prettier`, firstly run
```bash 
npm install --save-dev --save-exact prettier
```
Create 2 files `.prettierrc.json` and `.prettierignore`. Add formatting options to `.prettierrc.json` and choose what files/folders to ignore by editing `.prettierignore`. 

 However, if you are using Windows, it's better to manually create these 2 files rather than using `echo{}` like in the [docs](https://prettier.io/docs/en/install.html) as the command will create UTF-16LE encoded files. 

## ESLint 
ESLint is also a powerful to detect and fix linting problems in your JavaScript code. You can install ESLint running 
```bash 
npm isntall eslint --save-dev      
npx eslint --init  
``` 
Edit your `.eslintrc.json` to your reference, it supports different plugins and configuration files aside from its normal options, you can take a look at mine
```json 
{
  "env": {
    "node": true,
    "commonjs": true,
    "es2021": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": "latest"
  },
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"],
    "require-atomic-updates": "error",
    "max-len": ["warn", { "code": 200 }]
  }
}
```

## Editor Integration 
Integrating these static analysis tools into the editor makes it smoother as we can see what changes and what is wrong while writing code rather in build time. 

My approach is too create a `.vscode/` folder containing `settings.json` that configures the VSCode editor settings directly and `recommendations.json` that has VSCode recommended extensions. 

## Adding a pre-commit hook: 
Why `husky` and `lint-staged`? `husky` a JS package for defining and executing git hooks and `lint-staged` is used to run linters against your staged files, in our case we're using it with the pre-commit hook
```bash
npm install --save-dev lint-staged husky
npx husky-init 
```
Add these your `package.json` file 
```json 
"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.js": [
      "npx prettier --write",
      "npx eslint"
    ]
  }
```
.husky/pre-commit file
```

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx eslint .
```
`husky` works according to the script `hooks` we specify in the object we within in the `package.json` file and `lint-staged` will perform the 2 line scripts on files with `js` extension. With these configurations, whenever you try to commit, the pre-commit hook will make sure to format the code and show you linting errors.