Formato y linting moderno con Prettier + Stylelint

Uno de los primeros signos de profesionalidad en cualquier desarrollador es escribir código limpio, legible y consistente. Prettier y Stylelint no solo ahorran tiempo, también eliminan debates innecesarios sobre estilos, y te preparan para trabajar en entornos profesionales desde el primer día.

Aquí no hablaremos aún de Git ni de flujos de trabajo con equipos. Solo vamos a dar el primer paso: configurar tu editor para escribir código limpio automáticamente. Y entender qué hace cada cosa.

¿Qué son Prettier y Stylelint?

Prettier es un formateador de código. No "te avisa", simplemente reescribe tu código siguiendo unas reglas predeterminadas (por ejemplo, añadir punto y coma, ordenar propiedades, etc.).

Stylelint es un linter para CSS. Detecta errores o inconsistencias y, si está bien configurado, también puede arreglarlas automáticamente.

¿Qué aprenderás aquí?

Cómo instalar y configurar Prettier y Stylelint en un proyecto simple con HTML y CSS.
Cómo integrar ambas herramientas en Visual Studio Code.
Qué hace cada una y cómo se complementan.
Cómo activar el autoformato al guardar.
Qué errores comunes puedes encontrarte y cómo resolverlos.
Cómo crear tu primer archivo de configuración para Prettier (.prettierrc).
Cómo dejarlo todo listo para futuras integraciones más avanzadas (como el pre-commit hook con Git).

Requisitos

Tener instalado Node.js y npm.
Tener instalado Visual Studio Code.
Tener una carpeta/proyecto con archivos HTML y CSS ya creados (aunque sea un index.html y un main.cssvacíos).

Instalar las herramientas

Desde el terminal, estando en la raíz de tu proyecto:

npm install --save-dev prettier stylelint stylelint-config-standard

Esto añade las herramientas como dependencias de desarrollo (no se incluirán en el bundle final, solo se usan en desarrollo).

No te preocupes por npm ahora, más adelante aprenderás todo lo que necesitas saber.

Crear archivo de configuración de Prettier

Prettier funciona sin configuración, pero es recomendable que aprendas a configurarlo desde el principio para tener control y coherencia.

Crea un archivo llamado .prettierrc en la raíz del proyecto con este contenido:

{
  "singleQuote": true,
  "semi": false
}

Esto le dice a Prettier que use comillas simples y que no añada punto y coma al final de cada línea.

Crear archivo de configuración de Stylelint

Crea un archivo llamado .stylelintrc. en la raíz del proyecto con este contenido:

{
  "extends": "stylelint-config-standard",
  "rules": {
    "indentation": 2,
    "string-quotes": "single"
  }
}

Configurar Visual Studio Code

Instala estas extensiones desde el marketplace:

Prettier – Code formatter (de Prettier).
Stylelint (de Stylelint).

Luego en los ajustes de VS Code (.vscode/settings.json, o desde la interfaz):

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "stylelint.validate": ["css"]
}

Probar que todo funciona

Escribe código feo en main.css:

body{background:white;color:black}

Guarda el archivo y observa:
- Prettier debe aplicar formato automáticamente.
- Stylelint debe avisarte si hay errores, e intentar corregirlos si puede.

Fix manual con terminal (opcional)

Si quieres ejecutar el fix manual desde el terminal:

npx stylelint "**/*.css" --fix
npx prettier --write .

Consejos finales

No uses estas herramientas "a ciegas": aprende qué están haciendo y por qué.
Prettier y Stylelint cubren aspectos diferentes (formato vs estilo); no son redundantes.
Más adelante, automatizaremos todo esto con Git y un pre-commit hook, pero por ahora, ya estás dando un paso muy profesional.