Running stylelint on pre-commit

Background

If you adopt an operation (Recommend) where individuals apply formatting by running stylelint --fix or using editor extensions, code that hasn't been executed might be formatted during other fixes, resulting in noise. Furthermore, if unnecessary differences appear during review, bugs might occur due to oversights.
For these reasons, we will enforce formatting at the time of commit.

Required Packages

npm i -D stylelint husky lint-staged

• stylelint
• husky
• lint-staged

I will omit the stylelint definitions and other details.

Description to be added to package.json

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "**/*.{css,scss}": [
      "stylelint --fix"
    ]
  }
}

Finally

Since we are using husky and lint-staged, integration with tools like ESLint or Prettier is also easy.

Other examples

{
  "lint-staged": {
    "**/*.js": [
      "eslint --fix",
      "eslint"
    ],
    "**/*.html": [
      "prettier --parser html --write"
    ]
  }
}