Conectar tu proyecto Astro con un repositorio en GitHub y sumarle Prettier es el paso que transforma una carpeta local en un flujo de trabajo profesional. Aprenderás a versionar tu código, subirlo a un repositorio remoto y aplicar un formateador que mantenga tu proyecto limpio y legible.

¿Cómo crear un repositorio en GitHub para tu proyecto Astro?

El primer paso es darle a tu proyecto un espacio remoto donde guardar la historia de cambios. Desde tu cuenta de GitHub entras a la opción de crear un nuevo repositorio y le asignas un nombre que coincida con el proyecto, en este caso astrobuild.tips.

Puedes añadir una descripción, marcarlo como público y dejar el resto de configuraciones por defecto, ya que las ajustarás más adelante dentro del propio repositorio. Lo único que necesitas ahora es el espacio para almacenar tu código.

¿Qué es un repositorio remoto? Es un espacio en la nube, como GitHub, donde guardas tu código y su historial de cambios para acceder desde cualquier lugar y colaborar con otras personas.

¿Por qué actualizar el README desde el inicio?

El README funciona como la portada de tu proyecto. Ahí explicas de qué va, cómo se instala, qué elementos hay que considerar y puedes incluso añadir una imagen del resultado final. Cualquier persona que llegue a tu repositorio debería entender el proyecto solo leyendo ese archivo.

¿Cómo conectar tu repositorio local con GitHub usando Git?

Con el repositorio creado en GitHub, toca enlazarlo con tu carpeta local. Como el proyecto Astro ya se inicializó con Git al momento de crearlo, no necesitas ejecutar git init de nuevo.

En tu terminal, detén el entorno de desarrollo y sigue esta secuencia:

• git status para revisar qué archivos están listos para versionar.
• git add . para agregar todos los archivos al staging.
• git commit -m "First commit" para registrar tu primer commit.
• git remote add origin con la URL del repositorio para conectar local y remoto.
• git push origin main para subir los cambios a GitHub.

Antes del push, verifica que estés en la rama main. Tras ejecutar el push, al actualizar el repositorio en GitHub verás todos tus archivos sincronizados. A partir de aquí, cada mejora la subirás siguiendo este mismo flujo y construyendo la historia completa de tu proyecto.

¿Qué es Prettier y cómo se integra con Astro?

Prettier es el formateador más popular para HTML, CSS y JavaScript, y mantiene un estándar visual en todo tu código. Cuando trabajas con componentes, copias fragmentos o escribes a toda velocidad, aparecen saltos de línea sueltos, indentaciones inconsistentes y espacios de más. Prettier los corrige por ti.

Para integrarlo con Astro necesitas instalar dos dependencias de desarrollo desde la terminal:

• prettier en su versión 2.8.4.
• prettier-plugin-astro en su versión 0.8.0, que añade soporte para archivos .astro.

El comando es npm install --save-dev prettier@2.8.4 prettier-plugin-astro@0.8.0.

¿Para qué sirve prettier-plugin-astro? Es el plugin que le enseña a Prettier a leer y formatear archivos con extensión .astro, que no son HTML ni JavaScript puros.

¿Cómo configurar el archivo .prettierrc.js?

En la raíz del proyecto creas un archivo llamado .prettierrc.js y exportas un módulo con tus reglas de formato. Estas son las opciones base que se usan en el ejemplo:

js module.exports = { semi: true, singleQuote: false, tabWidth: 2, useTabs: true, plugins: [require("prettier-plugin-astro")], overrides: [ { files: "*.astro", options: { parser: "astro", }, }, ], };

Cada propiedad define un comportamiento concreto: semi añade punto y coma al final, singleQuote decide entre comillas simples o dobles, tabWidth marca el ancho de la indentación y useTabs activa tabs en lugar de espacios. El bloque overrides es clave porque le indica a Prettier que los archivos .astro deben procesarse con el parser de Astro.

¿Cómo formatear tu código y resolver errores comunes en Prettier?

Dentro de tu componente, por ejemplo el Card.astro, seleccionas todo el código, haces clic derecho y eliges Format Document With, seleccionando Prettier como formateador. Si la configuración tiene un error, el editor lo marca en rojo y muestra un log con el detalle.

En el ejemplo, el log indicaba una configuración inválida en .prettierrc.js. La causa fue un typo: la propiedad correcta es files (en plural), no file. Después de corregirlo y guardar, al volver a formatear el código se reorganiza automáticamente: desaparecen saltos de línea innecesarios, espacios de más y estructuras desalineadas.

¿Qué es un typo en programación? Es un error de escritura en el código o en la configuración, como una letra faltante o mal escrita, que impide que la herramienta lo interprete correctamente.

Un truco extra: configura tu editor para que ejecute Prettier al guardar el archivo. Así, cada vez que pulses guardar, el código se formatea solo y nunca tendrás que preocuparte por la consistencia visual.

¿Cómo subir los cambios de configuración al repositorio?

Con Prettier funcionando, repites el flujo de Git para versionar la nueva configuración:

• git status para revisar los archivos modificados.
• git add . para incluirlos todos.
• git commit -m "update config" para registrar el cambio.
• git push origin main para enviarlo a GitHub.

Al actualizar el repositorio en GitHub vas a ver el commit update config reflejado, junto con todos los archivos del proyecto al día.

Deja en los comentarios el enlace a tu repositorio para que podamos ver tu avance.