Si está pensando en aprender a codificar o si ya lo escribe todos los días, un editor de código confiable, como Visual Studio Code, es imprescindible. A medida que escribe el código, debe pensar en el formato, ya que hace que sea más fácil de leer para los seres humanos.

Cómo formatear automáticamente el código en VS Code

Todas esas reglas específicas sobre las sangrías y el espacio entre líneas son esenciales, pero también fáciles de olvidar a medida que se enfoca en su trabajo.

Es por eso que VS Code le permite utilizar extensiones de formato automático que pueden ayudarlo en el camino. Algunas extensiones de formato automático pueden formatear más de un lenguaje de programación, mientras que necesitarás integrar extensiones especializadas para otros.

Cómo formatear automáticamente HTML

El lenguaje de marcado de hipertexto o HTML es un lenguaje de codificación utilizado para crear y mostrar páginas web. Los desarrolladores web y los ingenieros de software usan HTML todos los días y pueden beneficiarse de una herramienta de formato automático.

Si su editor de código de elección es VS Code, así es como puede encontrar Prettier, un formateador de código popular, y activar la función de formato automático.

  1. Abra Visual Studio Code en su computadora.
  2. Navegue a la pestaña de extensión en el lado izquierdo de la pantalla. Se representa como cuatro bloques.
  3. En el campo de la barra de búsqueda, ingrese "Formatador de código más bonito".
  4. Obtendrá varios resultados de búsqueda, pero seleccione el que hizo Prettier, no otra persona o empresa.
  5. Haga clic en el botón "Instalar" y la extensión se descargará en segundos.

Una vez que haya instalado el formateador Prettier, puede activar la función de formato automático y garantizar un estilo consistente mientras escribe el código.

  1. Abra o cree un nuevo archivo HTML en VS Code.
  2. Vaya a "Configuración", ubicado en la esquina inferior izquierda de la pantalla.
  3. Ingrese "Formato" en el cuadro de búsqueda y cambie a la pestaña "Usuario".
  4. Haga clic en la opción "Formateador predeterminado" y seleccione "Más bonito" de la lista.
  5. Desplácese un poco hacia abajo hasta que vea la opción "Editor: Formatear al guardar".
  6. Marque la casilla junto a esta opción.
  7. Vuelva a su archivo y verifique si la configuración funciona.

Prettier debería formatear automáticamente sus archivos HTML a medida que los guarda.

Formato JSON automático

La notación de objetos de JavaScript o JSON se clasifica como un formato de intercambio de datos independiente del idioma. Las aplicaciones móviles y los programas informáticos utilizan archivos JSON para leer datos de los servidores y mostrarlos en la pantalla.

Cuando crea un archivo JSON en el editor de código de Visual Studio, también debe tener en cuenta el formato. La buena noticia es que puede usar las extensiones del formateador Prettier en VS Code para aplicar un estilo coherente en sus archivos JSON.

Esto es todo lo que necesita hacer para activar la función de formato automático para archivos JSON.

  1. Inicie VS Code y vaya a la pestaña de extensiones designadas en el lado izquierdo de la ventana.
  2. Busque "formateador de código más bonito" en el campo de búsqueda.
  3. El primer resultado suele ser en el que desea hacer clic. Sin embargo, para estar seguro, seleccione el que tiene "Más bonito" en la lista como desarrollador.
  4. Haga clic en "Instalar" y espere unos segundos para que se descargue el formateador.

Cuando el formateador Prettier esté instalado, asegúrese de que la función de formato automático esté activada siguiendo estos pasos.

  1. Cree un nuevo archivo JSON o abra uno que aún no haya sido formateado.
  2. Haga clic en "Configuración" en la esquina inferior izquierda.
  3. Busque "Formato".
  4. Haga clic en la sección "Formateador predeterminado". de la lista desplegable, seleccione "Más bonito".
  5. Desplácese hacia abajo y deténgase cuando vea la opción "Editor: Formatear al guardar".
  6. Haga clic en la casilla de verificación junto a esta opción.
  7. Verifique que la función de formato automático funcione.

