GitHub, VSCode, Prettier, Astro config

.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:

• Devmoji
• Commitlint

.

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

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

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.

Repositorio: https://github.com/davidsanchezUK/astrobuild.tips

Repositorio: https://github.com/ADream17/Astrobuild.tips

Repositorio: https://github.com/CMacxC/astrobuild.tips

💻 Mi repo

Este es mi repo

https://github.com/jcvb/astrobuild.tips

Saludos