In Desarrollo | Última actualizaciónated: Marzo 13, 2023

Cloudways ofrece alojamiento en la nube administrado para empresas de cualquier tamaño para alojar un sitio web o aplicaciones web complejas.

How to Auto-Format in VS Code to Save Time and Effort [ 2023 ]

By tito kamunya

How-to-Auto-Format-in-VS-Code-to-Save-Time-and-Effort

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.
Cruzar-platformar: Puede utilizar este editor de código en Linux, Windows y sistemas operativos macOS.
Disponibilidad de varias extensiones: La disponibilidad de varias extensiones también puede transformar VS Code en una integraciónateentorno de desarrollo (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.
Integrarateterminal d: 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.

Formato automático en 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 característica que automáticamenteally formatea bloques/líneas de código o un archivo en el editor de código según reglas y pautas específicas. Esta característica 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.

However, you can also disable autoformatting for a specific code block if you want it to stand out from the rest. To achieve this, you can wrap the piece of code in a comment block that specifies the rules to be applied.

Beneficios de los códigos de formato automático en el código VS

Ahorra tiempo: Escribir código y formatear puede llevar mucho tiempo. El formato automático le ahorra tiempo y, por lo tanto, puede concentrarse más en la escritura. process y sintaxis.
Consistencia: A pesar de que el código fuente no aparece en el lado del cliente, debería haber cierta coherencia. El formateo automático resulta útil, especialmenteally para proyectos grandes con múltiples contribuyentes.
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 el código revvistas. Los nuevos desarrolladores que se unan a su organización comprenderán fácilmente el código bien formateado.

Cómo habilitar el formato automático en el código VS y personalizarlo

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.
Instalar 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 demostrarate 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.

Create 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. ubicaciónate Editor: Format on Save y marque la box.

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 será automáticaally formatee todo el resto del código que escriba en su código VS.

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. Create un archivo de configuración más bonito: Los ajustes que ha configurado en su máquina pueden diferir de otros si trabaja en equipo. Un archivo de configuración Prettier garantizará que tenga un estilo de código consistente para su proyecto. create a .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índicoates si debe agregar punto y coma o no a su código al final de statementos. 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 crearate ajustes de configuración consistentes.

Mejores prácticas para formato automático en 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.ate 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 pelusas to check for style violations, syntax errors, and programming mistakes in your code. Combining linters with auto-formating will save you a lot of time and effort in making your code readable and debugging.

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 tienes que revVea su código antes de ingresar el comando de confirmación.

Métodos abreviados de formato de código

VS Code is a multiplatform code editor that you can use on Windows, Mac y sistemas basados en Linux como Ubuntu. Puede utilizar los siguientes atajos para formatear todo el documento o áreas resaltadas específicas 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.

Para Concluir

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.