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.
Top comments (0)