【Extensiones recomendadas】10 extensiones populares para aumentar tu productividad en VSCode

¡Hola! Soy alguien que, sin saber nada de programación, creó un sitio web de forma autodidacta con la ayuda de la IA. Fui un completo principiante, igual que tú.

¿Acabas de instalar VSCode (Visual Studio Code) con toda la motivación del mundo diciendo "¡Voy a ponerme a programar!", pero ahora no sabes qué hacer y te has quedado paralizado? ¿O quizás te preguntas "¿cómo podría programar de forma más eficiente?"?

Entiendo perfectamente ese sentimiento. A mí me pasó lo mismo al principio. Me quedaba mirando la pantalla en negro, completamente perdido. Pero el verdadero potencial de VSCode se desata al añadir "extensiones". Al instalarlas, tu eficiencia de desarrollo mejorará drásticamente y programar será mucho más divertido.

En este artículo, he seleccionado cuidadosamente solo 10 extensiones que, mientras creaba mi sitio web, me hicieron pensar de corazón: "¡no podría trabajar sin esto!". No hay nada complicado. Simplemente sigue los pasos de este artículo, copia y pega, y tu VSCode se transformará en la herramienta de desarrollo definitiva. ¡Experimentemos juntos cómo todo "funciona" y disfrutemos de la sensación de una productividad disparada!

1. Spanish Language Pack - Empieza con la comodidad de tu propio idioma

Captura de pantalla de la interfaz de VSCode traducida al español

Recomendado para:

Personas que sienten rechazo o se sienten intimidadas por los menús en inglés.
Quienes quieren entender las opciones de configuración de forma intuitiva en su idioma nativo.

【Mi experiencia】Tenía alergia al inglés

Mi primer obstáculo al empezar a programar no fue la jerga técnica, sino el hecho de que "todo estaba en inglés". Podía entender más o menos File, Edit, Selection..., pero mi cerebro se bloqueaba al intentar hacer configuraciones complejas. Me daba miedo tocar nada, pensando "¿y si hago clic en el lugar equivocado?". Esta extensión fue mi salvación, la que primero alivió mi ansiedad. El simple hecho de tener los menús en español redujo enormemente la barrera mental y me hizo pensar: "quizás pueda hacerme amigo de VSCode".

Uso básico

Haz clic en el icono de los cuadrados (vista de Extensiones) en el lado izquierdo de VSCode.
En la barra de búsqueda, escribe "Spanish Language Pack".
Haz clic en el botón "Install" de la primera extensión que aparece.
Después de la instalación, haz clic en el botón "Change Language and Restart" que aparece abajo a la derecha para reiniciar VSCode.

Con solo esto, toda la interfaz de VSCode cambiará al español. ¿Fácil, verdad? Empecemos por aquí para familiarizarnos con VSCode.

2. Live Server - La increíble experiencia de ver tu código funcionar al instante

Recomendado para:

Quienes están cansados de recargar manualmente el navegador cada vez que modifican HTML o CSS.
Personas que quieren ver los cambios visuales de su código en tiempo real.

【Mi experiencia】Liberación de los días de machacar la tecla F5

Cuando empecé a aprender HTML, cada vez que cambiaba un simple encabezado, tenía que guardar el archivo con Ctrl+S, cambiar al navegador y pulsar F5 para actualizar. Repetía este proceso una y otra vez. Era una tarea tan monótona... Cuando le lloré a una IA "¿no hay una forma más fácil?", lo primero que me recomendó fue Live Server. El momento en que guardé el código y vi que el navegador se actualizaba solo al instante, pensé seriamente: "¡esto es magia!". Esta experiencia de que "simplemente funcione" disparó mi motivación para aprender a programar.

【Copia y pega para probarlo】Prueba un poco de esta magia

Primero, crea un nuevo archivo en VSCode y guárdalo como index.html. Luego, copia y pega el siguiente código.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Prueba de Live Server</title>
    <style>
        body {
            display: grid;
            place-content: center;
            height: 100vh;
            margin: 0;
            font-family: sans-serif;
            background-color: #2d2d2d;
            color: #ffffff;
        }
        h1 {
            color: #669df6;
            font-size: 3rem;
        }
    </style>
