Vue Mess Detector

Vue Mess Detector é unha ferramenta de análise estática específica para Vue.js e Nuxt.js que complementa o traballo de ESLint. En lugar de centrarse na sintaxe, detecta "code smells" (malos olores no código), malas prácticas e problemas de mantemento nos ficheiros .vue .

Instalación

Para instalar a ferramenta como dependencia de desenvolvemento, executa no terminal:

npm install vue-mess-detector --save-dev

Configuración básica

Vue-mess-detector.json

A forma máis práctica de traballar con Vue Mess Detector é empregando un ficheiro de configuración na raíz do proxecto, xa que así non tes que escribir todas as opcións cada vez que executes o comando .

Crea un ficheiro chamado vue-mess-detector.json na raíz do teu proxecto Vue:

{
  "apply": "vue-essential,vue-strong",
  "level": "error",
  "group": "file",
  "output": "table"
}

No ficheiro vue-mess-detector.json podes definir entre outros:

Opción	Valores permitidos	Por defecto	Descrición
apply	vue-essential, vue-strong, vue-recommended, vue-caution, rrd	Todas	Regras que se aplicarán
ignore	Nomes de regras ou rulesets	-	Regras que se ignorarán
level	error, warning ou all	all	Mostrar só erros, só avisos ou todo
group	file ou rule	rule	Agrupar resultados por ficheiro ou por regra
output	text, table ou json	text	Formato de saída
exclude	Camiños (separados por coma)	-	Directorios ou ficheiros a excluír

Existen cinco conxuntos de regras con diferentes niveis de rigor :

Ruleset	Descrición
vue-essential	Regras que axudan a previr erros. Deben cumprirse sempre.
vue-strong	Melloran a lexibilidade e a experiencia de desenvolvemento. Altamente recomendadas.
vue-recommended	Garantizan consistencia cando hai varias opcións igualmente válidas.
vue-caution	Sinalan características de Vue que poden levar a un código difícil de manter.
rrd	Regras opinadas e moi específicas, non recomendadas para uso xeral.

Execución da análise

Saída cun erro e 28 warnings

Unha vez configurado o ficheiro, podes analizar todo o proxecto simplemente con:

npx vue-mess-detector analyze

Se queres analizar só un directorio concreto:

npx vue-mess-detector analyze ./src/components

Os resultados amosaranse con cores no terminal: as mensaxes vermellas indican erros que hai que corrixir, e as amarelas son avisos sobre boas prácticas .

Integración con ESLint

Vue Mess Detector non substitúe a ESLint, senón que o complementa.

Mentres ESLint revisa a sintaxe e o formato do código, Vue Mess Detector detecta problemas arquitectónicos e malas prácticas específicas do ecosistema Vue (como compoñentes demasiado grandes, ficheiros moi extensos ou patróns pouco óptimos).

Aconséllase usar ambas ferramentas en paralelo para obter unha análise completa da calidade do código.