Adding static analysis tooling to cli-ssg

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 is a collaborative open source project, it becomes especially important to have these in place to enforce common formatting and linting.

Prettier

Prettier is a source code formatter that ensures that all outputted code conforms to a consistent style. I started off by installing it locally using:

npm install --save-dev --save-exact prettier

Creating a config file:

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:

npx prettier --write .

and this is the result that I got:

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:

"scripts": {
    "prettier": "prettier --write .",
    "prettier-check": "prettier --check ."
  }

After this change, I was able to run prettier simply using:

npm run prettier
npm run prettier-check //To check the files that are already formatted, rather than overriding them

ESLint

ESLint 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:

npm install eslint --save-dev

Then, setting up the configuration file using:

npx eslint --init

To test that it had been installed properly, I tried linting the source code:

npx eslint .

It worked! However, it also caught some linting errors:

process was being used without imports, so that one was an easy fix by simply adding:

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:

//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:

"scripts": {
    "eslint": "eslint --config .eslintrc.json ."
  }

After this change, I was able to simply lint the source code using:

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:

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