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;
- Intellisense: 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 multilenguaje: puede usar esta herramienta con casi todos los lenguajes de programación a través de las extensiones de VS Code.
- Terminal integrada: la terminal integrada 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.
Tabla de contenido
Formato automático en VS Code
requisitos previos
- VS Code: este editor de código se puede descargar gratis. Si no lo tiene instalado en su máquina, descárguelo del sitio oficial, dependiendo de su sistema operativo.
- Seleccione el idioma a usar: debe decidir el idioma a usar, ya que hay 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.
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 formateo automático le ahorra tiempo y, por lo tanto, puede concentrarse más en el proceso de escritura y la sintaxis.
- Coherencia: aunque el código fuente no aparece en el lado del cliente, debe haber cierta coherencia. 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.
Cómo habilitar el formato automático en el código VS y personalizarlo
Siga estos pasos para habilitar el formato automático:
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.
3. Escriba Formateador en la barra de búsqueda y seleccione Más bonito en la pestaña Editor: Formateador predeterminado.
4. Busque Editor: Formato en Guardar 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 Dar formato al documento.
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 de Prettier: Prettier está configurado para realizar muchas cosas de manera predeterminada. Sin embargo, aún puede personalizarlo para satisfacer sus necesidades. Vaya a Configuración en su VS Code, busque Prettier y ajuste la configuración a su gusto.
7. Cree un archivo de configuración más bonito: las configuraciones que ha configurado en su máquina pueden diferir de otras si trabaja en equipo. Un archivo de configuración de Prettier asegurará que tenga un estilo de código consistente para su proyecto. Cree un archivo .prettierrc con la extensión .json 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.
Puede consultar los documentos de Prettier para comprender cómo crear 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 se adaptan a HTML y CSS. Por otro lado, puede usar extensiones Black o Python 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 coherente. El mejor enfoque es crear un archivo .prettierrc.extension para incluir todas las configuraciones de su proyecto.
usar linters
Puede 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.
Métodos abreviados de formato de código
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;
ventanas
- La combinación Mayús + Alt + F da formato a todo el documento.
- La combinación Ctrl + K, Ctrl + F formatea una sección de su código que ha seleccionado. Por ejemplo, un div.
Mac OS
- La combinación Mayús + Opción + F da formato a todo el documento.
- La combinación Ctrl + K, Ctrl + F formatea una sección de su código que ha seleccionado. Por ejemplo, un div.
ubuntu
- La combinación Ctrl + Shift + I da formato a todo el documento.
- La combinación Ctrl + K, Ctrl + F formatea 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 elemento Archivo en la esquina superior izquierda.
- Desplácese a Preferencias
- Haga clic en Métodos abreviados de teclado para ver todos los métodos abreviados 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 las mejores extensiones de VS Code que deben usar los desarrolladores.