Final implementation effect description:

Before committing your code with git commit, use the pre-commit Git hook to implement code specification detection (ESLint, Standard specification), and then commit to git repository. In this way, the code style can be unified in the team development, if some comrade code does not conform to the specification, it is impossible to submit the code.

My demo address:

The demo address

Specification doc:

Eslint specification

Git hooks

Git hooks

So the question is, how does this validation work? !

Please make sure you have installed the: node | NPM | git installed portal: node | NPM | git

Let’s start with my directory structure:

| - node_modules# project resource dependency (NPM install)| the pre - commit - | - SRC -- test. Js# Project code (project business logic)| | - package. Json# Install NPM package locally (NPM init)
Copy the code

I. Standard specification verification, the steps are as follows:

  • First create a directory according to my personal directory, and then execute the following command:
NPM init // Set the pre-commit project to NPM project NPM NPM install --save-dev husky@next // Install husky Git hook NPM install --save-dev snazzy // Install snazzy, beautify Standard error message, esLint specification does not need to installCopy the code
  • After the dependent resources are installed, change the package.json file
// package.json
{
 "husky": {
   "hooks": {
     "pre-commit": "standard \"src/**/*.{js,vue,wpy}\" | snazzy",}}} note: test all files under the SRC directory of the suffix for the js | | the vue | | the wpy file coding, conformed to the specification. If not, the git hook will prevent Git from continuing to commit and will display an error message. If it meets the code specification, the Git commit will be successfully committed to the local repository.Copy the code

Of course you can bypass code detection to force commit:

git add . && git commit --no-verify -m "Code specification mandatory submission tests"
Copy the code

The standard error message is as follows:

// Standard specification default error message:
D:\pre-commit\src\test.js:2:19: Extra semicolon.
------------------------------------------------
// Use snazzy embellished error:
2:19The error Extra semicolon ✖1 problem
Copy the code

Validation of the ESLint specification:

  • First create a directory according to my personal directory, and then execute the following command:
NPM init // Set the pre-commit project to NPM project NPM NPM install --save-dev husky@next // Install the husky git hook $./node_modules/. Bin /eslint --init // generates.eslintrc.js files to customize the code styleCopy the code
Note: eslint custom code details specification/portal (https://segmentfault.com/a/1190000011451121); . Eslintrc. Js configuration steps/portal (https://juejin.cn/post/6844903493182947341)Copy the code
  • After the dependent resources are installed, change the package.json file
// package.json
{
 "husky": {
   "hooks": {
     "pre-commit": "eslint \"src/**/*.{js,vue,wpy}\"",}}}Copy the code

Of course you can bypass code detection to force commit:

git add . && git commit --no-verify -m "Code specification mandatory submission tests"

Copy the code

The ESLint specification prompts the following error:

// ESLint specification error D:\fe\pre-commit\ SRC \test.js 1:13 error Strings must use doublequote quotes 1:28 error Expected linebreaks to be'LF' but found 'CRLF'  linebreak-style
  1:28  error  Missing semicolon                                semi
  2:1   error  Unexpected console statement                     no-console
  2:20  error  Expected linebreaks to be 'LF' but found 'CRLF'Linebreak-style * 5 problems (5 errors, 0 warnings) * 1 problemCopy the code

Follow the error prompt, change the code, conform to the specification, can commit to git repository.

Welcome to my Git blog:portal, your star is my biggest motivation! Thank you very much!

Statement: If you have any questions, please leave a message! Reprint is prohibited without the author’s consent!