El formato automático se guarda en el archivo en el código de Visual Studio

El código de formato manual puede ser tedioso, especialmente en entornos de desarrollo de ritmo rápido o colaborativo.

Si bien el formato constante es crítico para la legibilidad y la mantenibilidad, al hacerlo manualmente, puede reducir la velocidad a veces conducir a resultados inconsistentes para un proyecto.

En este artículo, revisaré sus pasos para configurar el código Visual Studio, que formatea automáticamente el código cada vez que guarde el archivo.

Usaremos una extensión de código VS llamada Más hermosoes una de las herramientas más adoptadas para ejecutar estilos de código utilizando JavaScript, TypeScript y muchos otros idiomas.

Al final de esta guía, tendrá una configuración que mantiene su código limpio con cero esfuerzo adicional.

Paso 1: Instale una extensión más hermosa en el código VS

Primero, necesitas Hermoso – formato de código expandir. Esta herramienta admite JavaScript, TypeScript, HTML, CSS, React, Vue, etc.

Abra con código, vaya a Extendido Barra lateral (o prensa Ctrl + Shift + X) y buscar Más hermoso.

Hacer clic Instalar Y recargar con el código en el aviso.

Paso 2: Habilitar formateo en Guardar

Ahora instalado maravillosamente, ejecutémoslo automáticamente al guardar el archivo.

Abierto configuración aprobar Ctrl + , O ir Archivo> Preferencias> Configuración.

En la barra de búsqueda en la parte superior, ingrese format on save Luego seleccione el cuadro Editar: Guardar formato.

Esto le dirá al código VS que use automáticamente su código al guardar el archivo, pero eso es solo parte de la configuración.

solución de problemas

Si el archivo Guardar no formatea su código automáticamente, puede deberse a múltiples formatters instalados en el código VS. Aquí le mostramos cómo asegurarse de que el más bonito esté configurado en el valor predeterminado:

• Abra cualquier archivo en el código VS y presione Ctrl + Shift + P (o Cmd + Shift + P En Mac) proponer la paleta de comando.
• tipo «Documento de formato» y seleccione la opción que aparece.

• Si hay múltiples formas disponibles, el código VS le solicita que seleccione uno.

• elegir «Hermoso – Formato de código» De la lista.

Ahora intente guardar el archivo nuevamente. Si se selecciona una opción hermosa correctamente, debe reformatear el código en Guardar de inmediato.

En algunos casos, es posible que deba guardar el archivo No Por ejemplo, aplique formatos cuando se use código generado o peculiaridades de formato temporal. Para hacer esto, abra la paleta de comandos nuevamente y ejecute «Guardar sin formatear».

Opcional: configuración avanzada

Prettier funciona fuera de la caja, pero puede agregar una forma de personalizar su código de formato .prettierrc Archivo de configuración en la raíz del proyecto.

Aquí hay un ejemplo simple:

{
  "singleQuote": true,
  "trailingComma": "es5",
  "semi": false
}

Esta configuración le dice a Pretty que use cotizaciones individuales, agregue comas finales que funcionen en ES5 (por ejemplo, en objetos y matrices) y omiten las semicolones al final de la declaración.

Hay muchas otras opciones, como ajustar el ancho de impresión, el ancho de la pestaña o el control de cómo se procesan JSX y HTML.

Puede Hermosa documentaciónpero para la mayoría de los proyectos, algunas de estas configuraciones clave .prettierrc Es un largo camino por recorrer.

Probar

Cree o abra cualquier archivo, JavaScript, TypeScript, HTML, etc. Agregue algún código mal formateado.

Luego simplemente guarde el archivo (Ctrl + S o Cmd + S), mira las limpiezas más hermosas de inmediato.

Como puede ver, incluso en diferentes idiomas integrados, las hendiduras y espacios más hermosos son cada parte del código HTML.

Resumir

Ya sea que esté codificando en la atmósfera o haciendo todo usted mismo, el formato correcto es un signo de escribir un buen código.

Hemos cubierto los conceptos básicos de escribir código limpio y consistente: sangría, espaciado y envoltura de palabras, y construir formatos automáticos directamente sobre estos conceptos básicos.

Una vez configurado, elimina la necesidad de considerar la estructura al codificar, lo que le permite centrarse en la lógica.

Si también desea saber cómo ejecutar JavaScript o HTML en código con él, también hemos cubierto esto, por lo que si está configurando su flujo de trabajo desde cero, consulte estas guías.

Si aún no ha usado formato automático, vale la pena una parte del flujo de trabajo.

Y si usa otras herramientas o métodos, me encantaría saber cómo lo configura, háganos saber en los comentarios. 🧑‍💻