Cómo formatear código en VS Code

Al escribir comandos en VS Code, tratar de ser ordenado a veces puede ser lo último en lo que piensa. Aunque no se requiere formatear para que un programa se ejecute, es de gran ayuda durante la depuración y el intento de localizar errores.

Cómo formatear código en VS Code

En este artículo, le mostraremos cómo formatear código en VS Code junto con otros consejos útiles para mantener su código bien organizado.

Cómo dar formato al código

VS Code tiene comandos integrados para organizar el código escrito actualmente en el formato estándar. Estas teclas de acceso directo no requieren extensiones adicionales y se pueden usar en cualquier momento. Los atajos son los siguientes:

para ordenador

Dar formato a todo el documento:

  1. Abra el archivo con el código que desea formatear.
    1650380209 51 Como formatear codigo en VS Code
  2. Presione "Mayús + Alt + F".
    1650380209 306 Como formatear codigo en VS Code
  3. Guarde los cambios haciendo clic en "Archivo" en la esquina superior izquierda y luego seleccionando "Guardar" o presionando "Ctrl + S".
    1650380209 605 Como formatear codigo en VS Code

Formatear solo el código seleccionado:

  1. En el archivo con las líneas de código que desea formatear, seleccione las líneas resaltándolas con el mouse.
    1650380209 750 Como formatear codigo en VS Code
  2. Presione "Ctrl + K".
    1650380209 326 Como formatear codigo en VS Code
  3. Presione "Ctrl + F".
    1650380209 652 Como formatear codigo en VS Code
  4. Guarde los cambios seleccionando "Guardar" en el menú Archivo en la esquina superior izquierda o presionando "Ctrl + S".
    1650380209 605 Como formatear codigo en VS Code

Tenga en cuenta que si presiona "Ctrl + F" sin presionar primero "Ctrl + K", abrirá el menú Buscar. Si esto sucede, simplemente cierre el botón "x" o presione Esc.

Mover líneas hacia arriba o hacia abajo:

  1. Mueva el cursor al principio de la línea que desea mover.
    1650380209 750 Como formatear codigo en VS Code
  2. Mantenga presionada la tecla Alt.
    1650380209 472 Como formatear codigo en VS Code
  3. Para mover la línea hacia arriba, presione la flecha hacia arriba. Para moverlo hacia abajo, presione la flecha hacia abajo.
    1650380209 831 Como formatear codigo en VS Code
  4. Guarde su archivo seleccionándolo del menú Archivo en la esquina superior izquierda de la ventana o presionando "Ctrl + S".
    1650380209 666 Como formatear codigo en VS Code

Cambiar la sangría de una sola línea:

  1. Mueva el cursor al principio de la línea en la que desea cambiar la sangría.
    1650380209 750 Como formatear codigo en VS Code
  2. Presione "Ctrl + ]" para aumentar la sangría.
    1650380209 896 Como formatear codigo en VS Code
  3. Presione "Ctrl + [“ to decrease the indent.
    1650380209 463 Como formatear codigo en VS Code
  4. Save changes by selecting Save from the File menu or by pressing “Ctrl + S”.
    1650380209 605 Como formatear codigo en VS Code

For Mac

Format the entire document:

  1. Open the file with the code that you wish to format.
  2. Press “⇧ + ⌥ + F.”
    1650380209 49 Como formatear codigo en VS Code
  3. Save your changes by clicking “File” on the upper left then choosing “Save” or pressing “⌘ + S”.

Formatting selected code only:

  1. Highlight the part of the document that you wish to format.
  2. Press “⌘ + K”.
    1650380209 389 Como formatear codigo en VS Code
  3. Press ⌘ + F”.
    1650380209 373 Como formatear codigo en VS Code
  4. Save your file by pressing ⌘ + S” or by choosing “Save” from the File menu on the upper left corner of the window.
    1650380209 578 Como formatear codigo en VS Code

Note that using “⌘ + F” without pressing “⌘ + K” beforehand will only open the Find Menu. To close the Find Menu just press “x” on the right side or press Esc.

Move lines up or down:

  1. Place your cursor at the beginning of the line you want to edit.
  2. Hold down the “⌥” Key.
    1650380209 192 Como formatear codigo en VS Code
  3. To move a line up, press the up arrow. To move it down, press the down arrow.
    1650380209 831 Como formatear codigo en VS Code
  4. Save your changes by choosing “Save” from the File menu or by pressing “⌘ + S”.
    1650380209 578 Como formatear codigo en VS Code

