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 Prettier
y 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.