</head>
<body>
    <h1>¡Hola, mundo!</h1>
</body>
</html>

Una vez pegado el código, haz clic derecho en el editor y selecciona "Open with Live Server", o haz clic en el botón "Go Live" en la esquina inferior derecha. El navegador se abrirá automáticamente mostrando "¡Hola, mundo!".

Ahora, vuelve a VSCode, cambia el texto dentro de la etiqueta <h1> por algo como "¡Live Server es genial!" y guarda el archivo (Ctrl+S). Deberías ver cómo el texto en el navegador cambia al instante sin que tengas que hacer nada. ¡Ese es el poder de Live Server!

Un punto a tener en cuenta

Live Server funciona cuando tienes un archivo HTML abierto. Ten en cuenta que no puede ejecutar programas del lado del servidor como PHP.

3. Prettier - Code formatter - Código hermoso sin importar quién lo escriba

Recomendado para:

Personas cuyo código se vuelve difícil de leer por culpa de sangrías o espaciados inconsistentes.
Quienes no quieren perder tiempo arreglando manualmente el aspecto de su código.

【Mi experiencia】El desgaste por la "apariencia" del código

Cuando empecé a programar, mi sangría era un desastre, se me olvidaban los puntos y coma ; al final de las líneas... en resumen, mi código era feo y muy difícil de releer. Veía el código limpio de otras personas y me desanimaba, pensando "¿cómo pueden escribir de forma tan ordenada?". Prettier fue como un cirujano estético que me salvó. Es impresionante ver cómo, al guardar el archivo, un código desastroso se transforma en uno hermoso en un instante. Me liberé del estrés de preocuparme por la apariencia del código y pude concentrarme en la lógica.

【Copia y pega para probarlo】La emoción de un código limpio al instante

Primero, instala Prettier. Luego, abre la configuración de VSCode (Ctrl + ,), busca "Format On Save" y marca la casilla. Esto hará que el código se formatee automáticamente cada vez que guardes.

Ahora, probemos. Crea un nuevo archivo llamado script.js y pega el siguiente código, escrito desordenadamente a propósito.

function  saludar( nombre  ) {
console.log('¡Hola, '   + nombre + '!')
        }
saludar( "Mundo" )

Ahora, guarda el archivo (Ctrl+S). Debería transformarse instantáneamente en este código limpio:

function saludar(nombre) {
  console.log("¡Hola, " + nombre + "!");
}
saludar("Mundo");

Prettier se encarga de todas las reglas pequeñas como la sangría, los espacios y los puntos y coma. Ya no tienes que preocuparte por el aspecto de tu código.

4. Auto Rename Tag - Adiós a las etiquetas sin cerrar

Recomendado para:

Quienes alguna vez han modificado una etiqueta de apertura en HTML, pero han olvidado cambiar la de cierre, rompiendo el diseño.
Personas que quieren reducir el tiempo que dedican a correcciones sencillas.

【Mi experiencia】El viaje en busca de la etiqueta de cierre

A medida que la estructura de un sitio web se complica, encontrar la etiqueta de cierre correcta, que puede estar decenas de líneas más abajo, se convierte en una pesadilla. "¿Dónde demonios está el cierre de este <div>?", me preguntaba mientras hacía scroll sin parar, para luego darme cuenta de que había encontrado la etiqueta equivocada. Casi lloro cuando cambié un <h2> por un <h3>, olvidé la etiqueta de cierre y vi cómo todo mi diseño se venía abajo. Auto Rename Tag es el compañero perfecto que previene estos errores tan simples pero a la vez tan críticos.

【Copia y pega para probarlo】Cambio automático en pareja

Esta extensión se activa con solo instalarla. No necesita ninguna configuración especial. Abre un archivo como index.html y prueba el siguiente código.

<div>
    <p>Aquí hay mucho contenido.</p>
    <p>Aquí hay mucho contenido.</p>
    <p>Aquí hay mucho contenido.</p>
</div>

