Husky installation records

husky-init

Follow the steps on the website and add Husky to the project using the recommended methods on the website

npx husky-init && npm install # npm 
npx husky-init && yarn # Yarn 1 
yarn dlx husky-init --yarn2 && yarn # Yarn 2
Copy the code

NPX husky-init = NPX husky-init = NPX husky-init = NPX husky-init

cj@cjdembp sweet-app % npx husky-init npx: Json setting prepare script to command "husky install" fatal: Not a git repository (or any of the parent directories): .git can't create hook, .husky directory doesn't exist (try running husky install)Copy the code

NPX husky-init && yarn: NPX husky-init: NPX husky-init: NPX yarn

cj@cjdembp sweet-app % npx husky-init npx: 2 The installation is successful. Json "husky install" command already exists in prepare script NPX husky-init husky-git hooks installed husky-created. Husky /pre-commitCopy the code
Add the commit-msg hook

Then add a husky hook -commit-msg

cj@cjdembp sweet-app % npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
husky - created .husky/commit-msg
Copy the code
Test the

If the NPM test command is executed, the hook is executed

cj@cjdembp sweet-app % git add .
cj@cjdembp sweet-app % git commit -m 'feat: init && husky' 

> sweet-app@0.0.0 test /Users/cj/dev/sweet-app
> echo 'Error: no test specified'

Error: no test specified
not found: commitlint
husky - commit-msg hook exited with code 127 (error)
Copy the code

Commitlint Installation records

Still is according to the document to go first ~

yarn add @commitlint/{config-conventional,cli} -D
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
Copy the code

Git add. && git commit -m ‘test’

Cj @ cjdembp sweet - app % git commit -m "test" > sweet-app@0.0.0 test/Users/chenjing/dev/sweet - app > echo 'Error: // No test specified' Error: no test specified // No test specified: no test specified // No test specified: no test specified // No test specified Test * subject may not be empty [subject-Empty] * Type may not be empty [type-empty] * Found 2 problems, 0 warnings ⓘ Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint husky - commit-msg hook exited with code 1 (error)Copy the code

Very well, a non-canonical COMMIT was intercepted! Try the correct submission again

cj@cjdembp sweet-app % git commit -m 'feat: commitlint'
Copy the code

Success, heh heh 😁

eslint+prettier

eslint

Install eslint first

yarn add eslint --dev
Copy the code

Oh 😯, this is an error:

The error @ eslint/eslintrc@1.0.4: The engine "node" is incompatible with this module. The Expected version "^ 12.22.0 | | ^ 14.17.0 | | > = 16.0.0". Got "14.15.1" error Found incompatible module.Copy the code

My node version does not meet the requirements, at this time my Node version is 14.15.1, upgrade

Sudo NPM install -g n // Sudo sudo n stable cj@cjdembp sweet-app % node -v v16.13.0Copy the code

Hey, hey, okay. Yarn add ESLint –dev install all the way! Next, initialize the configuration

yarn run eslint --init
Copy the code
prettier

The installation

yarn add --dev --exact prettier
echo {}> .prettierrc.json
Copy the code

Prettier-code Formatter next, vscode prettier-code Formatter is added to the editor’s accompanying configuration.

Because we use ESLint, install eslint-config-prettier for them to work together

yarn add -D eslint-config-prettier
Copy the code

Prettier then needs to be put into the ESLint configuration file. And be sure to place it at the end of extends to override other rules and avoid conflicts.

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
+ "prettier"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 13,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
    }
};

Copy the code

Integrate with Git hooks

yarn add --dev husky lint-staged
Copy the code

Then modify the behavior of the. Husky /pre-commit hook

-npm test // This is set when initializing husky, remember
+ npx lint-staged
Copy the code

Finally, add this to package.json

"lint-staged": { "**/*": "prettier --write --ignore-unknown" }
Copy the code

Then try it, mess up the file format, and submit it once, and find it formatted successfully! Hey hey 😁