Change indentation of a single line:

  1. Move your cursor to the beginning of the line in which you want to change the indention.
  2. Press “⌘ + ]” para aumentar la sangría.
    1650380209 196 Como formatear codigo en VS Code
  3. Presiona “⌘ +[“paradisminuirlasangría[“todecreasetheindent
    1650380209 136 Como formatear codigo en VS Code
  4. Guarde el archivo presionando "⌘ + S" o seleccionando "Guardar" en el menú Archivo en la esquina superior izquierda de la ventana.
    1650380209 578 Como formatear codigo en VS Code

Código de formato de código VS al guardar

VS Code no tiene un comando nativo que formatee su documento al guardarlo. En cambio, esto se puede hacer instalando una extensión de formato en su aplicación VS Code. La más popular de estas extensiones es Prettier, que proporciona una gran cantidad de funciones de formato a VS Code. Se puede instalar Prettier haciendo lo siguiente:

  1. Abra el código VS.
    1650380209 768 Como formatear codigo en VS Code
  2. Haga clic en el botón Extensiones ubicado en el menú de la izquierda. Este es el icono que parece cuatro cajas. Alternativamente, puede presionar "Ctrl + Shit + x" para PC o "⌘ + ⇧ + x" en Mac.
    1650380209 366 Como formatear codigo en VS Code
  3. En la barra de búsqueda en la parte superior del menú, escribe Prettier.
    1650380210 573 Como formatear codigo en VS Code
  4. Haga clic en el botón Instalar en la esquina inferior derecha del icono de Prettier.
    1650380210 664 Como formatear codigo en VS Code
  5. Espere a que la extensión termine la instalación.
    1650380210 476 Como formatear codigo en VS Code

Antes de que Prettier pueda comenzar a formatear automáticamente su documento al guardarlo, deberá configurar la extensión para activar la función. Esto se hace haciendo lo siguiente:

  1. Abra la ventana de configuración presionando "Ctrl +" en PC o "⌘ +" en Mac.
    1650380210 620 Como formatear codigo en VS Code
  2. En la barra de búsqueda, escriba formateador. Esto debería mostrar varios ajustes de formato.
    1650380210 962 Como formatear codigo en VS Code
  3. En la configuración Editor: Formateador predeterminado, asegúrese de que la extensión seleccionada sea Más bonita. Si no hay un formateador predeterminado o VS Code está usando otro formateador predeterminado, presione la flecha desplegable. Seleccione "Prettier - Formateador de código" de la lista. Alternativamente, Prettier puede aparecer en la lista como "esbenp.prettier-vscode".
    1650380210 377 Como formatear codigo en VS Code
  4. Asegúrese de que la opción "Editor: Formatear al guardar" esté marcada. Si no, cambie la marca de verificación.
    1650380210 488 Como formatear codigo en VS Code
  5. Escriba "Prettier" en la barra de búsqueda de configuración.
    1650380210 990 Como formatear codigo en VS Code
  6. Desplácese hacia abajo hasta que encuentre la línea "Prettier: Require Config". Asegúrese de que la casilla de verificación esté marcada. Esta configuración evita que Prettier formatee documentos sin un archivo de configuración. Esto es útil cuando busca código descargado que puede tener sus propias reglas de formato. Esto evita que sobrescriba las opciones de formato sin querer. Tenga en cuenta que los archivos sin título aún se formatearán automáticamente incluso si esta configuración está marcada.
    1650380210 24 Como formatear codigo en VS Code
  7. Puede editar configuraciones específicas de Prettier según sus preferencias. Una vez que haya terminado, puede salir de este menú.

Como configuró Prettier para formatear automáticamente solo cuando hay un archivo de configuración, debe crear uno para cada proyecto. Esto se hace siguiendo estos pasos:

  1. Seleccione la raíz de su proyecto en el menú de la izquierda.
    1650380209 51 Como formatear codigo en VS Code
  2. Haga clic en el botón de nuevo archivo para crear un archivo de configuración.
    1650380210 429 Como formatear codigo en VS Code
  3. Nombre este archivo ".prettierrc".
    1650380210 503 Como formatear codigo en VS Code
  4. En el archivo, simplemente ingrese {}.
    1650380210 648 Como formatear codigo en VS Code
  5. Prettier ahora formateará automáticamente su documento cada vez que lo guarde.

Consejos para mantener el código organizado

  1. Aunque la sangría no es necesaria para que se ejecute un programa, puede ayudar a la depuración al compartimentar el código en módulos manejables. Las declaraciones If-Then o los casos anidados, por ejemplo, pueden beneficiarse de esto al hacer que cada opción alternativa se distinga visualmente entre sí. Esto es útil cuando se trata de errores lógicos en lugar de errores de sintaxis.
  2. Si está nombrando módulos o líneas cortas de código, acostúmbrese a usar títulos descriptivos en lugar de simplemente llamarlo módulo 1, módulo 2, etc. Esto hace que sea más fácil saber qué parte del código hace una función particular.
  3. Siempre es una buena idea usar los comentarios a tu favor. Ya sea que esté incluyendo una descripción rápida o simplemente agregando una nota para usted, los comentarios son de gran ayuda durante la depuración.

Código de organización

Mantener sus proyectos correctamente formateados no solo facilita la lectura, sino que también ayuda a identificar errores y mantiene su código organizado. Aunque no es necesario para que un programa se ejecute, saber cómo formatear sus archivos en VS Code es una ventaja definitiva.

¿Conoce otras formas de formatear sus archivos en VS Code? Siéntase libre de compartir sus pensamientos en la sección de comentarios a continuación.