You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

1 Días
0 Hrs
53 Min
41 Seg

GitHub, VSCode, Prettier, Astro config

9/25
Resources

How to set up a Git repository for your project?

Adding a Git repository to a project is an essential step to keep complete track of the changes and improvements made to it. This process not only allows you to have a detailed control over what has been done in your project, but also helps you to better organize your files, collaborate with other developers and protect your work. Let's see how you can set up and connect a GitHub repository to your local project.

How to create and connect a repository on GitHub?

  1. Create a repository on GitHub:

    • Go to your GitHub account and select the option to create a new repository.
    • Assign a name to your repository. In the example, the name used was astro.build.tips.
    • Fill in additional information as desired, such as the project description and visibility (public or private).
    • Create the repository without the need to set up a README, Git ignore or license yet, as this will be configured later.
  2. Connect the local repository to the remote one:

    • Make sure you have Git initialized on your local project and a README created.
    • In the terminal, check the status of the files using git status.
    • Add the files to version control with git add.
    • Perform your first commit with git commit -m "First commit".
    • Connect your local repository to the remote repository on GitHub using git remote add origin <URL of the repository>.
    • Check the main branch (main) and make sure you are on it.
    • Finally, upload the changes to the remote repository with git push -u origin main.

How to work with Prettier to format your code?

Prettier is a powerful and widely used tool for maintaining a style standard in code. It helps us ensure that HTML, CSS and JavaScript code is easy to read, regardless of who is editing it. Here's how to set up Prettier and get the most out of it.

How to install Prettier in your project?

  1. Install Prettier and the necessary plugins:

    • Use the terminal to install Prettier as a development dependency with the following line:
      npm install --save-dev [email protected] [email protected]
    • These plugins are required for Prettier to correctly recognize Astro files.
  2. Configure Prettier:

    • Create a configuration file in the root of your project called .prettierrc.cjs.
    • Add the following configurations to standardize the code:
      module.exports = { semi: true, singleQuote: false, tabWidth: 2, useTabs: true, plugins: [require('prettier-plugin-astro')], overrides: [ { files: "*.astro", options: { parser: "astro" } } ] };
    • Save and close the file.
  3. Test Prettier's configuration:

    • Open a file of your project in Visual Studio Code.
    • Select the code and use the option to format the document, choosing Prettier.
    • If you find errors, check the logs for invalid settings and adjust as necessary.

What to do with errors and logs?

When working with Prettier or any formatting tool, it is common to encounter errors in the settings. It is important not to get frustrated and consider these as opportunities to learn. Examine the logs provided in detail and check if there are any typing errors or misloaded configurations. It is always useful to check Prettier's official documentation to understand how the files should be configured.

Best practices when uploading changes to the repository

Maintaining a consistent workflow when uploading changes is crucial for clarity and easy project tracking. Here are some key steps you should follow:

  1. Before uploading changes:

    • Check the status of your files with git status.
    • Add all modified files with git add ...
  2. Make a detailed commit:

    • Make a clear and meaningful commit, e.g. git commit -m "Update config" to indicate what changes have been made.
  3. Upload the changes to the remote repository:

    • Push your changes with git push origin main.

By following these steps, you will be able to maintain detailed and orderly control of your project both locally and remotely. Remember to share your repository and progress in forums or learning community comment sections to receive feedback and collaborate efficiently. Cheer up and keep going!

Contributions 29

Questions 4

Sort by:

Want to see more contributions, questions and answers from the community?

.prettierrc.cjs

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

Prettier install:

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

Si al momento de seleccionar que “formateador” usar en el código y no les sale Prettier, asegúrense que esta activa la extensión Prettier en el VS.

Yo normalmente la tengo deshabilitada.

Configuración de Editior/IDE

Cuando desarrollamos nuestro proyecto en la respectiva herramienta, debemos generar de aquellas que nos permitan colaborar entre compañeros, e incluso equipos, lo que nos deja a personalización de aquellas reglas o estándares que nos darán ventaja y armonizarán nuestro XD (Experience Development, Experiencia de Desarrollo).
.

Repositorio de trabajo

Una vez creado el proyecto de manera remota (Github, GitLab, etc.), la tradición es ir integrando nuestros cambios de manera iterativa. De ello, lo recomendable es generar ciertos hooks sobre nuestro flujo normal de Git.
.
Como muchos otros sistemas de control de versiones, Git tiene una forma de activar secuencias de comandos personalizadas cuando ocurren ciertas acciones importantes.
.
Hay dos tipos de Hooks: del lado del cliente y del lado del servidor, los primeros se activan mediante operaciones como la confirmación y la fusión de cambios, mientras que los segundos se ejecutan en operaciones de red o transacción, como la recepción de confirmaciones enviadas.
.

ℹ️ Definición
Un GitHook es un accionable que interacciona con git su ciclo de vida.

.

Verificación de commits

Para la generación de hooks, tradicionalmente empleamos Husky. Dicha herramienta, nos permite inspeccionar el ciclo de vida de Git para realizar nuestros hooks, por ejemplo en la evaluación del formato del commit.
.

