En el proceso de desarrollo de software, Code Linting es un medio eficaz para garantizar la especificación y la coherencia del código. En el pasado, el trabajo de Lint se realizaba generalmente durante CodeReview o CI, pero esto daría lugar a una cadena de retroalimentación de problemas y una pérdida de tiempo innecesario. Por lo tanto, necesitamos usar el enlace Pre Commit de Git para poner el proceso Lint antes de que el desarrollador envíe el código.
Introducción
Presente brevemente estas tres herramientas:
prettierSe utiliza para optimizar el formato del código, como sangría, espacios, punto y coma, etc.,
huskyse puede utilizar para implementar varios Git Hooks. El gancho de confirmación previa se usa principalmente aquí. Antes de que se ejecute la confirmación, se ejecutan algunas operaciones personalizadas para
lint-stagedrealizar la detección de código en archivos en el área de prueba de Git.
Proceso de implementación
El código que se enviará
-> git add add al área de preparación
-> ejecute git commit
-> husky registrado en el gancho de pre-commit de git para llamar a lint-staged
-> lint-staged para obtener todos los archivos enviados y ejecutarlos a su vez Tarea (ESLint y Prettier)
-> Si hay un error (no pasó la verificación de ESlint), detenga la tarea, espere la siguiente confirmación e imprima el mensaje de error
-> Enviar correctamente
instalación
Primero, usamos el siguiente comando huskye lint-stagedinstalamos devDependencies package.json en:
npm install husky lint-staged --save-dev
o
yarn add husky lint-staged --dev
Configurar package.json (no más bonito)
Agregue el siguiente código al archivo package.json:
"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"
]
},
No agregué más bonito aquí
Configurar package.json (con más bonito)
{
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,vue}": [
"prettier --write",
"vue-cli-service lint",
"git add"
]
}
}
Las opciones bajo lint-staged en el ejemplo anterior son configuraciones de uso común en proyectos vue. Puede configurar las verificaciones de código correspondientes de acuerdo con la pila de tecnología de su proyecto.
- más bonito --write embellecerá automáticamente el formato de su código
- vue-cli-service lint es una revisión gramatical en el proyecto vue
- git add agrega el archivo modificado al área de ensayo
Archivo .prettierrc
Cree un nuevo archivo .prettierrc y copie el siguiente contenido en él:
{
"trailingComma": "es5", // 尾随逗号
"tabWidth": 2, // 缩进
"semi": false, // 句尾分号
"singleQuote": true, // 单引号
"end-of-line": "lf" // 换行符
}
Por lo tanto, cuando el terminal de entrada git commitcuando se envía el código de comando, el programa Lint verificará automáticamente este envío en línea con el archivo de especificación de código revisado del proyecto. Si el código no cumple con la especificación, se negará a enviar el código.
Si desea omitir el programa Lint, puede usarlo git commit -no-verifypara confirmar.
Referencia: Durante
comm git
que, modificar el contenido a través de la pre-entrega de gancho git y presentar
[herramienta] verificación de código antes de enviar el código pre-commit
pre-commit: Cómo utilizar ronca, pelusa-puesta en escena y más bonita para optimizar su proyecto
ronca: https: //www.npmjs.com/package/husky
lint-staged: https://www.npmjs.com/package/lint-staged
más bonito: https://www.npmjs.com/package/prettier