[Aprovecha la Terminal] Cómo Usar y Personalizar la Terminal Integrada de VSCode

¡Hola! Soy un creador web que administra los sitios web "buyonjapan.com" y "copicode.com".

Hace solo unos meses, era un completo principiante sin ningún conocimiento de programación. Especialmente, la "pantalla negra" que ves que usan los hackers en las películas, es decir, la "terminal", sinceramente me aterrorizaba. Pensaba: "Da un poco de miedo", "Parece difícil de usar", "Es un mundo del que nunca seré parte...".

Sin embargo, a medida que avanzaba en la creación de sitios web con la ayuda de la IA, me di cuenta de que la terminal era un camino inevitable y que, una vez que te familiarizas con ella, se convierte en el "mejor compañero" que puedas tener.

En este artículo, para los creadores web principiantes que, como yo en el pasado, se sienten intimidados por la terminal, explicaré de la manera más clara posible, desde los conceptos básicos de la "Terminal Integrada" de VSCode hasta los métodos de personalización que cambiarán drásticamente tu entorno de desarrollo con solo copiar y pegar, todo ello compartiendo mis propias experiencias de tropiezos. ¡Mi objetivo es que para cuando termines de leer este artículo, puedas usar la terminal con confianza!

Capítulo 1: ¡No más miedo! Tu primer encuentro con la Terminal Integrada de VSCode

Primero, empecemos por encontrarnos cara a cara con el objeto de nuestro miedo (¿?), la terminal. ¡No te preocupes, no pasará nada solo por abrirla!

3 formas de abrir la terminal

Hay principalmente tres formas de abrir la terminal en VSCode. Intenta la que más te convenga.