📌 Referencia
Conventional Commit es una definición de reglas para homologar nuestros cambios según una estructura clave de desarrollo.
Conventional Commits

.
Para habilitar hooks mediante Husky:

  • Instalación de la dependencia: npm i -D husky
  • Inicialización de Husky en Hooks: npx husky install
  • Adición del hook para evaluación de commits: npx husky add .husky/prepare-commit-msg "npx devmoji -e --lint"

.

✨ Concepto clave
Puede emplear como linter:

.

Linter / Formatter

✨ Concepto clave

  • Linters señala errores y malas prácticas
  • Los formatters corrigen nuestro código para que coincida con las guías de estilo

.
Cada individuo es un mundo, por ello acotar individuales en aras de sincronización es vital para leer código, omitiendo creatividades relativas al desarrollador en curso.
.
En acto, empleamos ciertas herramientas que nos extienden ciertas reglas para descansar nuestra lectura o revisión de código.
.
El emplear una o ambas herramientas para revisión de sintaxis y estilo de código, mejoramos o empeoramos nuestra experiencia de desarrollo, siendo más una preferencia que valor entregable a nuestro desarrollo de día a día.
.

📌 Referencia
Como linters, el más popular es ESLint compartiendo reglas para trabajar en equipo.
GitHub - ota-meshi/eslint-plugin-astro: ESLint plugin for Astro component

.

📌 Referencia
Como formatters, el más popular es Prettier para homologar visualmente nuestro código en equipo.
Editor Setup

.

eso de prettier está de más. Es una maña del profesor pero no veo su aporte real al curso
Prettier necesita parsers específicos para diferentes tipos de archivos. Por ejemplo, si estás trabajando con archivos de TypeScript, asegúrate de tener el parser `typescript` instalado. Puedes instalarlo usando npm: `npm install --save-dev prettier @typescript-eslint/parser`
al día de hoy me generó un error, lo que tuve que: 1. primero instala Prettier y el plugin `npm install --save-dev prettier prettier-plugin-astro` 1. Cambiar la carpeta de nombre: .prettierrc.mjs 2. el modo de exportar sería: `export default {` ` plugins: ['prettier-plugin-astro'],` `};` las otras configuraciones estarían normal. 3. Que el sistema tome estas configuraciones nuevas con un reinicio normal si es necesario 4. y ya
Tenía un problema en el editor al intentar formatear con Prettier un archivo de Astro. Aunque estaba configurado e instalada la extensión, no lo reconocía. Para solucionarlo, añadí este comando a la configuración de Visual Studio Code, el cual encontré en la documentación de Prettier "prettier.documentSelectors": \[ "\*\*/\*.astro" ],  "\[astro]": {"editor.defaultFormatter": "esbenp.prettier-vscode" }, Documentación: <https://github.com/prettier/prettier-vscode>

Si utilizas la extensión de Astro en Visual Studio Code, no es necesario configurar Prettier manualmente, ya que la extensión lo configura automáticamente por defecto. 👨‍💻

El archivo .prettierrc.cjs puede ser sin el require

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

Link de interés
Astro Prettier
Prettier Config
Astro Eslint

estos son los comandos usados

 git status
 git add .
git commit -m "First Commit"
git push origin main

 npm install --save-dev prettier@2.8.4 prettier-plugin-astro@0.8.0
Cuantas particularidades y cuantas configuraciones!!! Los errores son nuestros amigos 🤪
¿Alguien sabe como configuro mi VS-Code para que pueda tener estos colores así como los tiene el profe? ![](</Users/deibyrayo/Desktop/Captura de pantalla 2024-06-14 a la(s) 1.04.03 p. m..png>)![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-06-14%20a%20la%28s%29%201.04.03%E2%80%AFp.%C2%A0m.-87d1619c-9c4e-473d-93cf-4d7a598e4402.jpg)
<https://github.com/pabloInaipil/astrobuild.tips>
Mi repositorio: <https://github.com/Jonesh05/astrobuild.tips>
¿Alguien sabe como configuro mi VS-Code para que pueda tener estos colores así como los tiene el profe? ![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-06-14%20a%20la%28s%29%201.04.03%E2%80%AFp.%C2%A0m.-3966c9ef-ebfc-46d8-a741-e795075a554d.jpg)
<https://github.com/tattox20/tattox.tips>
Buenas una consulta, que pasa si no instalo los paquetes sin la version especifica que dice el profesor? en el caso de prettier el pide instalar la version @2.8.4 pero yo obvié eso y lo instale de la manera que aparece en la documentacion oficial prettier --write . --plugin=prettier-plugin-astro

Este es mi proyecto y los avances hasta el momento https://github.com/Diegojq/astrobuild.tips

