Skip to content

Guia de estilo Frontend

Jump to bottom
Valentina Zapata Grajales edited this page Oct 8, 2026 · 2 revisions

Guía de Estilo y Calidad de Código (Frontend)

Para evitar que el estilo del código dependa de criterios individuales, el proyecto automatiza la revisión y el formato utilizando dos herramientas clave: Prettier para la apariencia visual y ESLint para la calidad técnica.

1. Prettier (Formateador Automático)

Prettier reescribe el código para mantener un estilo consistente (indentación, comillas, punto y coma y longitud de línea) sin modificar la lógica ni corregir errores de programación.

  • Archivos soportados: Se aplica de forma global en componentes .vue, archivos TypeScript (.ts), HTML, CSS, JSON y Markdown.
  • Configuración: Está centralizada en el archivo .prettierrc ubicado en la raíz del proyecto y es de uso obligatorio para todo el equipo.
  • Comandos en la terminal:
    • Para formatear todo el proyecto automáticamente: npm run format
    • Para revisar si hay archivos desalineados sin modificarlos: npm run format:check

2. ESLint (Linter de Calidad)

ESLint analiza el código de forma estática sin ejecutarlo para detectar errores, malas prácticas y asegurar que se sigan los estándares definidos antes de que lleguen al repositorio.

  • Configuración: Las reglas se administran de forma centralizada en el archivo eslint.config.ts situado en la raíz.
  • Reglas mínimas exigidas: Prohibición del uso de any (@typescript-eslint/no-explicit-any), prohibición de variables o importaciones declaradas y no utilizadas (no-unused-vars), uso estricto de operadores de igualdad estricta (===) y exigencia de tipado de retorno en funciones.
  • Comandos en la terminal:
    • Para analizar el proyecto: npm run lint
    • Para analizar y corregir automáticamente los errores permitidos: npm run lint:fix

3. Orden Obligatorio de Ejecución antes de un Commit

Durante el desarrollo, cada integrante puede ejecutar las herramientas libremente, pero antes de realizar un git push se debe seguir estrictamente este flujo para asegurar que el formateo no introduzca problemas detectados por el linter:

  1. Modificar el código y guardar los cambios.
  2. Abrir la terminal ubicada en la raíz del proyecto.
  3. Ejecutar la limpieza de errores: npm run lint:fix
  4. Ejecutar el formateador visual: npm run format
  5. Confirmar que la terminal no arroje advertencias pendientes.
  6. Realizar el git commit y el git push.

Clone this wiki locally