Build code from HUSky & Lint-staged to review workflows

For students with a certain degree of engineering literacy, coding specifications are particularly important, and code style checking (Lint) is an important way to ensure that coding specifications are consistent.

Lint, a tool that statically analyzes code and tries to find potential problems.

Benefits of Using Lint

• Higher code readability. When code is written, it ultimately needs to be read by someone else, and cluttered code is often a turnoff to the reader, difficult to understand, and impossible to maintain.
• Fewer bugs. Research shows that the global economic loss caused by software bugs is about more than $300 billion
• For more efficient development, Lint can easily help us find low-level/obvious errors.

Front-end Lint tools

• ESLint
• Standard
• SCSSLint
• JSONLint
• HTMLHint
• Github produces a list of Lint tools

When to conduct code reviews

The most common code review workflows are local and remote:

1. Local code ahead (git hooks triggered)

Commit => trigger git precommit hook => code check found problem (local) => fix problem => code recommit => Trigger Git precommit hook => code check found problem (local)Copy the code

2. Continuous Integration phase (CI)

Code submission => Code inspection found problem (remote) => Fix problem => Code resubmission => Code inspection passed (remote)Copy the code

Remote Lint involves a lot of configuration, and the feedback chain for remote Lint is too long to cover.

Here is how to check the code before the local advance code.

Lint before native code is submitted

It is convenient to conduct code reviews locally. A common practice is to use husky or pre-commit to Lint before committing native code

Here, let’s take husky as an example and put it into practice with a VUE project created using VUE/CLI 3.0

The process of creating vue/ CLI 3.0 project is not introduced here. If you need it, you can refer to the official website of Vue/CLI

Use husky

Install dependencies

yarn add husky --dev
Copy the code

or

npm install -D husky
Copy the code

Modify the package. The json

Modify package.json to add the following configuration

"husky": {
  "hooks": {
    "pre-commit": "yarn lint"
  }
}
Copy the code

The “yarn lint” command called by “pre-commit”, which is the command configured in “script” of package.json:

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "test:unit": "vue-cli-service test:unit"
}
Copy the code

Try git commit

At git commit time, you might get something like this:

$ git commit -m "test: add error code for test"Husky > pre-commit (node v10.15.3) $vue-cli-service lint error: Parsing error: Parsing error Unterminated string constant 22 | methods: { 23 |submit() {
> 24 |       this.$http.get('xxxxhello).then(res => { | ^ 25 | this.list = res.data.data.list 26 | 27 | }); at src\views\About.vue:38:21: 36 | methods: { 37 | submit() { > 38 | this.$http.get('xxxxhello).then(res => {
     |                     ^
  39 |         this.list = res.data.data.list
  40 |
  41 |       });


1 error found.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
husky > pre-commit hook failed (add --no-verify to bypass)
error Command failed with exit code 1.
Copy the code

Use Lint incrementally

Doing so will format the entire repository at commit time. But in the actual work, some warehouses are stock, there have been a lot of code is not standard, but does not affect the function. Therefore, in most cases, you want to use these tools incrementally in your projects. Relatively speaking, ensuring the stability of business systems is the most important thing. For this scenario, lint-staged can be considered

lint-staged

Lint-staged episodes are developed based on this scenario, where passage from Some project code into a passively committed section will occur when you use Git commit -A, or Git Add and then Git commit.

Lint – staged usage

Install dependencies

yarn add lint-staged --dev
Copy the code

or

npm install -D lint-staged
Copy the code

Modify the package. The json

Modify the package. The json

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "src/**/*.{js,vue}": [
    "vue-cli-service lint",
    "git add"
  ]
}
Copy the code

Try to submit code

$ git commit -m "test: test lint "Husky > pre-commit (node V10.15.3) Year Some of your tasks use `git add` command. Please remove it from the config since all modifications made by tasks will be  automatically added to the git commit index. [STARTED] Preparing... [SUCCESS] Preparing... [STARTED] Running tasks... [STARTED] Running tasksforsrc/**/*.{js,vue} [STARTED] vue-cli-service lint [FAILED] vue-cli-service lint [FAILED] [FAILED] vue-cli-service lint [FAILED] [SUCCESS] Running tasks... [STARTED] Applying modifications... [SKIPPED] Skipped because of errors from tasks. [STARTED] Reverting to original state because of errors... [SUCCESS] Reverting to original state because of errors... [STARTED] Cleaning up... [SUCCESS] Cleaning up... X vue cli - service lint: error: Parsing error: Unterminated string constant 22 | the methods: {23 |submit() {
> 24 |       this.$http.get(xxxxhello").then(res => { | ^ 25 | this.list = res.data.data.list; 26 |}); 27 | } at src\views\About.vue:38:30: 36 | methods: { 37 | submit() { > 38 | this.$http.get(xxxxhello").then(res => { | ^ 39 | this.list = res.data.data.list; 40 |}); 41 | } 1 error found. husky > pre-commit hook failed (add --no-verify to bypass) error Command failed withexit code 1.
Copy the code

More choice

In fact, Lint-staged sections can give you more flexibility before committing your code, such as adding the following configuration that automatically fixes errors:

"lint-staged": {
  "src/**/*.{js,vue}": [
    "vue-cli-service lint --fix",
    "git add"
  ]
}
Copy the code

Or use the following configuration to automatically format the code (use caution)

"lint-staged": {
  "src/**/*.{js,vue}": [
    "vue-cli-service lint --fix",
    "prettier --write",
    "git add"
  ]
}
Copy the code

A link to the

• ESLint
• Standard
• SCSSLint
• JSONLint
• HTMLHint
• Github produces a list of Lint tools
• husky
• lint-staged
• pre-commit
• Vue/cli’s official website