Visual Studio Code, conocido popularmente como VS Code, es uno de los editores de código más utilizados. VS Code tiene soporte incorporado para Node.js, JavaScript y TypeScript. Sin embargo, puede utilizar varias extensiones para hacerlo accesible a la mayoría de los demás lenguajes y tiempos de ejecución.

Microsoft es la empresa que ha desarrollado 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 utilizar 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 utilizar esta herramienta con casi todos los lenguajes de programación a través de las extensiones de VS Code.
  • Terminalintegrado: El terminal integrado en VS Code permite a los desarrolladores ejecutar comandos Git directamente desde el editor de código. Por lo tanto, puede confirmar, empujar y tirar de los cambios desde este editor.

Autoformateo en VS Code

Auto-Formatting-in-VS-Code

Requisitos previos

  • VS Code: Este editor de código es de descarga gratuita. Si no lo tiene instalado en su máquina, descárguelo desde el sitio oficial, dependiendo de su sistema operativo.
  • Seleccione el lenguaje a utilizar: Debe decidir el idioma que va a utilizar, ya que existen diferentes formateadores para los distintos idiomas.
  • Un formateador: VS Code utiliza extensiones para formatear el código. En este artículo utilizaremos Prettier. Sin embargo, es libre de utilizar cualquier formateador que se adapte al lenguaje que esté utilizando.

El autoformateo es una característica que formatea automáticamente bloques/líneas de código o un archivo en el editor de código basándose en reglas y directrices específicas. Esta característica se basa en un archivo de configuración que especifica las reglas de formateo sobre sangría, saltos de línea y espaciado.

Cuando la función de autoformato está activada, todas estas reglas se aplicarán a todos los archivos de su base de código a medida que los escriba.

Sin embargo, también puede desactivar el autoformato para un bloque de código específico si desea que destaque sobre el resto. Para conseguirlo, puede envolver el trozo de código en un bloque de comentarios que especifique las reglas que deben aplicarse.

Ventajas del autoformateo de códigos en VS code

  • Ahorra tiempo: Escribir código y darle formato puede llevar mucho tiempo. El autoformateo le ahorra tiempo, y así puede centrarse más en el proceso de escritura y en la sintaxis.
  • Coherencia: Aunque el código fuente no aparezca en el lado del cliente, debe existir cierta coherencia. El autoformateo es útil, especialmente en proyectos grandes con múltiples colaboradores.
  • Respeta las mejores prácticas: La función de autoformateo es útil para aplicar sangrías, espaciados y convenciones de nomenclatura coherentes.
  • Facilita la lectura del código: El código bien formateado es fácil de seguir durante las revisiones del 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 autoformato en VS Code y personalizarlo

Siga estos pasos para habilitar el autoformateo:

  1. Necesita un formateador en forma de extensión para habilitar el autoformateo en VS Code. Puede encontrar el icono de extensiones en el menú de su VS Code.
  2. Instale la extensión Prettier. Busque prettier; encontrará muchas extensiones que comparten el mismo nombre. Haga clic en la primera, desarrolladora por Prettier, y haga clic en «instalar»
Prettier

Una vez que Prettier esté instalado en su VS Code, puede activar la función de autoformato.

Utilizaremos un simple archivo HTML de una página de inicio de sesión para demostrar cómo habilitar el autoformateo.

Utilizaremos este código

<!DOCTYPE html&gt

<html&gt

 <head&gt

 <title>Formulario de inicio de sesión</title&gt

 </head&gt

 <estilo body&gt

 <h2 style="text-align: center; margin-top: 50px;">Inicio de sesión </h2&gt

 <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);">Inicio de sesión

             <label for="email" style="display: block; margin-bottom: 10px;">Introduzca el correo electrónico</label&gt

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

<label for="contraseña" style="display: block; margin-bottom: 10px;">Introduzca la contraseña</label&gt

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

<input type="submit" value="Iniciar sesión" style="background-color: #af4c9e; color: blanco; padding: 10px 20px; border: none; border-radius: 3px; cursor: puntero;"&gt

 </form&gt

 </body&gt

</html&gt

Aunque el código anterior es funcional, es difícil de leer y seguir ya que no tiene la sangría esperada. Utilizaremos Prettier para autoformatear el código.

Siga estos pasos.

  1. Cree un archivo HTML (index.html) y añada el código anterior
  2. Localice Configuración en la parte inferior izquierda de su código VS
Settings

3. Escriba Formatter en la barra de búsqueda y seleccione Prettier en la pestaña Editor:Default Formatter.

