Application quality of keep

I wrote this in order to avoid stumbling at the beginning and make the process smoother.

husky - npm typicode / husky

npm install --save-dev husky
npm set-script prepare "husky install"
npm run prepare

"set-script" adds "husky install" to the scripts in package.json, and creates a ".husky".

Next, create the "pre-commit.sh" file.

npx husky add .husky/pre-commit "npx lint-staged"
git add .husky/pre-commit

If you proceed according to the GitHub Usage, files such as the following will be generated in the .husky folder and its sub folders:

pre-commit.shell
#!/bin/sh
. "$(dirname "$0")/\_/husky.sh"

npx lint-staged

Initially, it is set to "npm run test", but it will be rewritten here to trigger "staged".

Next, write each lint triggered by lint-staged at the bottom of package.json (anywhere except for scripts).

npm install --save-dev lint-staged

  "scripts": {
    "lint-staged": "lint-staged",
    "prepare": "husky install"
  },
  .....
"lint-staged": {
    "*.{js,ts,jsx,tsx}": "eslint --fix",
    "*.{css,scss}": "stylelint --fix"
}

I omitted prettier this time because it runs on save. Actually, I tried it, but since prettier is executed on all files. Only lint-related tasks seem to be executed at commit time with lint-staged.

As a test, when committing a description that violates the syntax of lint, it returns an error correctly. The GUI of VSC also throws an error.

Next, configure stylelint.

npm install --save-dev stylelint stylelint-config-recommended stylelint-config-recess-order postcss-scss

{
  "extends": ["stylelint-config-recommended", "stylelint-config-recess-order"],
  "customSyntax": "postcss-scss"
}

Here's an example of stylelint configuration.
Since you need to spend some time setting rules, I think it's completely a matter of preference for small projects.

Style lint rules can be disabled by assigning null. Whether or not stylelint is necessary may depend on the scale.

Finally, we'll configure Prettier to run on save. First, install the Prettier - Code formatter VSCode plugin. Create a .vscode folder at the root of your project and add the following to settings.json.

{
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true,
    "source.fixAll.eslint": true
  },
  "stylelint.validate": ["css", "scss"],
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false
}

Change Visual Studio Code default formatter to prettier. Create a .prettierrc file at the root of your project to configure options such as the line width.

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

Next, configure commitlint. Enable husky's Git hook.

npx husky install

npm install --save-dev @commitlint/cli @commitlint/config-conventional

Create commitlint.config.js in the root of the project and add rules.

module.exports = {
  extends: ['@commitlint/config-conventional'],
};

Add commitlint hook to husky.

npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'

Add package.json commitlint command.

  "scripts": {
    "commitlint": "commitlint -e $GIT_PARAMS",
  },

That's it for configuring husky, lint-staged, and eslint stylelint commitlint Prettier! feel free to add additional configurations such as lint on your preferences!