Skip to content

Repository navigation

formato del codigo

Jump to bottom
Janio Isacura edited this page Oct 16, 2026 · 1 revision

Formato del código

Esta página explica cómo se mantiene el estilo del código en el repositorio (comillas simples y sin punto y coma) con tres herramientas: Prettier, el formateo al guardar de VS Code y ESLint. Es una receta para configurar tu computadora y para repetir la configuración en un proyecto nuevo; no hace falta leerla para seguir la guía de estudio.

La convención del repositorio es comillas simples y sin punto y coma. Para que se cumpla sola al grabar un archivo, se combinan tres piezas:

Pieza Para qué sirve
Prettier Reescribe el archivo con el estilo acordado
Formatear al guardar (VS Code) Ejecuta Prettier cada vez que se graba
ESLint Avisa de lo que no cumple (subrayado y npm run lint), pero no reformatea

A nivel de repositorio (lo que hay)

Hay un solo .prettierrc en la raíz del repositorio:

{
  "printWidth": 100,
  "singleQuote": true,
  "semi": false,
  "endOfLine": "auto",
  "overrides": [
    { "files": "*.html", "options": { "parser": "angular" } }
  ]
}

Prettier busca la configuración subiendo desde el archivo y usa la primera que encuentra: no mezcla la de la raíz con la del proyecto. Por eso los proyectos no tienen .prettierrc propio (se quitaron los tres, que eran idénticos). Para comprobar qué configuración usa un archivo, dentro del proyecto:

npx prettier --find-config-path src/app/app.ts
# ../.prettierrc

A nivel de proyecto (cambiar el estilo sólo en uno)

Se crea un .prettierrc dentro de la carpeta del proyecto. Como reemplaza al de la raíz por completo, hay que repetir todas las opciones:

{
  "printWidth": 120,
  "singleQuote": true,
  "semi": true,
  "endOfLine": "auto",
  "overrides": [
    { "files": "*.html", "options": { "parser": "angular" } }
  ]
}

Para volver al estilo del repositorio, se borra ese archivo.

Formatear al guardar en VS Code

  1. Instalar la extensión Prettier - Code formatter (esbenp.prettier-vscode).
  2. Agregar a la configuración de la carpeta que abres (.vscode/settings.json):
{
  "prettier.requireConfig": true,
  "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true },
  "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true },
  "[scss]": { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true }
}
  • prettier.requireConfig hace que sólo formatee cuando hay un .prettierrc.
  • Se activa por lenguaje a propósito: con un formatOnSave global también se reformatearían los .md y los .json.
  • .vscode/ está ignorado por git en todo el repositorio, así que esta configuración es local de cada computadora: hay que repetirla en cada una.
  • El .css queda fuera: Prettier cambiaría las comillas de @import "tailwindcss" y reorganizaría la lista themes de daisyUI en src/tailwind.css.

Scripts de npm

En 02-bases, 03-gifs-app y 04-country-app:

Script Qué hace
npm run format Reescribe los .ts, .html y .scss de src/ con Prettier
npm run format:check Sólo lista los archivos que no cumplen (no escribe). Sirve en CI o antes de un commit 
"scripts": {
  "format": "prettier --write \"src/**/*.{ts,html,scss}\"",
  "format:check": "prettier --check \"src/**/*.{ts,html,scss}\""
}

ESLint: la regla de "sin punto y coma"

Hoy está en 04-country-app. Para repetirlo en otro proyecto (a nivel de proyecto, porque el repositorio no tiene un package.json raíz):

npm install -D eslint typescript-eslint @stylistic/eslint-plugin
// eslint.config.mjs
import { defineConfig, globalIgnores } from 'eslint/config'
import stylistic from '@stylistic/eslint-plugin'
import tseslint from 'typescript-eslint'

export default defineConfig([
  globalIgnores(['dist/', '.angular/', 'node_modules/', 'coverage/']),
  {
    files: ['**/*.ts'],
    languageOptions: { parser: tseslint.parser },
    plugins: { '@stylistic': stylistic },
    rules: {
      '@stylistic/semi': ['error', 'never'],
    },
  },
])
"scripts": {
  "lint": "eslint \"src/**/*.ts\"",
  "lint:fix": "eslint \"src/**/*.ts\" --fix"
}

npm run lint marca cada ; sobrante como Extra semicolon, y lint:fix los quita. Con la extensión ESLint (dbaeumer.vscode-eslint) aparecen subrayados en el editor.

Cosas a tener en cuenta

  • endOfLine: "auto": en Windows, con core.autocrlf=true, git deja los archivos con final de línea CRLF en el disco. Prettier exige LF por defecto y daría por mal formateado un archivo que está bien. Con auto respeta el final de línea que ya tiene cada archivo y format:check sólo marca lo que de verdad no cumple. Un .prettierrc de proyecto debe repetir esta opción, porque reemplaza al de la raíz por completo.

  • Primera pasada: el código que genera ng new trae punto y coma, así que el primer npm run format cambia muchos archivos. Conviene hacerlo en un commit aparte, para no mezclarlo con cambios de verdad.

  • Excepción que Prettier respeta: sin punto y coma, una línea que empieza por (, [ o una plantilla literal (con comillas invertidas) puede confundirse con la anterior. En ese caso Prettier agrega un ; al principio de la línea.

  • Prettier y ESLint hacen cosas distintas: Prettier arregla; ESLint avisa. Sirven juntos: ESLint hace visible la regla aunque alguien guarde sin la extensión.

Clone this wiki locally