Cómo formatear código en VS Code

Foto del autor

En Beez Publicamos una serie de artículos y tutoriales sobre cómo usar Internet, con guías Explicativas.

Al escribir comandos en VS Code, tratar de organizarse a veces puede ser lo último en lo que piensa. Si bien el formateo no es necesario para que se ejecute un programa, ayuda mucho al depurar y tratar de encontrar errores.

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 formatear el código

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

para computadora

Dar formato a todo el documento:

  1. Abra el archivo con el código que desea formatear.
  2. Presione «Mayús + Alt + F».
  3. Guarde los cambios haciendo clic en «Archivo» en la esquina superior izquierda y seleccionando «Guardar» o presionando «Ctrl + S».

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.
  2. Presione «Ctrl + K».
  3. Presiona “Ctrl+F”.
  4. Guarde los cambios seleccionando «Guardar» en el menú Archivo en la esquina superior izquierda o presionando «Ctrl+S».

Tenga en cuenta que si presiona «Ctrl + F» sin presionar primero «Ctrl + K», abrirá el menú Buscar. Si esto sucede, simplemente ciérrelo haciendo clic en el botón «x» o presionando Esc.

Mover filas hacia arriba o hacia abajo:

  1. Mueva el cursor al principio de la línea que desea mover.
  2. Mantenga presionada la tecla Alt.
  3. Para mover la línea hacia arriba, presione la flecha hacia arriba. Para moverlo hacia abajo, presione la flecha hacia abajo.
  4. Guarde su archivo seleccionándolo del menú Archivo en la esquina superior izquierda de la ventana o presionando «Ctrl + S».

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

  1. Mueva el cursor al principio de la línea donde desea cambiar la sangría.
  2. Presione «Ctrl + ]» para aumentar la sangría.
  3. Presione «Ctrl + [“ to decrease the indent.
  4. Save changes by selecting Save from the File menu or by pressing “Ctrl + S”.

For Mac

Format the entire document:

  1. Open the file with the code that you wish to format.
  2. Press “⇧ + ⌥ + F.”
  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”.
  3. Press ⌘ + F”.
  4. Save your file by pressing ⌘ + S” or by choosing “Save” from the File menu on the upper left corner of the window.
LEER  Transmitir Kodi en Google Dongle

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.
  3. To move a line up, press the up arrow. To move it down, press the down arrow.
  4. Save your changes by choosing “Save” from the File menu or by pressing “⌘ + S”.

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 el retroceso.
  3. Presione “⌘ +[“paradisminuirlasangría[“paradisminuirlasangría[“paradiminuirorecuo[“todecreasetheindent
  4. Guarde el archivo presionando «⌘ + S» o eligiendo «Guardar» en el menú Archivo en la esquina superior izquierda de la ventana.

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 para VS Code. Se puede instalar Prettier haciendo lo siguiente:

  1. Abra el código VS.
  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» para Mac.
  3. En la barra de búsqueda en la parte superior del menú, escriba Prettier.
  4. Haga clic en el botón Instalar en la esquina inferior derecha del icono de Prettier.
  5. Espere a que la extensión termine de instalarse.

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

  1. Abra la ventana de configuración presionando «Ctrl +» en PC o «⌘ +» en Mac.
  2. En la barra de búsqueda, escriba formateador. Esto debería mostrar varias configuraciones de formato.
  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 de forma predeterminada, presione la flecha desplegable. Seleccione «Prettier – Formateador de código» de la lista. Alternativamente, Prettier puede aparecer en la lista como “esbenp.prettier-vscode”.
  4. Asegúrese de que la opción «Editor: Formatear al guardar» esté marcada. De lo contrario, cambie la marca de verificación.
  5. Escribe «Prettier» en la barra de búsqueda de configuración.
  6. Desplácese hacia abajo hasta que encuentre la línea «Prettier: Require Config». Asegúrese de que la casilla de verificación esté seleccionada. Esta configuración evita que Prettier formatee documentos sin un archivo de configuración. Esto es útil cuando busca código descargado que podría tener sus propias reglas de formato. Esto evita que se sobrescriban involuntariamente las opciones de formato. Tenga en cuenta que los archivos sin título aún se formatearán automáticamente incluso si esta configuración está marcada.
  7. Puede editar la configuración específica de Prettier según sus preferencias. Cuando termine, puede salir de este menú.
LEER  Una bestia de enrutador, y lo mejor que existe.

Dado que 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.
  2. Haga clic en el botón Nuevo archivo para crear un archivo de configuración.
  3. Nombre este archivo «.prettierrc».
  4. En el archivo, simplemente escriba {}.
  5. Prettier ahora formatea automáticamente su documento cada vez que lo guarda.

Consejos para mantener el código organizado

  1. Aunque la sangría no es necesaria para ejecutar un programa, puede ayudar con 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 de lógica 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 llamarlos módulo 1, módulo 2, etc. Esto hace que sea más fácil saber qué pieza de código realiza una función específica.
  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 organizador

Mantener sus proyectos con el formato adecuado no solo facilita la lectura, sino que también lo ayuda a identificar errores y a mantener su código organizado. Si bien no es necesario para ejecutar un programa, saber cómo formatear sus archivos en VS Code es definitivamente una ventaja.

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

Deja un comentario