¿Como puedo hacer para que en la terminal me muestre en que rama estoy? ara mostrar en qué rama estás en tu terminal, puedes agregar el nombre de la rama actual al prompt de la línea de comandos. Dependiendo del sistema operativo y de la shell que estés utilizando, el proceso puede variar. Aquí hay algunos ejemplos para las shells comunes: ### Bash 1. Abre tu archivo de configuración de bash, generalmente `~/.bashrc` o `~/.bash_profile`. 2. Agrega la siguiente línea al final del archivo:Esto mostrará el nombre de la rama entre paréntesis al final del prompt.```txt PS1='\[\033[01;32m\]\u@\h\[\033[00m\]:\[\033[01;34m\]\w\[\033[00m\]$(__git_ps1 " (%s)")\$ ' ``` 3. Guarda el archivo y reinicia tu terminal o ejecuta `source ~/.bashrc` (o `source ~/.bash_profile`) para aplicar los cambios. Después de realizar estos pasos, cada vez que abras una terminal, deberías ver el nombre de la rama actual en el prompt. Si no estás en ninguna rama (por ejemplo, si estás en un directorio que no es un repositorio de Git), no se mostrará la información de la rama. (si sale el error "Permission denied" indica que no tienes permisos para ejecutar el archivo `~/.bashrc` directamente. Puedes abrir el archivo en un editor de texto usando `sudo` o simplemente con un editor de texto: ```js sudo nano ~/.bashrc ```o ```js nano ~/.bashrc ``` El error "Permission denied" indica que no tienes permisos para ejecutar el archivo `~/.bashrc` directamente. Puedes abrir el archivo en un editor de texto usando `sudo` o simplemente con un editor de texto: bashCopy codesudo nano ~/.bashrc o bashCopy codenano ~/.bashrc Después de abrir el archivo con el editor de texto, puedes agregar la línea que mencioné anteriormente al final del archivo, guarda los cambios y cierra el editor. Luego, puedes reiniciar tu terminal o ejecutar `source ~/.bashrc` para aplicar los cambios. Ten en cuenta que utilizar `sudo` modifica los permisos del archivo para que el usuario root pueda editarlo. GNU Nano es un editor de texto en la terminal que es bastante simple de usar. Aquí hay algunas instrucciones básicas para navegar y editar en Nano: * **Mover el cursor:** * Usa las teclas de flecha para mover el cursor arriba, abajo, izquierda y derecha. * **Editar texto:** * Simplemente comienza a escribir para insertar nuevo texto en la posición del cursor. * **Guardar cambios:** * Presiona `Ctrl` + `O`, luego presiona `Enter` para guardar los cambios. * **Salir de Nano:** * Presiona `Ctrl` + `X` para salir de Nano. Si has realizado cambios sin guardar, te preguntará si deseas guardar antes de salir. * **Buscar texto:** * Presiona `Ctrl` + `W`, luego escribe el texto que estás buscando y presiona `Enter`. * **Salir sin guardar cambios:** * Si deseas salir sin guardar cambios, presiona `Ctrl` + `X` y, si es necesario, responde "no" cuando pregunte si deseas guardar. Después de hacer tus cambios, guarda el archivo (`Ctrl` + `O`) y sal de Nano (`Ctrl` + `X`). Luego, puedes cerrar y volver a abrir tu terminal para que los cambios en el archivo `.bashrc` surtan efecto. Espero que esto te ayude a editar el archivo `.bashrc` en Nano. Si tienes más preguntas o necesitas más ayuda, no dudes en preguntar. Sí, puedes personalizar el color de la rama en el prompt de la terminal. La cadena de escape `\033[01;32m` en la variable `PS1` controla el color. En este caso, `01;32` representa el color verde. Puedes ajustar estos valores para cambiar el color de la rama. Aquí tienes un ejemplo que usa el color verde para la rama: ```js PS1='\[\033[01;32m\]\u@\h\[\033[00m\]:\[\033[01;34m\]\w\[\033[00m\]\[\033[32m\]$(__git_ps1 " (%s)")\[\033[00m\]\$ ' ```En este caso, he añadido \\\[\033\[32m\\] antes de la expansión de \_\_git\_ps1 para cambiar el color a verde y \\\[\033\[00m\\] después para restablecer el color a su valor predeterminado. Puedes ajustar los valores según tus preferencias de colores. Aquí hay algunos códigos de color ANSI para referencia: Negro: \033\[30m Rojo: \033\[31m Verde: \033\[32m Amarillo: \033\[33m Azul: \033\[34m Magenta: \033\[35m Cyan: \033\[36m Blanco: \033\[37m Ajusta estos valores según tus preferencias de colores. Después de hacer cambios, guarda el archivo y reinicia tu terminal o ejecuta source ~/.bashrc para que los cambios surtan efecto.
![](https://static.platzi.com/media/user_upload/image-b909a3de-03cf-4c97-8739-6bcfd1bb4bbf.jpg)

Este es mi avance 😄 del proyecto que realizaré type-master.

Tuve un error en la parte de usar ‘require’ en el archivo .prettierrc.cjs, específicamente en la sección en la que se utiliza ‘require’,

    plugins: [
      require("prettier-plugin-astro")
    ],

Lo cambié por ‘import’ y se solucionó el error.

    plugins: [
      import("prettier-plugin-astro")
    ],

El error que experimentado basicamente está relacionado con cómo Node.js maneja los módulos ES (ECMAScript) y CommonJS en el contexto de Prettier y el plugin prettier-plugin-astro.

💻 Mi repo