Creé una nueva aplicación Vue3 usando Vue CLI y seleccioné Prettier para mi configuración de linter. Quiero usar commitlint, husky y lint-staged para validar los mensajes de confirmación y borrar el código antes de enviarlo.
Lo que hice
Basado en https://commitlint.js.org/#/guides-local-setup , configuro commitlint con husky
npm install --save-dev @commitlint/{cli,config-conventional} echo "module.exports = { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js npm install husky --save-dev npx husky install npx husky add .husky/commit-msg 'npx --no -- commitlint --edit $1'Basado en https://github.com/okonet/lint-staged#installation-and-setup Configuré lint-staged
npx mrm@2 lint-stagedy dentro del paquete.json lo reemplazo
"lint-staged": { "*.js": "eslint --cache --fix" }con
"lint-staged": { "*": "npm run lint" }El problema
Al modificar el archivo README.md en el proyecto para
# my-repo --- new commite intente confirmar que recibo el siguiente mensaje de error
> git -c user.useConfigOnly=true commit --quiet --allow-empty-message --file - [STARTED] Preparing... [SUCCESS] Preparing... [STARTED] Running tasks... [STARTED] Running tasks for * [STARTED] npm run lint [FAILED] npm run 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... ✖ npm run lint: > my-repo@0.1.0 lint > vue-cli-service lint "/home/.../my-repo/README.md" error: Parsing error: Invalid character at README.md:1:1: > 1 | # my-repo | ^ 2 | 3 | --- 4 | 1 error found. npm ERR! code 1 npm ERR! path /home/my-repo npm ERR! command failed npm ERR! command sh -c lint-staged npm ERR! A complete log of this run can be found in: npm ERR! /home/.../.npm/_logs/2021-12-27T10_07_27_498Z-debug.log husky - pre-commit hook exited with code 1 (error)que deberia hacer
Solo corrige los archivos que han sido modificados. El linter conoce los archivos que puede reparar (js, ts, vue, html, ...).
Cuando tengo un archivo de descuento modificado, no obtengo errores al abrir la terminal y ejecutar npm run lint . Pero recibo errores cuando uso lint-staged con esta configuración "*": "npm run lint"
¿Cuál es la configuración correcta para lint-staged para lint archivos "lintable" solamente?
He sugerido "**/*.{js,vue}": ["npm run lint:js:fix"] , primero, lint:js:fix es subjetivo y depende de usted. Esto es lo que usa Kent C Dodds, así que lo nombro de la misma manera.
Pero podrías tener lint:watermelon-potato-hehe en su lugar, no importa.
Ahora, sobre sus proposiciones:
"**/*.{vue,js,jsx,ts,tsx}": "npm run lint" , este apunta a más extensiones, lo cual está totalmente bien. Es posible que realmente no use .tsx/.jsx ya que no es muy popular entre los desarrolladores de Vue..ts en sí mismo, probablemente funcione lo suficientemente bien (tal vez necesite agregar algunos complementos a su configuración de ESlint). No estoy en TS, así que realmente no puedo ayudar en esto, pero de todos modos está fuera del alcance de husky / pelusa. En cuanto a la segunda parte, dado que me gusta configurar mi propia configuración de ESlint, con una API simple y bien documentada, estamos usando eslint --ext .js,.vue --fix . De esa manera estoy seguro de lo que está sucediendo y cómo solucionarlo si es necesario.
vue-cli-service lint puede ser un buen paquete predeterminado dirigido a Vue con algunos valores predeterminados, no estoy seguro de lo que contiene e incluso si probablemente solo sea un ESlint con alguna configuración integrada, de nuevo preferimos hacer nuestro propio Vue configuración con vainilla ESlint.
Entonces, sí, si necesita ir rápido, use vue-cli-service lint para obtener una pelusa rápida, si desea tener un mejor flujo en su proyecto y desea mejorar su configuración, use vainilla ESlint, obtendrá menos problemas en general de la OMI.
"**/*.{vue,js,jsx,ts,tsx}": "eslint --ext .vue,.js,.jsx,.ts,.tsx --fix" . En el lado derecho, globalmente tenemos los mismos scripts lint:js:fix pero con extensiones adicionales. Entonces, puede preguntar por qué estamos escribiendo las extensiones en el lado izquierdo para lint-staged y en el lado derecho para lint:js:fix . Yo respondería que esos no son realmente necesarios en el lado derecho (AFAIK), porque lint-staged solo ejecutará el comando en la lista de extensiones de la izquierda.
Aquí, queríamos ser más explícitos sobre las extensiones exactas a las que nos dirigimos y también, le permite ejecutar npm run lint:js:fix en su CLI en cualquier momento sin obtener errores en los archivos que ESlint no está manejando ( .txt , .json , .md , .jpg etc...).
Por lo tanto, tal vez podría eliminarse (no estoy seguro), ¡la forma más rápida de estar seguro es intentarlo!
"**/*.{vue,js,jsx,ts,tsx}": "eslint --fix" , este puede funcionar bien como se explica en el párrafo anterior. No lo probé yo mismo, pensé. Con respecto a .html , no debería tener muchos de esos en su proyecto Vue. Puede usar el validador W3C para verificar si hay errores si realmente lo necesita.
Si está hablando de su HTML en las etiquetas de template en sus archivos .vue , se ESlintizarán correctamente. Si configura un Prettier encima, también obtendrá un buen formato automático con el que es realmente increíble trabajar (una vez que su equipo haya acordado una configuración .prettierrc ).
Con respecto a los archivos .json , ESlint no los maneja. ESlint es solo para archivos JavaScript-ish. Si desea aplicar formato a su .json o incluso a cualquier otra extensión, puede apuntar a NPM, encontrar un paquete que se adapte a las necesidades de su equipo y agregarlo a su cadena como "**/*.json": ["npm run lint-my-json-please"] ¡y deberías estar bien!
Al final, husky + lint-staged realmente no están haciendo nada especial. Son herramientas para automatizar lo que podría escribir usted mismo en una CLI, por lo que si funciona cuando se hace manualmente y está satisfecho con el resultado, puede ponerlo en su configuración, pero primero debe encontrar el paquete adecuado y su configuración. .
En su package.json , podría tener lo siguiente
"scripts": { "lint:js": "eslint . --ext .js,.vue", "lint:js:fix": "eslint --ext .js,.vue --fix", }, En tu .lintstagedrc
{ "**/*.{js,vue}": ["npm run lint:js:fix"] } En .husky/pre-commit
#!/bin/sh . "$(dirname "$0")/_/husky.sh" npm run lint-staged En .husky/commit-msg
#!/bin/sh . "$(dirname "$0")/_/husky.sh" npx --no-install commitlint --edit ""Puede configurar ESlint para ver cualquier error en sus archivos en VScode (un formateador lint + cuando se guardan sus archivos también es factible con bastante facilidad).
De esa manera, puede ejecutar npm run lint:js para verificar los problemas usted mismo.
De lo contrario, deje que husky ejecute lint-staged y aplique eslint --fix a todos sus archivos .js y .vue .
¡Tu configuración commitlint.config.js debería estar bien!
Como recordatorio aquí, lint:js escaneará todos sus archivos JS y Vue.
Mientras que, cuando se compromete y se ejecuta husky (ejecutando el script lint:js:fix ), SOLO los archivos que ha tocado se eliminarán (ese es el objetivo de lint-staged ).