Visual Studio Code, comúnmente conocido 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 convertir VS Code en un entorno de desarrollo integrado (IDE).
- Soporte multilingüe: Puede usar esta herramienta con casi cualquier lenguaje de programación a través de las extensiones de VS Code.
- Terminal integrado: El terminal integrado en VS Code permite a los desarrolladores ejecutar comandos de Git directamente desde el editor de código. Por lo tanto, puede validar, enviar y extraer modificaciones desde este editor.
Contenido del sitio
Formateo automático en VS Code
condiciones previas
- Código VS: Este editor de código se puede descargar gratis. Si no lo tiene instalado en su máquina, descargarlo del sitio web oficialdependiendo de su sistema operativo.
- Seleccione el idioma a utilizar: Debe decidir qué idioma usar porque hay diferentes formateadores para diferentes idiomas.
- Un entrenador : VS Code usa extensiones para formatear el código. Usaremos Prettier en este artículo. Sin embargo, puede usar cualquier formateador adecuado para el 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 funcionalidad 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 base de código a medida que lo escriba.
Sin embargo, también puede desactivar el formato automático para un bloque de código específico si desea que se destaque del resto. Puede hacerlo envolviendo la pieza de código en un bloque de comentarios que especifique las reglas que se aplicarán.
Beneficios de los códigos de formato automático en VS Code
- Ahorro de tiempo : Escribir código y formatear puede llevar tiempo. El formateo automático le ahorra tiempo, por lo que puede concentrarse más en el proceso de escritura y la sintaxis.
- Consistencia: Incluso si 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.
- Sigue las mejores prácticas: La función de formato automático es útil para aplicar convenciones de nomenclatura, espaciado y sangría coherentes.
- 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 entenderán fácilmente el código bien formateado.
Cómo habilitar el formato automático en VS Code y personalizarlo
Siga estos pasos para habilitar el formateo automático:
Una vez que Prettier esté instalado en su VS Code, puede habilitar la función de formato automático.
Estamos utilizando 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>Login </h2> <form action="" method="POST"> <label for="email">Enter Email</label> <input type="email" name="email" required><br><br> <label for="password">Enter Password</label> <input type="password" name="password" required><br><br> <input type="submit" value="Login"> </form> </body> </html>
Aunque el código anterior funciona, es difícil de leer y seguir porque no tiene la sangría esperada. 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 todos los demás códigos que escriba en su VS Code.
6. Ajuste los ajustes de configuración más bonitos: Prettier está configurado para hacer muchas cosas por defecto. Sin embargo, siempre puedes personalizarlo según tus necesidades. Ve a la configuración de VS Code, busca Prettier y ajusta la configuración a tu 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 está trabajando 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, ancho de tabulación, uso de punto y coma y si se deben usar comillas simples o dobles. En este caso;
- Solo se agregará una coma final cuando el código se transpila a es5.
- El ancho de tabulación, el número de espacios para cada tabulación, se establece en 4.
- Semi indica si debe o no agregar punto y coma a su código al final de las declaraciones. Lo establecemos en falso, lo que significa que no se agregarán puntos y comas.
- Puede usar comillas simples o dobles en su código. Especificamos que deberíamos usar comillas simples para este proyecto.
Puedes consultar Documentos más bonitos para entender cómo crear ajustes de configuración coherentes.
Mejores prácticas para el formato automático en VS Code
Usa el formato correcto
Aunque hemos utilizado Prettier en este artículo con fines de demostración, esto no significa que se aplique a todos los idiomas. Hay cientos de extensiones de formato para VS Code, y depende de usted descubrir cuál se adapta a sus necesidades. Por ejemplo, los formateadores como Prettier y Beautify son adecuados para 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 entrenador. 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 fácil de depurar.
Usar atajos de teclado
VS Code ofrece cientos de accesos directos para ahorrarle tiempo al formatear. Incluso puede personalizar estos comandos en algo memorable.
Revisa tu código antes de comprometerte
Aunque el linting y el formateo automático pueden resolver algunos problemas en su código; siempre debe 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 Windows, Mac y Linux como Ubuntu. Puede usar los siguientes accesos directos para formatear todo el documento o áreas específicas de su código resaltado;
las ventanas
- La combinación Shift + 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 Shift + Option + 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 hacia abajo hasta Preferencias
- Haga clic en Métodos abreviados de teclado para mostrar 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 será diferente 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 le permitirá comprender los idiomas admitidos y cómo aprovecharlos al máximo.
Consulte nuestro artículo sobre las mejores extensiones de VS Code que deben usar los desarrolladores.
