Summary of VUE project integration HusKY, CommitLint, Lint-Staged, Prettier

In the development of company projects, there will be many kinds of specifications, code specifications, submission specifications and so on, the purpose is to make the team code style unified, easy to read, easy to understand.

Using the above tools, projects will have the ability to verify submission information is valid, format code before submission, lint code, etc.

1 introduction

1.1 husky

Like many other version control systems, Git has scripting capabilities that perform specific actions at specific times. Husky is simply a tool for adding hooks to Git clients. It provides a number of Git hooks (commit, Push, receive, etc.) where you can easily check commit information, run test cases, check code, and so on.

1.2 commitlint

Commitlint can verify that the submission information is normal. The submission format is as follows:

    git commit -m <type>: <description>
Copy the code

Where type can be the following values:

• build: The main purpose is to modify the submission of the project build system (e.g. glUP, Webpack, rollup configuration, etc.)
• ci: The main purpose is to modify the submission of the project to continue the integration process (e.g. Travis, Jenkins, GitLab CI, Circle, etc.)
• docs: Document update
• feat: New features
• fix: bug fixes
• perf: Performance optimization
• refactor: Refactoring code (no new features, no bug fixes)
• style: Code changes that do not affect program logic (modify whitespace characters, complete missing semicolons, etc.)
• test: Add test cases or update existing tests
• revert: Rolls back an earlier commit
• chore: Other types that do not fall into the above categories (routine)

Such as:

Git commit -m "fix"Copy the code

1.3 lint – staged

You can run the relevant Lint plug-in for code detection.

1.4 prittier

You can format your code to ensure a uniform format.

2 configurationhusky

1. The installation

    yarn add husky -D
Copy the code

2. After the following command is executed, a root directory is displayed.huskyThe directory.

    yarn husky install
Copy the code

3. To ensure that other people download the project code, it is automatically enabledhook, so need inpackage.jsonthescriptsadd"postinstall": "husky install", such as:

    {
      "scripts": {
        "postinstall": "husky install"
      }
    }
Copy the code

Note: For NPM installation, see here

2 configurationcommitlint

1. The installation

    yarn add @commitlint/cli @commitlint/config-conventional -D
Copy the code

2. Creating a Configuration File

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

Or create a new commitlint.config.js file in the root directory and type the following:

    module.exports = {extends: ['@commitlint/config-conventional']}
Copy the code

3. increasecommit-msghook

    yarn husky add .husky/commit-msg 'yarn commitlint --edit "$1"'
Copy the code

After executing the above command,.husky will have the file commit- MSG. At this point, the project can verify that the submitted information complies with the specification, and if you want to try it out, you can try it out.

4. Use under Windowsgit bashperformcommitContains may appear whenstdin is not a ttyAn error. Can be found in.huskyCreate one in the directorycommon.shFile:

#! /bin/sh command_exists () { command -v "$1" >/dev/null 2>&1 } # Windows 10, Git Bash and Yarn workaround if command_exists winpty && test -t 1; then exec < /dev/tty fiCopy the code

#! / bin/sh. "$(dirname" $0 ") _ / husky. Sh ", "$(dirname" $0 ")/common sh "yarn...Copy the code

    yarn add lint-staged -D
Copy the code

    {
      "./src/**/*.{js,jsx,ts,tsx,vue,less,sass,scss,css.json}": ["prettier --write"],
}
Copy the code

    yarn add prettier -D
Copy the code

/ / see the https://prettier.io/docs/en/options.html module exports = {printWidth: 80, / / the length of each row tabWidth: UseTabs: false, useTabs: false, semi: true, useTabs: false, useTabs: false, semi: true False, // Use single quotes instead of double quotes. JSX quotes rules ignore this configuration. QuoteProps: "as-needed", // jsxSingleQuote: false, // use single quotes instead of double quotes in JSX trailingComma: "es5", // whether there is a trailingComma, such as the last item of an array or object. // Print space jsxBracketSameLine: false in the syntax of the object literal {}, // Start label > is on the same line as the previous content arrowParens: "Always ", // arrow function arguments are parenthesised // always/avoid rangeStart: 0, // rangeEnd: Infinity, // need to format the end of the position};Copy the code

    yarn husky add .husky/pre-commit 'yarn lint-staged --allow-empty "$1" && yarn lint'
Copy the code

    yran prettier "./src/**/*.{js,jsx,ts,tsx,vue,less,sass,scss,css.json}" --write && yarn lint
Copy the code