Eso es todo al respecto. La extensión Prettier en el editor de VS Code facilita el formateo automático.

Python de formato automático

En estos días, Python es uno de los lenguajes de programación más populares y es ampliamente utilizado por desarrolladores web y entusiastas de la codificación. Se utiliza para diseñar y crear software y sitios web, analizar datos, automatizar tareas y mucho más.

Si usa VS Code para editar el archivo de Python, deberá usar el formateador correcto. Si bien Prettier funciona para muchos lenguajes de programación diferentes, no es compatible con Python.

Afortunadamente, VS Code ofrece una solución. Uno de los mejores formateadores de Python en VS Code es Black, y se puede usar para formatear el código siempre que guarde un archivo automáticamente. Sin embargo, antes de usar Black, debe descargar la extensión Python de Microsoft para VS Code:

  1. Abra VS Code y busque "Python" en el cuadro de búsqueda.
  2. Asegúrate de que sea la extensión de Microsoft y haz clic en "Instalar".
  3. Para instalar el formateador Phyton, ingrese el siguiente texto en su entorno virtual: “$ pip install black”.
  4. Vaya a "Configuración" en VS Code y busque "Proveedor de formato Phyton".
  5. En el menú desplegable, seleccione "Negro".
  6. Desplácese hacia abajo y busque la opción "Editor: Formatear al guardar".
  7. Marque la casilla junto a esta opción.

Black, el formateador de Python ahora formateará automáticamente el código cada vez que guarde el archivo.

Formato automático de código VS al guardar

Puede activar la función de formato automático independientemente del lenguaje de programación o formateador de código que esté utilizando en VS Code.

La mayoría de los desarrolladores usan múltiples extensiones de formato de código en VS Code, por lo que puede asegurarse de que cada uno de ellos formatee automáticamente el archivo a medida que lo guarda.

Así es como funciona.

  1. Abra el editor de código de Visual Studio.
  2. Haga clic en el icono de engranaje "Configuración" en la esquina inferior izquierda.
  3. Busque "Formatador" y haga clic en la opción "Editor: Formateador predeterminado".
  4. En el menú desplegable, seleccione el formateador de código que desee utilizar.
  5. Desplácese un poco hacia abajo y marque la casilla junto a la opción "Editor: Formatear al guardar".

Puede repetir el proceso para cada formateador de código que esté usando en VS Code.

preguntas frecuentes

¿Por qué no funciona el "Formato al guardar" automático?

Si tiene la opción "Formatear al guardar" en un formateador de VS Code y no funciona correctamente, es probable que se trate de un problema técnico.

Quizás la versión del formateador que tiene está experimentando problemas y necesita verificar si hay una actualización disponible. Sin embargo, es posible que el problema no sea de su parte, y los desarrolladores de VS Code solucionarán la falla.

¿Cómo desactivo el formato automático en VS Code?

Deshabilitar la función de formato automático es muy sencillo. Siga estos pasos para desactivar el formato automático.

1. Abra el editor de código VS y haga clic en el icono "Configuración".

2. Busque "Formatador" y seleccione el formateador para el que desea desactivar el formateo automático.

3. Busque la opción "Editor: Formatear al guardar" y desmarque la casilla junto a ella.

Formato automático de código sin esfuerzo en Visual Studio Code

Uno de los mejores aspectos de usar VS Code es su interfaz bien diseñada, que permite incluso a los principiantes orientarse en el editor.

El formato de código adecuado y continuo es esencial para el código legible, pero estas convenciones pueden ser engorrosas si tiene que hacerlas manualmente.

Pero la buena noticia es que el editor de VS Code tiene numerosos formateadores de código que pueden hacer que sea más fácil y rápido escribir código legible.

Ya sea Prettier, Black o cualquier otra extensión, los usuarios siempre tienen la opción de formatear automáticamente el código en el momento en que guardan el archivo.

¿Qué lenguaje de programación usas y qué formateador funciona mejor? Háganos saber en la sección de comentarios.