¿Cómo indentar en Visual Studio Code? Guía paso a paso para lograrlo

Para indentar en Visual Studio Code debes usar el atajo de teclado Shift + Alt + F. Así formatearás automáticamente todo el código en el archivo, lo cual es muy útil si estás trabajando con código desordenado.

A mí me costaba mantener un formato consistente en mis proyectos. Pero con el tiempo descubrí que usar las configuraciones de indentación automática, los atajos de teclado y las extensiones adecuadas no solo mejora la legibilidad, sino que también optimiza el flujo de trabajo.

En este artículo, te explicaré cómo indentar en Visual Studio Code y qué herramientas puedes usar para hacerlo de forma más rápida.

Cómo indentar en Visual Studio Code

Indentar en Visual Studio Code es fácil, pero requiere un poco de configuración para que sea más eficiente.

Aquí te detallo los pasos que uso para organizar mi código en Visual Studio Code y asegurarme de que todo siga un formato coherente.

Paso 1: Usar el atajo de teclado para indentación automática

Una de las formas más fáciles de indentar en Visual Studio Code es utilizando atajos de teclado. De forma predeterminada, VS Code permite que puedas indentar en Visual Studio Code automáticamente con solo presionar una combinación de teclas.

Para indentar tu código, solo tienes que seleccionar el bloque de código que deseas organizar y presionar:

• Windows/Linux: Shift + Alt + F
• Mac: Shift + Option + F

Código desordenado:

function calculateSum(a,b){let sum=a+b;return sum}

Código organizado después de usar el atajo:

function calculateSum(a, b) {
    let sum = a + b;
    return sum;
}

Este atajo no solo mejora la legibilidad del código, sino que también asegura que todo siga un estilo coherente.

Paso 2: Configurar las preferencias de indentación

Si deseas personalizar cómo indentar en Visual Studio Code, puedes modificar las configuraciones de indentación según tus preferencias.

Aquí te explico cómo hacerlo:

1. Abre el archivo settings.json en Visual Studio Code.
2. Añade las siguientes configuraciones de indentación:

"editor.tabSize": 4,
"editor.insertSpaces": true

Con estas configuraciones, se usarán 4 espacios por cada nivel de indentación y no se utilizará una tabulación tradicional, sino espacios, que es la convención más común en muchos proyectos de desarrollo.

Código antes de configurar la indentación:

def my_function():
  if True:
    print("Hello")

Código después de configurar la indentación:

def my_function():
    if True:
        print("Hello")

Paso 3: Utilizar extensiones para formateo automático

Si trabajas con múltiples lenguajes y necesitas que el formateo sea automático y consistente, hay extensiones como Prettier que pueden ayudarte a indentar en Visual Studio Code de manera uniforme en todos tus proyectos.

Para instalar Prettier en Visual Studio Code:

1. Ve a la vista de extensiones (Ctrl + Shift + X).
2. Busca Prettier – Code formatter e instálalo.
3. Configura Prettier para que se ejecute automáticamente cada vez que guardes un archivo:

"editor.formatOnSave": true

Esto garantiza que siempre que guardes tu código, se formatee automáticamente según las reglas predefinidas de Prettier.

Paso 4: Refactorización del código para mejorar la organización

En ocasiones, es necesario hacer más que simplemente indentar en Visual Studio Code.

Puedes refactorizar tu código utilizando las herramientas de refactorización integradas en el editor. Esto incluye la posibilidad de renombrar variables, mover funciones o dividir bloques de código grandes en funciones más pequeñas.

Código antes de la refactorización:

function calculateTotal(price, taxRate) {
    let total = price + price * taxRate;
    return total;
}

Código después de la refactorización:

function calculateTax(price, taxRate) {
    return price * taxRate;
}

function calculateTotal(price, taxRate) {
    let tax = calculateTax(price, taxRate);
    let total = price + tax;
    return total;
}

Este enfoque no solo organiza el código visualmente, sino que también mejora la mantenibilidad y la reutilización del código.

Ventajas de saber indentar en Visual Studio Code

Indentar en Visual Studio Code correctamente tiene múltiples ventajas que mejoran tanto la calidad del código como la productividad del desarrollador.

1. Mejora la legibilidad del código

El código bien indentado es más fácil de leer y entender. Ya sea para ti o para otros desarrolladores que trabajen en el mismo proyecto, una estructura organizada permite que cualquiera pueda seguir el flujo de ejecución sin tener que adivinar qué está pasando.

2. Facilita el trabajo en equipo

Cuando trabajas en equipo, tener un estilo de indentación consistente es crucial para evitar conflictos al fusionar ramas. Además, el código ordenado facilita las revisiones de código y mejora la colaboración entre los miembros del equipo.

3. Mejora la depuración y mantenimiento

Al tener un código bien organizado, puedes detectar errores más rápidamente y realizar cambios o mejoras sin tener que preocuparte por desordenar el flujo de trabajo.

Una estructura clara también hace que sea más fácil modificar o actualizar secciones específicas del código sin afectar otras partes del sistema.

4. Aumenta la productividad

El uso de atajos de teclado, configuraciones personalizadas y herramientas como Prettier puede acelerar enormemente tu flujo de trabajo.

No perderás tiempo reorganizando manualmente el código, lo que te permitirá concentrarte en tareas más importantes como la implementación de nuevas funcionalidades.

Domina Visual Studio Code y aprende a trabajar con código limpio y bien organizado en el Bootcamp de Desarrollo Web de KeepCoding. En este curso, aprenderás desde los fundamentos hasta las técnicas avanzadas de desarrollo web, incluyendo cómo optimizar tu flujo de trabajo y escribir código eficiente. ¡Únete ahora y empieza a mejorar tu carrera como desarrollador web!