Una vez pegado el código, sitúa el cursor sobre la etiqueta de apertura <div> y cambia "div" por "section". Verás cómo la etiqueta de cierre </div>, aunque esté lejos, cambia automáticamente a </section>. Esta pequeña automatización reduce enormemente el estrés del desarrollo.

5. HTML CSS Support - Evita errores al escribir nombres de clases CSS

Recomendado para:

Personas que no recuerdan o suelen equivocarse al escribir en HTML los nombres de las clases que crearon en CSS.
Quienes quieren reducir el tiempo que pasan cambiando entre los archivos HTML y CSS.

【Mi experiencia】"¿Por qué no funciona mi CSS?"... La culpa siempre era de un error tipográfico

Creaba un nombre de clase genial y largo como .main-contents-wrapper en style.css, pero al ir a usarlo en index.html, mi memoria fallaba al instante. "¿Era contents o content? ¿Dónde iba el guion?". Al final, tenía que volver al archivo CSS para comprobarlo, y estaba harto de ese ir y venir. El 90% de las veces que mi CSS no se aplicaba era por un error de este tipo. HTML CSS Support sugiere candidatos de tu archivo CSS mientras empiezas a escribir en HTML, por lo que ya no necesitas memorizar los nombres de las clases ni ir a buscarlos.

【Copia y pega para probarlo】Autocompletado preciso de clases

Primero, crea dos archivos en tu carpeta de proyecto: index.html y style.css.

En style.css, copia y pega el siguiente código.

.container {
    width: 80%;
    margin: 0 auto;
}

.title-text {
    color: #669df6;
    font-size: 24px;
    border-bottom: 2px solid #5f6368;
}

.description-paragraph {
    line-height: 1.6;
}

A continuación, en index.html, pega el siguiente código. De momento, las etiquetas no tienen el atributo class.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Prueba de Soporte CSS</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="">
        <h1 class="">Título de prueba</h1>
        <p class="">Este es un párrafo de prueba.</p>
    </div>
</body>
</html>

Ahora, ¡a probar! Sitúa el cursor entre las comillas de <div class=""> y pulsa Ctrl + Espacio (o simplemente empieza a escribir una letra como c o t). Deberían aparecer sugerencias como .container, .title-text, y .description-paragraph. ¡Nunca más te equivocarás al escribir un nombre de clase!

6. Path Intellisense - Libérate de la pesadilla de las rutas de archivo

Recomendado para:

Quienes suelen equivocarse al especificar la ruta a imágenes, archivos CSS o JavaScript.
Personas a las que se les da mal calcular rutas relativas como ../.

【Mi experiencia】El infierno de las imágenes que no aparecen

"¡Venga, voy a poner una imagen en la web!", pensaba. Escribía <img src=""> y ahí empezaba el infierno. Dentro de src, ¿la ruta era "./images/hero.png", "../images/hero.png" o quizás "/images/hero.png"? Probaba una y otra vez, miraba el navegador, veía el icono de imagen rota y suspiraba. Esta extensión predice y autocompleta de forma inteligente los nombres de carpetas y archivos mientras escribes. El tiempo que perdía por errores en las rutas se redujo a cero.

【Copia y pega para probarlo】Introducción de rutas sin dudas

Esta extensión también funciona nada más instalarla. Intenta crear la siguiente estructura de carpetas en tu proyecto.

mi-proyecto/
├── index.html
├── css/
│   └── style.css
└── images/
    └── logo.png

Abre el archivo index.html y pega el siguiente código.

<!DOCTYPE html>
<html lang="es">
<head>
    <title>Prueba de Rutas</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <img src="" alt="Imagen del logo">
</body>
</html>

Primero, coloca el cursor dentro de href="" en la etiqueta <link> y escribe "c". La sugerencia "css/" debería aparecer de inmediato. Selecciónala y, al escribir /, te sugerirá "style.css".

A continuación, haz lo mismo dentro de src="" en la etiqueta <img>. Si escribes "i", te sugerirá "images/", permitiéndote introducir la ruta correcta fácilmente.

7. indent-rainbow - Visualiza la anidación del código con un arcoíris

Recomendado para:

Personas que se pierden cuando anidan demasiados divs y ya no entienden la estructura.
Quienes quieren encontrar rápidamente y de forma visual dónde hay un error de sangría.

【Mi experiencia】Perdido en la sangría

Al escribir HTML y CSS, es inevitable que el código se anide profundamente. La sangría era mi única guía, sobre todo cuando no sabía dónde poner una etiqueta de cierre. Pero si todo es del mismo color, es increíblemente difícil distinguir qué bloque pertenece a qué. indent-rainbow colorea la sangría según la profundidad, haciendo que la estructura del código sea evidente a simple vista. Poder confirmar visualmente que "esta línea morada corresponde a este bloque" me ayudó a detectar errores de cierre de etiquetas y de sangría al instante.

【Copia y pega para probarlo】Sangría colorida

Esta extensión funciona con solo instalarla. Pega el siguiente código HTML con una estructura compleja en VSCode. Verás que la diferencia visual con y sin indent-rainbow es abismal.

<div class="container">
    <header>
        <nav>
            <ul>
                <li><a href="#">Inicio</a></li>
                <li><a href="#">Productos</a>
                    <ul>
                        <li><a href="#">Producto A</a></li>
                        <li><a href="#">Producto B</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <p>Contenido</p>
        </section>
    </main>
</div>

Tras la instalación, la zona de la sangría en tu editor se llenará de colores como rojo, amarillo, azul y violeta, permitiéndote entender de forma intuitiva qué bloques están en el mismo nivel jerárquico.

8. vscode-icons - Identifica los tipos de archivo de un vistazo

Recomendado para:

Quienes no pueden saber qué tipo de archivo es solo por el nombre.
Personas que quieren que su explorador de archivos sea más visual y agradable.

【Mi experiencia】El pequeño estrés de buscar archivos

A medida que un proyecto crece, la lista de archivos se llena de texto: index.html, style.css, script.js, package.json, README.md... Era un pequeño pero constante estrés tener que buscar con la vista el archivo que necesitaba, pensando "¿dónde estaba ese archivo de JavaScript?". Al instalar esta extensión, aparecieron iconos coloridos e intuitivos junto a los nombres. Gracias a iconos específicos como <> para HTML, # para CSS o JS para JavaScript, pude reconocer el tipo de archivo al instante por su "color" y "forma", reduciendo drásticamente el tiempo de búsqueda.

Uso básico

Instala la extensión.
Tras la instalación, si aparece un cuadro de diálogo, selecciona "VSCode Icons" para activar el tema de iconos.
Si no aparece, abre la Paleta de Comandos con Ctrl + Shift + P, escribe "File Icon Theme", selecciónalo y elige VSCode Icons.

Y eso es todo. Los iconos de los archivos en la barra lateral del explorador se volverán más ricos y fáciles de leer. Es una extensión genial que hace que el desarrollo diario sea un poco más divertido.

9. Code Spell Checker - Acaba con los vergonzosos errores ortográficos

Recomendado para:

Personas que no están seguras de cómo se escriben las palabras en inglés en nombres de variables, funciones o comentarios.
Quienes quieren prevenir esos bugs tan difíciles de encontrar y vergonzosos causados por un error ortográfico.

【Mi experiencia】La causa del error era, increíblemente, una falta de ortografía

Como el inglés no es mi lengua materna, a menudo cometía errores de ortografía en los nombres de las variables. Por ejemplo, una vez escribí "mesage" en lugar de "message" y me pasé más de una hora preguntándome "por qué no funciona...". Esta extensión, al igual que Word, subraya las palabras mal escritas con una línea ondulada azul. Esa hora de agonía se habría resuelto en un segundo si la hubiera tenido instalada desde el principio. Es una extensión imprescindible, sobre todo cuando escribes código que otros verán o cuando trabajas en equipo, ya que los errores ortográficos pueden afectar a tu credibilidad.

【Copia y pega para probarlo】Detecta errores al instante

El corrector ortográfico para inglés se activa con solo instalarlo. Abre un archivo JavaScript (como script.js) y pega el siguiente código.

// Esta es una funcoin para mostrar un mensage.
function showMesage(text) {
    const defaultMessage = "Hellow World!"; // "Hellow" es un error tipográfico.
    console.log(text || defaultMessage);
}

