@quo-digital/format-config

Configuración oficial y centralizada de formato (Prettier) para aplicaciones basadas en TypeScript.

Publicada en npm como: @quo-digital/format-config

🎯 Objetivo

Estandarizar las reglas de calidad de código para:

• Garantizar consistencia entre repositorios
• Reducir conflictos en Pull Requests
• Unificar estilo visual del código
• Centralizar la gobernanza técnica
• Facilitar la escalabilidad del equipo

Esta configuración es la única fuente de verdad para las reglas de Prettier en las instancias backend y frontend en Typescript.

📦 Instalación

1️⃣ Instalar el package

En la aplicación:

npm install -D @quo-digital/format-config

2️⃣ Instalar dependencias requeridas (si no existen)

Este package depende de Prettier como peerDependency:

npm install -D prettier@^3.0.0

Puedes verificar las dependencias requeridas con:

npm info @quo-digital/format-config peerDependencies

⚙️ Configuración

Crear o reemplazar el archivo .prettierrc.js en la aplicación con:

module.exports = require('@quo-digital/format-config');

O en package.json:

{
  "prettier": "@quo-digital/format-config"
}

⚠️ No agregar opciones locales salvo que exista una justificación técnica clara.

Toda modificación debe realizarse en el repositorio central.

📜 Scripts recomendados

Asegúrate de que el package.json del proyecto contenga:

{
  "scripts": {
    "format": "prettier --write \"src/**/*.{ts,js,json}\"",
    "format:check": "prettier --check \"src/**/*.{ts,js,json}\""
  }
}

🔌 Extensiones recomendadas para IDEs

Para formateo automático al guardar y feedback en tiempo real:

VS Code y Cursor

Ambos editores comparten el ecosistema de extensiones de VS Code. Instala:

| Extensión | ID | Descripción | |-----------|-----|-------------| | Prettier | esbenp.prettier-vscode | Formateo de código según esta config |

# Instalación desde terminal (VS Code / Cursor)
code --install-extension esbenp.prettier-vscode

O busca "Prettier" en la vista de extensiones (Ctrl+Shift+X / Cmd+Shift+X).

Configura Format on Save en settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

WebStorm

Prettier viene integrado. Actívalo en:

Settings → Languages & Frameworks → JavaScript → Prettier

• Marca On save
• Selecciona el paquete automático o apunta a node_modules/@quo-digital/format-config

Claude Code

Claude Code se ejecuta como extensión sobre VS Code, por lo que usa las mismas extensiones:

• Instala Prettier (esbenp.prettier-vscode)
• Las reglas se aplicarán automáticamente al editar código

🚀 Uso

Desarrollo local

npm run format

Este comando:

• Formatea todos los archivos según la configuración centralizada
• Modifica los archivos in-place
• Aplica tabs, comillas simples, trailing commas, etc.

Validación (CI / Pull Requests)

npm run format:check

Este comando:

• Solo valida el formato
• No modifica archivos
• Falla si existen archivos sin formatear
• Debe ejecutarse en el pipeline de CI/CD

📐 Opciones principales incluidas

| Opción | Valor | Descripción | |--------|-------|-------------| | printWidth | 100 | Ancho máximo de línea | | tabWidth | 4 | Espacios por nivel de indentación | | useTabs | true | Usar tabs en lugar de espacios | | semi | true | Punto y coma obligatorio | | singleQuote | true | Comillas simples en JS/TS | | trailingComma | 'all' | Comas finales en arrays, objetos, parámetros | | endOfLine | 'lf' | Saltos de línea Unix (LF) | | arrowParens | 'always' | Paréntesis siempre en arrow functions | | bracketSpacing | true | Espacios en objetos { foo: bar } |

🔗 Integración con @quo-digital/eslint-config

Este package es utilizado por @quo-digital/eslint-config para garantizar que ESLint y Prettier trabajen de forma coherente. Si usas la configuración de ESLint de Quo, Prettier ya está integrado; este package te permite reutilizar la misma configuración de formateo de forma explícita.

🏗️ Migración en proyectos existentes

1. Instalar el package y Prettier

2. Configurar .prettierrc.js o package.json

3. Ejecutar:

   npm run format

4. Revisar los cambios generados

5. Validar con:

   npm run format:check

🔐 Requisitos

• Node 18+
• Prettier 3.x

🔄 Versionado

Este package sigue versionado semántico:

• MAJOR → cambios breaking en opciones
• MINOR → nuevas opciones no breaking
• PATCH → ajustes internos

Actualizar en un proyecto:

npm update @quo-digital/format-config

Instalar versión específica:

npm install -D @quo-digital/[email protected]

🧠 Gobernanza Técnica

Cualquier modificación en las opciones debe:

• Justificarse técnicamente
• Evaluar impacto en todos los proyectos
• Versionarse correctamente
• Documentarse

Esta configuración es el estándar oficial de formateo para backend y frontend.