No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

GitHub, VSCode, Prettier, Astro config

9/25
Recursos

Aportes 23

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

.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 鈥渇ormateador鈥 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.

S铆 tienes instalada la extensi贸n de Astro de VSCode ya no es necesario hacer toda la configuraci贸n manual del .prettierrc.cjs ni instalar ninguna dependencia extra, el formateo ya esta incluido con la extensi贸n, lo dice en el primer parrafo de la documentaci贸n de Prettier para Astro: <https://docs.astro.build/en/editor-setup/#prettier>
eso de prettier est谩 de m谩s. Es una ma帽a del profesor pero no veo su aporte real al curso

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

.

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
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>
<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 鈥榬equire鈥 en el archivo .prettierrc.cjs, espec铆ficamente en la secci贸n en la que se utiliza 鈥榬equire鈥,

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

Lo cambi茅 por 鈥榠mport鈥 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