// Lamando a la funcoin.
showMesage("Correct spelling is important.");

Al pegar el código, deberías ver inmediatamente líneas onduladas azules bajo las palabras mal escritas como funcoin, mesage, Hellow y Lamando. Si pasas el cursor sobre la línea, te sugerirá la ortografía correcta. ¡Adiós a los errores vergonzosos!

10. GitLens — Git supercharged - Echa un vistazo al "pasado" de tu código

Recomendado para:

Cualquiera que alguna vez se haya preguntado: "¿quién escribió este código, cuándo y por qué?".
Personas que usan o van a empezar a usar Git.
Quienes quieren usar su propio código antiguo como referencia para crear nuevas funcionalidades.

【Mi experiencia】Una máquina del tiempo para ayudar a mi yo del futuro

A menudo, después de añadir una funcionalidad, la miraba un mes después y no tenía ni idea de por qué había escrito el código de esa manera. Podía rastrearlo en el historial de commits de Git, pero hacerlo desde la terminal era un poco engorroso. Con GitLens, simplemente colocando el cursor sobre cualquier línea de código, aparece de forma atenuada quién hizo el commit, cuándo y con qué mensaje. Es como una máquina del tiempo. Puedo recordar al instante: "Ah, claro, hace un mes añadí esta línea por este motivo". Es un poderoso aliado que ayuda a tu yo del futuro en innumerables situaciones, ya sea buscando la causa de un bug o eliminando código antiguo con confianza.

Uso básico

Esta extensión requiere que tu proyecto esté gestionado con Git. Si nunca has usado Git, te recomiendo que primero aprendas lo básico con recursos como el sitio web oficial de Git.

Cuando abres un proyecto gestionado con Git en VSCode, GitLens se activa automáticamente.

Coloca el cursor sobre cualquier línea de código. La información del commit que modificó esa línea por última vez (autor, fecha, mensaje del commit) aparecerá de forma atenuada al final de la línea.
Si haces clic en esa información, podrás ver los detalles del cambio.
También se añade un icono de GitLens a la barra lateral, que te permite explorar el historial del repositorio, comparar ramas y mucho más de forma visual.

Puede parecer un poco avanzado para principiantes, but en cuanto empieces a usar Git, te darás cuenta de lo valiosa que es esta extensión. Tenla en mente como un siguiente paso en tu aprendizaje.

Conclusión: Las extensiones son tus mejores aliadas

Hoy he presentado 10 extensiones que he usado desde que era un principiante en la programación y de las que ahora no puedo prescindir.

Paquetes de idiomas: Empieza por sentirte cómodo
Live Server: Haz que el desarrollo sea divertido con actualizaciones en tiempo real
Prettier: Formatea tu código automáticamente para que quede hermoso
Auto Rename Tag: Evita errores con las etiquetas
HTML CSS Support: Introduce nombres de clases CSS sin esfuerzo
Path Intellisense: Escribe rutas de archivo sin errores
indent-rainbow: Visualiza la estructura de tu código
vscode-icons: Identifica los tipos de archivo de un vistazo
Code Spell Checker: Erradica los vergonzosos errores ortográficos
GitLens: Conecta el pasado y el futuro de tu código

VSCode es un editor excelente por sí solo, pero añadiendo extensiones, puedes hacerlo evolucionar infinitamente para que se adapte a tu estilo de programación. Te animo a usar las que he presentado como base para construir tu propio entorno de desarrollo definitivo.

Si dominas las extensiones, la programación se convierte en una actividad más creativa y divertida. Nada me haría más feliz que este artículo sirva para dar un fuerte impulso a tus primeros pasos como desarrollador.

Hacia el siguiente paso

¿Los menús de tu VSCode siguen en inglés? Si quieres saber más sobre cómo traducirlo, que fue lo primero que presenté, no te pierdas este otro artículo. Detalla el proceso de configuración y otros consejos útiles relacionados con el cambio de idioma.

→ 【Traducir VSCode】Cómo cambiar el idioma del menú y la interfaz y configuraciones recomendadas