Tools to ensure code quality

victorigualada — Wed, 07 Apr 2021 12:47:58 +0000

If you are concerned about the quality of your codebase and you are not using automated tools to validate, format and test your code this post is for you.

Prettier

https://github.com/prettier/prettier

Prettier is a code formatter that will keep the code updated and ensuring a consistent style. Very useful in collaborative projects. Just npm install -D prettier and add a file .prettierrc to configure it. For example:

{
  "trailingComma": "none",
  "semi": true,
  "singleQuote": true,
  "printWidth": 120
}

ESLint

https://github.com/eslint/eslint

Using ESLint in a javascript project is a MUST. Just npm install -D eslint and add a file .eslintrc to configure it. For example, for a Typescript project:

{
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "rules": {
    "quotes": ["error", "single", { "allowTemplateLiterals": true }],
    "no-console": "error",
    "prefer-object-spread": 0,
    "class-methods-use-this": 0,
    "max-len": ["warn", { "code": 120, "ignoreComments": true }]},
  "ignorePatterns": ["coverage", "dist"],
  "extends": [
    "eslint:recommended",
    "prettier"
  ]
}

Prettier can format multiple file types as JSON or Markdown (specially useful for tables)

Lint Staged

https://github.com/okonet/lint-staged

Lint Staged allows you to run commands only on git staged files, speeding up the validation/formatting processes. Just npm install -D lint-staged and add a .lintstagedrc file to configure it. For example, for a Typescript project:

{
  "*.ts": [
    "prettier --write",
    "eslint --fix"
  ],
  "*.{md, json}": [
    "prettier --write"
  ],
}

The orchestrator

https://github.com/typicode/husky

Husky is a tool to manage git hooks. It abstracts their complexity and make them really easy to use.

The installation process is very easy and explained in the README.md of the project.

Just add the name of the hooks (https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks) as a script and put the commands you want to run before the git command completes. For example, for a pre-commit hook, create a pre-commit file inside the .husky directory:

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

npx tsc --noemit && npx eslint --ext .ts .
npx lint-staged
npm run test
# Whatever command you want to run

Conclusion

All this tools working together ensure that you don't commit mistakes and that the style is consistent among all developers.

Bonus track

https://github.com/brightcove/kacl

Keep A Change Log is a tool for keeping your changelog up to date with your package.json version using semantic versioning. It updated and lints the CHANGELOG.md file.