Cómo formatear automáticamente en VS Code para ahorrar tiempo y esfuerzo [2023]

Visual Studio Code, conocido popularmente como VS Code, es uno de los editores de código más utilizados. VS Code tiene soporte integrado para Node.js, JavaScript y TypeScript. Sin embargo, puede usar varias extensiones para que sea accesible para la mayoría de los otros idiomas y tiempos de ejecución.

Microsoft es la empresa que desarrolló este editor de código gratuito y de código abierto.

VS Code es popular debido a estas características;

Sentido inteligente: VS Code proporciona autocompletado de código y resaltado de sintaxis.
Multiplataforma: Puede usar este editor de código en los sistemas operativos Linux, Windows y macOS.
Disponibilidad de varias extensiones: La disponibilidad de varias extensiones también puede transformar VS Code en un entorno de desarrollo integrado (IDE).
Soporte multi-idioma: Puede usar esta herramienta con casi todos los lenguajes de programación a través de las extensiones de VS Code.
Terminal integrado: El terminal incorporado en VS Code permite a los desarrolladores ejecutar Comandos de Git directamente desde el editor de código. Por lo tanto, puede confirmar, enviar y extraer cambios desde este editor.

Auto-Formatting in VS Code

Requisitos previos

Código VS: Este editor de código se puede descargar gratis. Si no lo tiene instalado en su máquina, descargarlo del sitio oficial, dependiendo de su sistema operativo.
Seleccione el idioma a utilizar: Debe decidir qué idioma usar, ya que existen diferentes formateadores para diferentes idiomas.
Un formateador: VS Code usa extensiones para formatear el código. Usaremos Prettier en este artículo. Sin embargo, puede usar cualquier formateador que se adapte al idioma que está usando.

El formato automático es una función que formatea automáticamente bloques/líneas de código o un archivo en el editor de código según reglas y pautas específicas. Esta función se basa en un archivo de configuración que especifica reglas de formato sobre sangría, saltos de línea y espaciado.

Cuando la función de formato automático está habilitada, todas estas reglas se aplicarán a todos los archivos en su código base a medida que lo escriba.

Sin embargo, también puede deshabilitar el formato automático para un bloque de código específico si desea que se destaque del resto. Para lograr esto, puede envolver la pieza de código en un bloque de comentarios que especifica las reglas que se aplicarán.

Benefits of Auto-formatting codes in VS code

Ahorra tiempo: Escribir código y formatear puede llevar mucho tiempo. El formateo automático le ahorra tiempo y, por lo tanto, puede concentrarse más en el proceso de escritura y la sintaxis.
Consistencia: A pesar de que el código fuente no aparece en el lado del cliente, debe haber cierta consistencia. El formato automático es útil, especialmente para proyectos grandes con múltiples colaboradores.
Observa las mejores prácticas: La función de formato automático es útil para hacer cumplir las convenciones de sangría, espaciado y nomenclatura consistentes.
Para facilitar la lectura del código: El código bien formateado es fácil de seguir durante las revisiones de código. Los nuevos desarrolladores que se unan a su organización comprenderán fácilmente el código bien formateado.

How to enable Auto Format in VS code and customize it

Siga estos pasos para habilitar el formato automático:

Necesita un formateador en forma de extensión para habilitar el formato automático en VS Code. Puedes encontrar el extensions icono en el menú de su VS Code.
Instale Prettier extensión. Buscar más bonita; encontrará muchas extensiones que comparten el mismo nombre. Haga clic en el primero, desarrollado por Prettier, y haga clic en "instalar".

Una vez que Prettier esté instalado en su VS Code, puede habilitar la función de formato automático.

Usamos un archivo HTML simple de una página de inicio de sesión para demostrar cómo habilitar el formato automático.

Usaremos este código:

<!DOCTYPE html>

<html>

 <head>

 <title>Login Form</title>

 </head>

 <body style>

 <h2 style="text-align: center; margin-top: 50px;">Login </h2>

 <form action="" method="POST" style="max-width: 250px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);">

             <label for="email" style="display: block; margin-bottom: 10px;">Enter Email</label>

 <input type="email" id="email" name="email" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br>

<label for="password" style="display: block; margin-bottom: 10px;">Enter Password</label>

 <input type="password" id="password" name="password" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br>

<input type="submit" value="Login" style="background-color: #af4c9e; color: white; padding: 10px 20px; border: none; border-radius: 3px; cursor: pointer;">

 </form>

 </body>

</html>

Aunque el código anterior es funcional, es difícil de leer y seguir, ya que no está sangrado como se esperaba. Usaremos Prettier para formatear automáticamente el código.

Sigue estos pasos.

Cree un archivo HTML (index.html) y agregue el código anterior
Localiza Settings en la parte inferior izquierda de su Código VS

3. Escribe Formatter en la barra de búsqueda y seleccione Prettier en Editor:Default Formatter .

