Creación y Configuración de Repositorio con Git y Prettier

¿Cómo configurar un repositorio Git para tu proyecto?

Añadir un repositorio Git a un proyecto es un paso esencial para llevar un seguimiento completo de los cambios y mejoras que se le hagan. Este proceso no solo te permite tener un control detallado sobre lo que se ha hecho en tu proyecto, sino que también te ayuda a organizar mejor tus archivos, colaborar con otros desarrolladores y proteger tu trabajo. Vamos a ver cómo puedes configurar y conectar un repositorio de GitHub con tu proyecto local.

¿Cómo crear y conectar un repositorio en GitHub?

1. Crear un repositorio en GitHub:

   • Dirígete a tu cuenta de GitHub y selecciona la opción para crear un nuevo repositorio.
   • Asigna un nombre a tu repositorio. En el ejemplo, el nombre utilizado fue astro.build.tips.
   • Rellena la información adicional según desees, como la descripción del proyecto y la visibilidad (público o privado).
   • Crea el repositorio sin la necesidad de configurar un README, Git ignore o licencia todavía, ya que esto se configurará más adelante.

2. Conectar el repositorio local al remoto:

   • Asegúrate de tener Git inicializado en tu proyecto local y un README creado.
   • En la terminal, verifica el estado de los archivos usando git status.
   • Agrega los archivos al control de versiones con git add ..
   • Realiza tu primer commit con git commit -m "First commit".
   • Conecta tu repositorio local al repositorio remoto en GitHub mediante git remote add origin <URL del repositorio>.
   • Verifica la rama principal (main) y asegúrate de estar en ella.
   • Finalmente, sube los cambios al repositorio remoto con git push -u origin main.

¿Cómo trabajar con Prettier para formatear tu código?

Prettier es una herramienta poderosa y ampliamente utilizada para mantener un estándar de estilo en el código. Nos ayuda a garantizar que el código HTML, CSS y JavaScript sea fácil de leer, independiente de quién lo esté editando. Aquí te mostramos cómo configurar Prettier y sacarle el máximo provecho.

¿Cómo instalar Prettier en tu proyecto?

1. Instalar Prettier y los plugins necesarios:

   • Utiliza la terminal para instalar Prettier como una dependencia de desarrollo con la siguiente línea:

     npm install --save-dev prettier@2.8.4 prettier-plugin-astro@0.8.0
     

   • Estos plugins son necesarios para que Prettier pueda reconocer correctamente los archivos de Astro.

2. Configurar Prettier:

   • Crea un archivo de configuración en la raíz de tu proyecto llamado .prettierrc.cjs.
   • Añade las siguientes configuraciones para estandarizar el código:

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

   • Guarda y cierra el archivo.

3. Probar la configuración de Prettier:

   • Abre un archivo de tu proyecto en Visual Studio Code.
   • Selecciona el código y utiliza la opción de formatear el documento, eligiendo Prettier.
   • Si encuentras errores, consulta los logs para detectar configuraciones inválidas y ajusta según sea necesario.

¿Qué hacer con los errores y logs?

Al trabajar con Prettier o cualquier herramienta de formateo, es común encontrarse con errores en las configuraciones. Es importante no frustrarse y considerar que estos son oportunidades para aprender. Examina detalladamente los logs proporcionados y verifica si hay algún error de tipeo o configuraciones mal cargadas. Siempre es útil corroborar la documentación oficial de Prettier para entender cómo deben configurarse los archivos.

Buenas prácticas al subir cambios al repositorio

Mantener un flujo de trabajo coherente al subir cambios es crucial para la claridad y fácil seguimiento del proyecto. Aquí te dejamos algunos pasos clave que deberías seguir:

1. Antes de subir los cambios:

   • Revisa el estado de tus archivos con git status.
   • Añade todos los archivos modificados con git add ..

2. Realizar un commit detallado:

   • Realiza un commit claro y significativo, por ejemplo, git commit -m "Update config" para indicar qué cambios se han realizado.

3. Subir los cambios al repositorio remoto:

   • Empuja tus cambios con git push origin main.

Siguiendo estos pasos, podrás mantener un control detallado y ordenado de tu proyecto tanto a nivel local como remoto. Recuerda compartir tu repositorio y avances en foros o secciones de comentarios de comunidades de aprendizaje para recibir retroalimentación y colaborar de manera eficiente. ¡Ánimo y sigue adelante!