Domina el arte de dar estilo al código en VS Code Soluciones.link

Al escribir comandos en VS Code, a veces puede resultar difícil mantenerse organizado. Aunque el formateo no es esencial para ejecutar un programa, ayuda mucho en la depuración y la búsqueda de errores.

En este artículo, te mostraré cómo formatear código en VS Code, junto con otros consejos útiles para mantener tu código bien organizado.

Formateando el código

VS Code tiene comandos integrados para formatear el código actual en el formato estándar. Estos atajos no requieren extensiones adicionales y se pueden utilizar en cualquier momento. A continuación, te muestro los atajos:

Para computadoras

Formatear todo el documento:

1. Abre el archivo con el código que deseas formatear.
2. Presiona “Mayús + Alt + F”.
3. Guarda 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 deseas formatear, selecciona las líneas resaltándolas con el ratón.
2. Presiona “Ctrl + K”.
3. Presiona “Ctrl + F”.
4. Guarda los cambios seleccionando “Guardar” en el menú Archivo en la esquina superior izquierda o presionando “Ctrl + S”.

Ten en cuenta que si presionas “Ctrl + F” sin presionar primero “Ctrl + K”, se abrirá el menú de búsqueda. Si esto sucede, simplemente ciérralo haciendo clic en el botón “x” o presionando Esc.

Mover filas hacia arriba o hacia abajo:

1. Mueve el cursor al principio de la línea que deseas mover.
2. Mantén pulsada la tecla Alt.
3. Para mover la línea hacia arriba, pulsa la flecha hacia arriba. Para moverla hacia abajo, pulsa la flecha hacia abajo.
4. Guarda los cambios seleccionando “Guardar” en el menú Archivo en la esquina superior izquierda o presionando “Ctrl + S”.

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

1. Mueve el cursor al principio de la línea donde deseas cambiar la sangría.
2. Presiona “Ctrl + ]” para aumentar la sangría.
3. Presiona “Ctrl + [” para disminuir la sangría.
4. Guarda los cambios seleccionando “Guardar” en el menú Archivo en la esquina superior izquierda o presionando “Ctrl + S”.

Para Mac

Formatear todo el documento:

1. Abre el archivo con el código que deseas formatear.
2. Presiona “? + ? + F”.
3. Guarda los cambios haciendo clic en “Archivo” en la esquina superior izquierda y seleccionando “Guardar” o presionando “? + S”.

Formatear solo el código seleccionado:

1. Selecciona las líneas de código que deseas formatear.
2. Presiona “? + K”.
3. Presiona “? + F”.
4. Guarda los cambios presionando “? + S” o seleccionando “Guardar” en el menú Archivo en la esquina superior izquierda de la ventana.

Ten en cuenta que si presionas “? + F” sin presionar antes “? + K”, solo se abrirá el menú de búsqueda. Para cerrar el menú de búsqueda, simplemente haz clic en el botón “x” o presiona Esc.

Mover líneas hacia arriba o hacia abajo:

1. Coloca el cursor al principio de la línea que deseas mover.
2. Mantén pulsada la tecla “?”.
3. Para mover la línea hacia arriba, presiona la flecha hacia arriba. Para moverla hacia abajo, presiona la flecha hacia abajo.
4. Guarda los cambios seleccionando “Guardar” en el menú Archivo en la esquina superior izquierda o presionando “? + S”.

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

1. Mueve el cursor al principio de la línea donde deseas cambiar la sangría.
2. Presiona “? + ]” para aumentar la sangría.
3. Presiona “? + [” para disminuir la sangría.
4. Guarda los cambios seleccionando “Guardar” en el menú Archivo en la esquina superior izquierda o presionando “? + S”.

Formateo automático del código en VS Code al guardar

VS Code no tiene un comando nativo para formatear automáticamente tu documento al guardarlo. Sin embargo, puedes hacerlo instalando una extensión de formato en tu aplicación de VS Code. La extensión más popular para esto es Prettier, la cual proporciona una variedad de funciones de formato para VS Code. Puedes instalar Prettier siguiendo estos pasos:

1. Abre VS Code.
2. Haz clic en el botón Extensiones en el menú de la izquierda. Alternativamente, puedes presionar “Ctrl + Shit + x” en PC o “? + ? + x” en Mac.
3. En la barra de búsqueda en la parte superior del menú, escribe “Prettier”.
4. Haz clic en el botón “Instalar” en la esquina inferior derecha del icono de Prettier.
5. Espera a que se complete la instalación de la extensión.

Una vez que hayas instalado Prettier, necesitarás configurar la extensión para habilitar la función de formateo automático al guardar. Sigue estos pasos:

1. Abre la ventana de configuración presionando “Ctrl +” en PC o “? +” en Mac.
2. En la barra de búsqueda, escribe “formateador”. Deberías ver varios ajustes relacionados con el formateo.
3. En la configuración del editor predeterminado del formateador, asegúrate de que la extensión seleccionada sea Prettier. Si no hay un formateador predeterminado o VS Code está utilizando otro formateador por defecto, selecciona “Prettier – Formateador de código” de la lista. Alternativamente, Prettier puede aparecer en la lista como “esbenp.prettier-vscode”.
4. Asegúrate de que “Editor: Formatear al guardar” esté marcado. Si no lo está, cambia la casilla de verificación.
5. Escribe “Prettier” en la barra de búsqueda de configuración.
6. Desplázate hacia abajo hasta la opción “Prettier: Require Config” y asegúrate de que la casilla esté seleccionada. Esta configuración evitará que Prettier formatee documentos que no tengan un archivo de configuración. Es útil cuando trabajas con código descargado que tiene sus propias reglas de formato, ya que evita que anules accidentalmente las opciones de formato. Ten en cuenta que los archivos sin título serán formateados automáticamente incluso si esta configuración está marcada.
7. Puedes editar las configuraciones específicas de Prettier según tus preferencias. Una vez que hayas terminado, puedes cerrar este menú.

Como has configurado Prettier para formatear automáticamente solo cuando haya un archivo de configuración, debes crear uno para cada proyecto. Sigue estos pasos:

1. Selecciona la raíz de tu proyecto en el menú de la izquierda.
2. Haz clic en el botón “Nuevo archivo” para crear un archivo de configuración.
3. Nombra el archivo “.prettierrc”.
4. Escribe simplemente {} en el archivo.
5. Ahora, Prettier formateará automáticamente tu documento cada vez que lo guardes.

Consejos para mantener tu código organizado

1. Aunque la sangría no es esencial para ejecutar un programa, es útil para dividir visualmente el código en módulos manejables. Por ejemplo, las declaraciones If-Then o los casos anidados pueden beneficiarse del uso de sangría para distinguir cada opción de forma visual. Esto ayuda a detectar errores lógicos en lugar de errores de sintaxis.
2. Cuando des nombres a módulos o líneas de código cortas, acostúmbrate a usar nombres descriptivos en lugar de simplemente llamarlos “módulo 1”, “módulo 2”, etc. Esto facilita saber qué función realiza cada pieza de código.
3. Siempre es una buena idea usar comentarios a tu favor. Ya sea que incluyas una descripción breve o simplemente agregues una nota para ti mismo, los comentarios son muy útiles durante la depuración.

Conclusión

Mantener tus proyectos con el formato correcto no solo los hace más legibles, sino que también te ayuda a detectar errores y mantener el código organizado. Aunque no es esencial para ejecutar un programa, saber cómo formatear tus archivos en VS Code es definitivamente una ventaja.

¿Conoces otras formas de formatear tus archivos en VS Code? No dudes en compartir tus pensamientos en la sección de comentarios a continuación.