Adding static analysis tooling to cli-ssg
Published: 2021-11-05 16:42:41

Static analysis tools help us maintain the quality of our source code by fixing formatting issues, spotting suspicious coding constructs, or alerting us to common errors. As [cli-ssg](https://github.com/dhillonks/cli-ssg) is a collaborative open source project, it becomes especially important to have these in place to enforce common formatting and linting.

## Prettier
[Prettier](https://prettier.io/) is a source code formatter that ensures that all outputted code conforms to a consistent style. I started off by installing it locally using:
```bash
npm install --save-dev --save-exact prettier
```
Creating a config file:
```bash
echo {}> .prettierrc.json
```
Creating a `.prettierignore` file to ignore the following artifacts:
```
# Ignore artifacts:
node_modules
sample_input
```

To test that Prettier had been configured properly, I tried to format all files using:
```bash
npx prettier --write .
```
and this is the result that I got:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x6vxsfywjz6onneudfy4.png)

Since everything was working as expected, I went ahead and added a **one-step** solution for anyone working with the repository by adding a simple `npm` script to run `prettier`.
In `package.json`:
```json
"scripts": {
    "prettier": "prettier --write .",
    "prettier-check": "prettier --check ."
  }
```
After this change, I was able to run prettier simply using:
```js
npm run prettier
npm run prettier-check //To check the files that are already formatted, rather than overriding them
```

## ESLint
[ESLint](https://eslint.org/) is a linter that statically analyzes the code to quickly find problems and helps us avoid certain code patterns that often lead to bugs.

I started off by installing it locally:
```bash
npm install eslint --save-dev
```
Then, setting up the configuration file using:
```bash
npx eslint --init
```

To test that it had been installed properly, I tried linting the source code:
```bash
npx eslint .
```
It worked! However, it also caught some linting errors:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0jmhun7oxe81u5a84am7.png)
`process` was being used without imports, so that one was an easy fix by simply adding:
```js
const process = require('process');
```
The `no-unused-vars` was a little tricky to fix as `argv` was a part of the CLI setup and thus it was not possible to remove it. I ended up ignoring that line using:
```js
//eslint-disable-next-line no-unused-vars
```
 
Running it again, the errors were indeed fixed and this time it gave no errors or warnings.

To again add a simple script to run eslint, I added a `eslint` script to `package.json`:
```json
"scripts": {
    "eslint": "eslint --config .eslintrc.json ."
  }
```

After this change, I was able to simply lint the source code using:
```bash
npm run eslint
```

## VSCode integration
Since I had already configured a formatter and linter, I now wanted to integrate them with VSCode. I did this by creating a `settings.json` file in the .vscode directory. I added options to use `prettier` as the default formatter, to run `prettier` whenever a file was saved:
```
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}
```

## Pre-commit hook
The last thing I wanted to do was setup a pre-commit hook using [husky](). I started off by installing it:

```
npx husky-init && npm install
```
Using `pretty-quick` and creating the pre-commit hook:
```
npm install --save-dev pretty-quick
npx husky set .husky/pre-commit "npx pretty-quick --staged"
```

Now, if a user creates a commit, the formatter is automatically run:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jt7hpb50ubbhq7f3tjob.png)

Github: https://github.com/dhillonks/cli-ssg