1. Abrir desde la barra de menú: Haz clic en Terminal > Nueva terminal en el menú de la parte superior de la pantalla.
2. Abrir con un atajo de teclado: ¡Esta es la forma más genial y eficiente! Definitivamente deberías aprenderla.
   • Común para Windows/Mac: Ctrl + @ (o Ctrl + Shift + `)
3. Desde la barra de estado inferior: Si tienes abiertos paneles como el de Problemas, verás "Terminal" en la lista de pestañas, así que haz clic ahí.

¡Si ves aparecer esa "pantalla negra" en la mitad inferior de la pantalla, lo has conseguido!

(La imagen es de una versión personalizada, pero al principio debería tener un aspecto mucho más simple)

¿Qué es un prompt? - El comienzo del diálogo con la terminal

Cuando abres la terminal, debería aparecer una cadena de texto como C:\Users\TuNombre\Proyecto> o TuNombre@MacBook-Air Proyecto %, con un cursor parpadeando al lado. A esto se le llama prompt.

Este es un mensaje de la terminal que dice: "Actualmente te encuentras en esta ubicación (directorio actual). Por favor, introduce la siguiente orden". A partir de aquí, enviaremos varios "comandos (órdenes)" a la terminal para que el PC trabaje por nosotros.

Capítulo 2: ¡Esto es lo que debes aprender! Colección de comandos esenciales para creadores web

Existen innumerables comandos, pero los que se usan a diario en la creación web son limitados. Aquí, presentaré los comandos esenciales que, si los aprendes, no tendrás problemas por el momento, junto con escenarios de uso concretos.

1. Comprobar la ubicación actual: `pwd`

pwd es la abreviatura de "Print Working Directory" (Imprimir directorio de trabajo), y es un comando para preguntarle al PC: "¿En qué carpeta estoy ahora?". Es lo mismo que comprobar tu ubicación actual cuando te pierdes.

pwd

2. Ver el contenido de una carpeta: `ls`

ls es la abreviatura de "List" (Lista). Muestra una lista de qué archivos y subcarpetas hay en la carpeta (directorio) actual. En la creación web, se usa con frecuencia para comprobar la estructura de los archivos.

ls

※ En el Símbolo del sistema de Windows, dir cumple la misma función, pero si usas Git Bash, como explicaremos más adelante, podrás usar ls también en Windows, lo que resulta muy práctico para operar de la misma forma que un usuario de Mac.

3. Moverse entre carpetas: `cd`

cd es la abreviatura de "Change Directory" (Cambiar de directorio). Es uno de los comandos más importantes para moverse a la carpeta en la que quieres trabajar. Se utiliza en situaciones como "moverse a la carpeta del proyecto para empezar a trabajar".

Por ejemplo, si quieres moverte a una carpeta llamada contact-form, escribirías esto:

cd contact-form

Si quieres volver a la carpeta del nivel superior, usa ...

cd ..

4. Crear una carpeta: `mkdir`

mkdir es la abreviatura de "Make Directory" (Crear directorio). Crea una nueva carpeta (directorio). Por ejemplo, se usa para crear una carpeta images para guardar imágenes o una carpeta css para los archivos CSS.

mkdir images

5. Instalar funciones de JavaScript: `npm install`

En la creación web moderna, es común descargar y utilizar funciones prácticas (paquetes) de Internet. El mecanismo que se utiliza para ello es npm, y npm install es el comando para solicitar "¡quiero esta función (paquete)!".

Por ejemplo, si quieres instalar la famosa librería "Swiper" para implementar sliders, lo escribirías así:

npm install swiper

Este comando fue lo que me hizo pensar por primera vez: "¡La terminal es increíble!". Con solo una línea, puedes usar en tu propio proyecto funciones avanzadas creadas por desarrolladores de todo el mundo. Es literalmente un hechizo mágico.

Capítulo 3: [OK con Copiar y Pegar] ¡No más miedo! Desarrolla la terminal a tu gusto

Una vez que hayas aprendido los comandos básicos, el siguiente paso es la personalización. La terminal por defecto, un tanto impersonal, no está mal, pero con unos pequeños retoques, su aspecto puede volverse increíblemente atractivo, tu motivación aumentará y, lo más importante, tu eficiencia de trabajo mejorará drásticamente.

Aquí, presentaré métodos de personalización prácticos que se completan simplemente editando el archivo de configuración de VSCode, settings.json, sin usar ninguna herramienta complicada.

Paso 1: Abrir el archivo de configuración `settings.json`

Primero, abramos el archivo de configuración de VSCode, settings.json.

1. Pulsa el atajo de teclado Ctrl + Shift + P (o Command + Shift + P en Mac) para abrir la paleta de comandos.
2. En el cuadro de búsqueda, escribe "settings json".
3. Selecciona la opción que aparece: "Preferencias: Abrir configuración (JSON) (Preferences: Open User Settings (JSON))".

Con esto, se abrirá el archivo settings.json que contiene toda la configuración de tu VSCode. Añadiendo código aquí, podrás modificar la configuración de la terminal.

Paso 2: [Recomendado para usuarios de Windows] Cambiar el shell a Git Bash

Los usuarios de Mac pueden saltarse este paso, ya que el zsh por defecto es muy potente. Lo que recomiendo encarecidamente a los usuarios de Windows es cambiar el programa que utiliza la terminal (el shell) del predeterminado PowerShell o Símbolo del sistema a Git Bash.

¿Por qué Git Bash?

• Podrás usar directamente los comandos utilizados en Mac y Linux (ls, pwd, etc.), lo que facilita copiar y pegar comandos de artículos técnicos y tutoriales en la web.
• Viene automáticamente al instalar Git (una herramienta de control de versiones), por lo que su implementación es sencilla.

Si aún no tienes Git para Windows en tu PC, descárgalo e instálalo desde el sitio web oficial "git-scm.com". Una vez completada la instalación, añade el siguiente código al archivo settings.json que acabas de abrir. (Si ya hay algo escrito dentro de {}, añádelo separado por una coma ,).

{
    // Configuración para usar Git Bash como terminal predeterminada en Windows
    "terminal.integrated.defaultProfile.windows": "Git Bash"
}

Reinicia VSCode o abre una nueva terminal, y Git Bash se iniciará.

Paso 3: [Completo con Copiar y Pegar] Personalización para mejorar drásticamente el aspecto y la funcionalidad

¡La espera ha terminado! Finalmente vamos a personalizar el aspecto de la terminal. Copia y pega todo el siguiente código en tu archivo settings.json. He añadido comentarios explicando el significado de cada línea, para que puedas entenderlo mientras eliminas las partes que no necesites o cambias los valores para crear tu propia terminal única.

Sobre la fuente recomendada: La siguiente configuración especifica la fuente de programación Fira Code. Esta fuente muestra combinaciones de ciertos símbolos como => o != como un único símbolo fácil de leer (ligadura), lo que mejora la legibilidad del código. Se recomienda buscar "Fira Code font" e instalar la fuente en tu PC de antemano.

{
    // --- La configuración de la terminal comienza aquí ---

    // Especifica la familia de fuentes a utilizar en la terminal. Se recomienda 'Fira Code'.
    // Si se especifican varias fuentes, se utilizará la siguiente si la primera no está disponible.
    "terminal.integrated.fontFamily": "'Fira Code', Menlo, Monaco, 'Courier New', monospace",

    // Especifica el tamaño de la fuente de la terminal. Ajústalo a tu gusto.
    "terminal.integrated.fontSize": 14,

    // Activa las ligaduras de la fuente. Símbolos como => o != se convertirán en símbolos más legibles.
    "terminal.integrated.fontLigatures": true,

    // Especifica la altura de línea de la terminal. Un valor de 1.5 es fácil de leer.
    "terminal.integrated.lineHeight": 1.5,

    // Especifica el estilo del cursor. 'line' es una línea, 'block' es un bloque, 'underline' es un subrayado.
    "terminal.integrated.cursorStyle": "line",

    // Hace que el cursor parpadee.
    "terminal.integrated.cursorBlinking": true,

    // Comportamiento al hacer clic derecho en la terminal. 'copyPaste' es práctico para copiar y pegar.
    "terminal.integrated.rightClickBehavior": "copyPaste",

    // Desactiva el sonido de campana (alerta) de la terminal.
    "terminal.integrated.enableBell": false,

    // Configuración detallada de colores de la terminal que se sincroniza con los colores de la ventana de VSCode
    "workbench.colorCustomizations": {
        // Color de fondo de la terminal
        "terminal.background": "#1E1E1E",
        // Color del texto de la terminal (primer plano)
        "terminal.foreground": "#D4D4D4",
        // Negro de la terminal
        "terminal.ansiBlack": "#000000",
        // Rojo de la terminal
        "terminal.ansiRed": "#CD3131",
        // Verde de la terminal
        "terminal.ansiGreen": "#0DBC79",
        // Amarillo de la terminal
        "terminal.ansiYellow": "#E5E510",
        // Azul de la terminal
        "terminal.ansiBlue": "#2472C8",
        // Magenta de la terminal
        "terminal.ansiMagenta": "#BC3FBC",
        // Cian de la terminal
        "terminal.ansiCyan": "#11A8CD",
        // Blanco de la terminal
        "terminal.ansiWhite": "#E5E5E5",
        // Negro brillante (gris) de la terminal
        "terminal.ansiBrightBlack": "#666666",
        // Rojo brillante de la terminal
        "terminal.ansiBrightRed": "#F14C4C",
        // Verde brillante de la terminal
        "terminal.ansiBrightGreen": "#23D18B",
        // Amarillo brillante de la terminal
        "terminal.ansiBrightYellow": "#F5F543",
        // Azul brillante de la terminal
        "terminal.ansiBrightBlue": "#3B8EEA",
        // Magenta brillante de la terminal
        "terminal.ansiBrightMagenta": "#D670D6",
        // Cian brillante de la terminal
        "terminal.ansiBrightCyan": "#29B8DB",
        // Blanco brillante de la terminal
        "terminal.ansiBrightWhite": "#E5E5E5"
    }

    // --- La configuración de la terminal termina aquí ---
}

En el momento en que pegues esta configuración y la guardes (Ctrl + S), el aspecto de tu terminal debería cambiar. Si no cambia, intenta cerrar la terminal (haciendo clic en el icono de la papelera) y abrir una nueva.

Capítulo 4: ¡Donde me quedé atascado! Solución de problemas para principiantes

Cuando empieces a usar la terminal, es casi seguro que te encontrarás con errores. Pero no te preocupes, no eres el único. Aquí, compartiré los errores típicos con los que me encontré y que me llevaron horas (¡a veces un día entero!) resolver, junto con sus soluciones.

Caso 1: "'npm' no se reconoce como un comando interno o externo..."

Este error puede ser el primer y mayor obstáculo para los principiantes en la creación web. Intentas ejecutar npm install y te encuentras con este mensaje tan frío... Yo también estuve a punto de rendirme por completo con esto.

Causa: El PATH no está configurado

El 99% de las veces, la causa de este error es que "el PATH (la ruta) no está configurado". Para decirlo de una manera muy simple, el PATH es una "libreta de direcciones que el PC utiliza para buscar comandos".

El comando npm, normalmente, se instala junto con el entorno de programación Node.js en una carpeta específica del PC (por ejemplo, C:\Program Files\nodejs\). Cuando escribes npm en la terminal, el PC consulta esta "libreta de direcciones (PATH)" para ver dónde se encuentra el comando npm. Sin embargo, si por alguna razón la ubicación de npm no está registrada en esta libreta, el PC te devolverá un error diciendo "¡no encuentro ese comando por ninguna parte!".

Solución (para Windows)

1. Primero, comprueba si Node.js está instalado correctamente. Descarga e instala la versión LTS (recomendada) desde el sitio web oficial "nodejs.org". Si durante la instalación aparece una casilla de verificación como "Add to PATH", asegúrate de marcarla.
2. En la barra de búsqueda de Windows, busca "Editar las variables de entorno del sistema" y ábrelo.
3. Haz clic en el botón "Variables de entorno".
4. En la sección "Variables del sistema", busca la variable llamada Path, selecciónala y haz clic en "Editar".
5. En la lista que se abre, comprueba si se incluye una ruta a la carpeta donde instalaste Node.js, como C:\Program Files\nodejs\. Si no está, pulsa el botón "Nuevo" para añadir esta ruta.
6. Cierra todas las ventanas haciendo clic en "Aceptar" y reinicia tu PC (o al menos reinicia completamente VSCode).

El concepto de "configurar el PATH" puede ser realmente difícil de entender al principio. Yo mismo le pregunté a la IA "explícame el PATH como si tuviera 5 años" muchas veces hasta que finalmente llegué a esta imagen de la "libreta de direcciones". Una vez que lo entiendas, podrás aplicar este conocimiento al instalar otras herramientas en el futuro, ¡así que aprovecha para superarlo ahora!

Conclusión: ¡La terminal no da miedo, es tu mejor aliado!

¡Muchas gracias por haber llegado hasta aquí! Los comandos y la personalización que he presentado en este artículo son solo la puerta de entrada al vasto mundo de la terminal. Sin embargo, creo firmemente que el haber dado este primer paso marcará una gran diferencia en tu futuro como creador web.

Al principio, probablemente teclearás mal los comandos o te encontrarás con errores incomprensibles. Pero cada uno de ellos se convertirá en tu experiencia. Con la terminal, obtendrás una velocidad y eficiencia que nunca podrías conseguir con una interfaz gráfica, y sobre todo, la confianza de estar "desarrollando como un profesional".

¡A partir de ahora, utiliza esa terminal que has personalizado hoy como tu "mejor aliado" en la creación de tus proyectos web!