In the software development process, Code Linting is an effective means to ensure code specification and consistency. In the past, Lint's work was usually carried out during CodeReview or CI, but this would lead to a problematic feedback chain and waste unnecessary time. Therefore, we need to use Git's Pre Commit hook to put the Lint process before the developer submits the code.
Introduction
Briefly introduce these three tools:
prettierUsed to optimize the code format, such as indentation, spaces, semicolons, etc.
huskycan be used to implement various Git Hooks. The pre-commit hook is mainly used here. Before executing commit, run some custom operations
lint-stagedto perform code detection on files in the Git staging area
Implementation process
The code to be submitted
-> git add add to the staging area
-> execute git commit
-> husky registered in the git pre-commit hook to call up lint-staged
-> lint-staged to get all the submitted files and execute them in turn Task (ESLint and Prettier)
-> If there is an error (failed to pass the ESlint check), stop the task, wait for the next commit, and print the error message
-> Submit successfully
installation
First, we use the following command to huskyand lint-stagedinstalled devDependencies package.json in:
npm install husky lint-staged --save-dev
or
yarn add husky lint-staged --dev
Configure package.json (no prettier)
Append the following code to the package.json file:
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --open",
...
"eslint": "eslint --ext .js,.vue src",
"eslintfix": "eslint --fix --ext .js,.vue src",
"lint-staged": "lint-staged"
},
"husky": {
"hooks": {
"pre-commit": "npm run lint-staged"
}
},
"lint-staged": {
"**/*.{js,vue}": [
"npm run eslint"
]
},
I didn’t add prettier here
Configure package.json (with prettier)
{
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,vue}": [
"prettier --write",
"vue-cli-service lint",
"git add"
]
}
}
The options under lint-staged in the above example are commonly used configurations in vue projects. You can configure the corresponding code inspections according to the technology stack of your project.
- prettier --write will automatically beautify your code format
- vue-cli-service lint is a grammar check in the vue project
- git add adds the changed file to the staging area
.prettierrc file
Create a new .prettierrc file and copy the following content into it:
{
"trailingComma": "es5", // 尾随逗号
"tabWidth": 2, // 缩进
"semi": false, // 句尾分号
"singleQuote": true, // 单引号
"end-of-line": "lf" // 换行符
}
Thus, when the input terminal git commitwhen the command is submitted code, Lint program will automatically check for this submission in line with the revised code specification file of the project. If the code does not meet the specification, it will refuse to submit the code.
If you want to skip Lint program can be used git commit -no-verifyto commit.
Reference: During
git comm
it, modify the content through the pre-commit of git hook and submit
[tool] code check before submitting code pre-commit
Pre-commit: How to use husky, lint-staged and prettier to optimize your project
husky: https: //www.npmjs.com/package/husky
lint-staged: https://www.npmjs.com/package/lint-staged
prettier: https://www.npmjs.com/package/prettier