formatter

4. Localice Editor : Formato en Guardar y marque la casilla.

format

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

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

6. Ajuste los parámetros de configuración de Prettier: Prettier está configurado para realizar muchas cosas por defecto. Sin embargo, puede personalizarlo para adaptarlo a sus necesidades. Vaya a Configuración en su VS Code, busque Prettier y ajuste la configuración a su gusto.

image-54

7. Cree un archivo de configuración de Prettier: Los ajustes que haya configurado en su máquina podrían diferir de los de los demás si trabaja en equipo. Un archivo de configuración de Prettier le asegurará un estilo de código coherente para su proyecto. Cree un archivo .prettierrc con extensión .json para configurar los ajustes de su proyecto. Podemos añadir este código al archivo JSON con fines de demostración; 

{

  "trailingComma": "es5",

  "tabWidth": 4,

  "semi": falso,

  "singleQuote": true

}

El bloque de código anterior especifica cuatro cosas, las comas finales, el ancho del tabulador, el uso del punto y coma y si se deben utilizar comillas simples o dobles. En este caso;

  • La coma final sólo se añadirá cuando el código se transpire a es5.
  • El ancho del tabulador, el número de espacios para cada tabulación, se fija en 4.
  • Semi indica si debe añadir punto y coma o no a su código al final de las sentencias. Nosotros lo hemos configurado como false, lo que significa que no se añadirán puntos y comas.
  • Puede utilizar comillas simples o dobles en su código. Hemos especificado que debemos utilizar comillas simples para este proyecto.

Puede consultar la documentación de Prettier para entender cómo crear ajustes de configuración consistentes.

Mejores prácticas para el autoformateo en VS Code

Utilice el formato correcto

Aunque hemos utilizado Prettier en este artículo con fines demostrativos, no significa que sea aplicable a todos los lenguajes. Existen cientos de extensiones de formateo para VS Code, y depende de usted determinar cuál se adapta a sus necesidades. Por ejemplo, los formateadores como Prettier y Beautify se adaptan a HTML y CSS. Por otro lado, puede utilizar las extensiones Black o Python para formatear su código Python.

Utilice un estilo de código coherente

Como ha visto, puede personalizar la configuración del formateador. Si trabaja en equipo, asegúrese de tener las mismas configuraciones para crear un estilo de código coherente. Lo mejor es crear un archivo .prettierrc.extension que incluya todas las configuraciones de su proyecto.

Utilice linters

Puede utilizar linters para comprobar violaciones de estilo, errores de sintaxis y errores de programación en su código. La combinación de linters con el autoformateo le ahorrará mucho tiempo y esfuerzo a la hora de hacer legible y depurar su código.

Utilice los atajos de teclado

VS Code dispone de cientos de atajos de teclado que le ahorrarán tiempo a la hora de formatear. Incluso puede personalizar estos comandos con algo memorable.

Compruebe su código antes de comprometerse

Aunque el linting y el autoformateo pueden resolver algunos problemas en su código; todavía tiene que revisar su código antes de introducir el comando commit.

Atajos de formateo de código

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

Windows

  • La combinaciónShift Alt F formatea todo el documento.
  • La combinación Ctrl K, Ctrl F formatea una sección de su código que haya seleccionado. Por ejemplo, un div.

macOS

  • La combinación ShiftOption F formatea todo el documento.
  • La combinación Ctrl K,Ctrl F formatea una sección del código que haya seleccionado. Por ejemplo, un div.

Ubuntu

  • La combinación CtrlMayús I formatea todo el documento.
  • La combinación Ctrl K,Ctrl F formatea una sección de su código que haya seleccionado. Por ejemplo, un div.

Sin embargo, tenga en cuenta que algunos de estos atajos pueden fallar si ha personalizado su VS Code con varios atajos.

Puede comprobar sus atajos de VS Code siguiendo estos pasos;

  • Abra VS Code y haga clic en el elemento Archivo de la esquina superior izquierda.
  • Desplácese hasta Preferencias
  • Haga clic en Atajos de Teclado para ver todos los atajos que puede utilizar.

Conclusión

El autoformateo puede ahorrarle mucho tiempo si lo activa. La elección de una extensión variará en función del idioma que utilice. Puede instalar varios formateadores de código en función de los lenguajes de programación que utilice para sus proyectos.

Compruebe siempre la documentación del formateador que elija para su código. Así se asegurará de que entiende los lenguajes que soporta y cómo sacarles el máximo partido.

More for your code