4. Localizar Editor: Format on Save y marque la casilla.

5. Guarde su archivo HTML, seleccione las entradas en su documento HTML, haga clic con el botón derecho y seleccione Format Document.

6. Verifique si su documento ha sido formateado. Esta extensión formateará automáticamente todo el otro código que escriba en su VS Code.

6. Ajuste la configuración de configuración más bonita: Prettier está configurado para realizar muchas cosas de forma predeterminada. Sin embargo, aún puede personalizarlo para satisfacer sus necesidades. Ir a Settings en su VS Code, busque Prettiery ajuste la configuración a su gusto.

7. Crear un archivo de configuración más bonito: Los ajustes que ha configurado en su máquina pueden diferir de los demás si trabaja en equipo. Un archivo de configuración de Prettier asegurará que tenga un estilo de código consistente para su proyecto. Crear un .prettierrc archivo con .json extensión para configurar los ajustes de su proyecto. Podemos agregar este código al archivo JSON para fines de demostración;

{

  "trailingComma": "es5",

  "tabWidth": 4,

  "semi": false,

  "singleQuote": true

}

El bloque de código anterior especifica cuatro cosas, comas finales, el ancho de la pestaña, el uso de punto y coma y si se usan comillas simples o dobles. En este caso;

Solo se agregará una coma final cuando el código se transpila a es5.
El ancho de la pestaña, el número de espacios para cada pestaña, se establece en 4.
Semi indica si debe agregar punto y coma o no a su código al final de las declaraciones. Lo hemos configurado como falso, lo que significa que no se agregarán puntos y comas.
Puede usar comillas simples o dobles en su código. Hemos especificado que debemos usar comillas simples para este proyecto.

Usted puede comprobar fuera Documentos más bonitos para entender cómo crear ajustes de configuración coherentes.

Best Practices for Auto Format in VS Code

Usa el formato correcto

Aunque hemos utilizado Prettier en este artículo con fines de demostración, no significa que se aplique a todos los idiomas. Existen cientos de extensiones de formato para VS Code, y depende de usted determinar cuál se adapta a sus necesidades. Por ejemplo, formateadores como Prettier y Beautify adaptarse a HTML y CSS. Por otro lado, puedes usar Black or Python extensiones para formatear su código Python.

Usa un estilo de código consistente

Como has visto, puedes personalizar la configuración del formateador. Si está trabajando en equipo, asegúrese de tener las mismas configuraciones para crear un estilo de código consistente. El mejor enfoque es crear un archivo .prettierrc.extension para incluir todas las configuraciones de su proyecto.

usar linters

Puedes usar linters para verificar violaciones de estilo, errores de sintaxis y errores de programación en su código. La combinación de linters con formato automático le ahorrará mucho tiempo y esfuerzo para hacer que su código sea legible y depurado.

Utilizar atajos de teclado

VS Code tiene cientos de accesos directos para ahorrarle tiempo al formatear. Incluso puede personalizar estos comandos para algo memorable.

Revisa tu código antes de comprometerte

Aunque el linting y el formateo automático pueden solucionar algunos problemas en su código; todavía tiene que revisar su código antes de ingresar el comando de confirmación.

Code Formatting Shortcuts

VS Code es un editor de código multiplataforma que puede usar en sistemas basados en Windows, Mac y Linux como Ubuntu. Puede usar los siguientes accesos directos para formatear todo el documento o áreas específicas resaltadas de su código;

Windows

Shift + Alt + F combinación da formato a todo el documento.
Ctrl + K, Ctrl + F combinación da formato a una sección de su código que ha seleccionado. Por ejemplo, un div.

macOS

Shift + Option + F combinación da formato a todo el documento.
Ctrl + K, Ctrl + F combinación da formato a una sección de su código que ha seleccionado. Por ejemplo, un div.

Ubuntu

Ctrl + Shift + I combinación da formato a todo el documento.
Ctrl + K, Ctrl + F combinación da formato a una sección de su código que ha seleccionado. Por ejemplo, un div.

Sin embargo, tenga en cuenta que algunos de estos accesos directos pueden fallar si ha personalizado su Código VS con varios accesos directos.

Puede verificar sus accesos directos de VS Code siguiendo estos pasos;

Abra VS Code y haga clic en el File elemento en la esquina superior izquierda.
Desplácese hasta Preferences
Haga clic en Keyboard Shortcuts para ver todos los accesos directos que puede utilizar.

Conclusión

El formateo automático puede ahorrarle mucho tiempo cuando lo habilita. La elección de una extensión diferirá según el idioma que esté utilizando. Puede instalar varios formateadores de código según los lenguajes de programación que utilice para sus proyectos.

Siempre revise la documentación del formateador que elija para su código. Esto asegurará que comprenda los idiomas que admite y cómo aprovecharlo al máximo.

Consulte nuestro artículo sobre el mejores extensiones de VS Code los desarrolladores deben usar.