ComeOnOliver/skillshub

Prácticas de Codificación

Organización del Código

• Responsabilidad única: Cada archivo fuente debe tener un alcance/propósito claro y enfocado
• Dividir archivos grandes: Dividir archivos cuando se vuelven grandes o manejan demasiadas preocupaciones
• Separación de tipos: Separar siempre los tipos e interfaces en types.ts o types/*.ts
• Extracción de constantes: Mover constantes a un archivo constants.ts dedicado

Entorno de Ejecución

• Preferir código isomórfico: Escribir código independiente del entorno que funcione en Node, navegador y workers siempre que sea posible
• Indicadores de entorno claros: Cuando el código sea específico de un entorno, agregar un comentario al inicio del archivo:

// @env node
// @env browser

TypeScript

• Tipos de retorno explícitos: Declarar los tipos de retorno explícitamente cuando sea posible
• Evitar tipos complejos en línea: Extraer tipos complejos en declaraciones type o interface dedicadas

Comentarios

• Evitar comentarios innecesarios: El código debe ser autoexplicativo
• Explicar el "por qué" no el "cómo": Los comentarios deben describir la razón o intención, no lo que hace el código

Pruebas (Vitest)

• Archivos de prueba: foo.ts → foo.test.ts (mismo directorio)
• Usar API describe/it (no test)
• Usar toMatchSnapshot para salidas complejas
• Usar toMatchFileSnapshot con ruta explícita para snapshots específicos de lenguaje

---

Elecciones de Herramientas

Comandos @antfu/ni

Comando	Descripción
ni	Instalar dependencias
ni <pkg> / ni -D <pkg>	Agregar dependencia / dependencia de desarrollo
nr <script>	Ejecutar script
nu	Actualizar dependencias
nun <pkg>	Desinstalar dependencia
nci	Instalación limpia (pnpm i --frozen-lockfile)
nlx <pkg>	Ejecutar paquete (npx)

Configuración de TypeScript

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  }
}

Configuración de ESLint

// eslint.config.mjs
import antfu from '@antfu/eslint-config'

export default antfu()

Al completar tareas, ejecutar pnpm run lint --fix para formatear el código y corregir el estilo de codificación.

Para opciones de configuración detalladas: antfu-eslint-config

Hooks de Git

{
  "simple-git-hooks": {
    "pre-commit": "pnpm i --frozen-lockfile --ignore-scripts --offline && npx lint-staged"
  },
  "lint-staged": { "*": "eslint --fix" },
  "scripts": {
    "prepare": "npx simple-git-hooks"
  }
}

Catálogos de pnpm

Usar catálogos con nombre en pnpm-workspace.yaml para la gestión de versiones:

Catálogo	Propósito
prod	Dependencias de producción
inlined	Dependencias incluidas en el bundler
dev	Herramientas de desarrollo (linter, bundler, testing)
frontend	Librerías de frontend

Evitar el catálogo por defecto. Los nombres de los catálogos pueden ajustarse según las necesidades del proyecto.

---

Referencias

Tema	Descripción	Referencia
Configuración de ESLint	Soporte de frameworks, formateadores, anulaciones de reglas, configuración de VS Code	antfu-eslint-config
Configuración del proyecto	.gitignore, GitHub Actions, extensiones de VS Code	setting-up
Desarrollo de aplicaciones	Convenciones y patrones de Vue/Nuxt/UnoCSS	app-development
Desarrollo de librerías	Empaquetado con tsdown, publicación ESM pura	library-development
Monorepo	Espacios de trabajo de pnpm, alias centralizado, Turborepo	monorepo