DEV Community

Tue
Tue

Posted on

Adding more tools to control code quality

#opensource #javascript #codequality

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 as an author to ensure my code stay consistent when different people contribute. The extensions I chose to add to the workflow are:

  • Prettier
  • ESLint
  • 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

npm install --save-dev --save-exact prettier
Enter fullscreen mode Exit fullscreen mode

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

npm isntall eslint --save-dev      
npx eslint --init
Enter fullscreen mode Exit fullscreen mode

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

{
  "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 }]
  }
}
Enter fullscreen mode Exit fullscreen mode

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

npm install --save-dev lint-staged husky
npx husky-init
Enter fullscreen mode Exit fullscreen mode

Add these your package.json file

"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.js": [
      "npx prettier --write",
      "npx eslint"
    ]
  }
Enter fullscreen mode Exit fullscreen mode

.husky/pre-commit file


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

npx eslint .
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (2)

Collapse
 
alembiq profile image
Karel Křemel •

why do you need husky, you can tell git to use specific folder for hooks and distribute your hooks there

.gitconfig:

[core]
  hooksPath = ./hooks/
Enter fullscreen mode Exit fullscreen mode
Collapse
 
tuenguyen2911_67 profile image
Tue •

I worked on some projects that use husky, so I decided to do so as well. Thank you so your suggestion, I will look into it! I've never set up any workflow before so it's my bad 😅