Cómo configurar VS Code para desarrollo web paso a paso

Un editor que se adapta a tu forma de trabajar

Visual Studio Code se ha convertido en el editor de referencia para el desarrollo web. Es gratuito, funciona en Windows, macOS y Linux, arranca rápido y, sobre todo, se puede moldear casi por completo a las necesidades de cada proyecto. Esa flexibilidad es a la vez su mayor virtud y su principal trampa: recién instalado es un editor correcto, pero bien configurado se convierte en un entorno que formatea el código por ti, detecta errores mientras escribes, recarga el navegador al guardar y te permite depurar JavaScript sin salir de la ventana.

En esta guía recorrerás ese camino de principio a fin. Empezarás por la instalación y el comando de terminal, pasarás por los atajos que conviene memorizar desde el primer día, crearás un proyecto con Emmet, y después dedicarás tiempo a lo que realmente marca la diferencia: un archivo de configuración bien pensado, el formateo automático con Prettier, el análisis con ESLint, un servidor de desarrollo con recarga automática y la depuración en el navegador.

El editor ha cambiado bastante en los últimos años. Las versiones publicadas a lo largo de 2026 llegan con mucha más frecuencia que antes e integran de serie el chat y los agentes de IA de GitHub Copilot, además de funciones que antes requerían extensiones. Por eso algunos consejos que siguen circulando, como instalar extensiones para colorear paréntesis o para sincronizar la configuración, ya no son necesarios. A lo largo del artículo se indica cuándo una funcionalidad viene integrada y cuándo merece la pena añadir algo.

Instalación en cada sistema operativo

La forma más sencilla es descargar el instalador desde la web oficial de Visual Studio Code, pero si prefieres la terminal, cada sistema tiene su gestor de paquetes.

En Windows, con el gestor de paquetes integrado:

winget install -e --id Microsoft.VisualStudioCode

En macOS, con Homebrew:

brew install --cask visual-studio-code

En distribuciones basadas en Debian o Ubuntu, descarga el paquete .deb desde la web oficial e instálalo con apt, que además registra el repositorio de Microsoft para recibir actualizaciones automáticas:

sudo apt install ./code_*.deb

En Fedora y derivadas existe un paquete .rpm equivalente. Una vez instalado, comprueba que todo funciona desde la terminal:

code --version

1.119.0
a1b2c3d4e5f6...
x64

El número exacto dependerá de cuándo lo instales, porque el editor se actualiza solo. Lo importante es que el comando code responda.

El comando code y por qué lo usarás a diario

Abrir proyectos desde la terminal es uno de los hábitos que más tiempo ahorran. En Windows y Linux el instalador añade el comando code al PATH automáticamente. En macOS hay que hacerlo una vez a mano: abre la paleta de comandos con Cmd+Shift+P, busca “Shell Command: Install ‘code’ command in PATH” y ejecútalo.

Si el comando no existe, la terminal mostrará este error:

zsh: command not found: code

Con el comando disponible, trabajar con proyectos se vuelve inmediato:

code .                      # abre la carpeta actual
code ~/proyectos/tienda     # abre una carpeta concreta
code index.html             # abre un archivo
code -r .                   # reutiliza la ventana ya abierta
code --diff viejo.js nuevo.js  # compara dos archivos

Recorrido rápido por la interfaz

La ventana de VS Code se organiza en pocas zonas que conviene identificar. A la izquierda está la barra de actividades, con iconos para el explorador de archivos, la búsqueda global, el control de código fuente, el depurador y las extensiones. Al lado se abre la barra lateral con el contenido de la sección elegida. El centro lo ocupa el área de edición, que admite pestañas y divisiones en varios paneles. Abajo se encuentra el panel inferior, donde viven la terminal integrada, la consola de depuración y la lista de problemas. Y en el borde inferior, la barra de estado muestra la rama de Git, el lenguaje del archivo, la codificación y los errores detectados.

Para la mayoría de las tareas no hace falta tocar el ratón. Estos atajos son los que más se usan:

Si solo vas a memorizar uno, que sea la paleta de comandos: desde ella se accede a cualquier función del editor escribiendo parte de su nombre, lo que la convierte en el índice de todo lo demás. El segundo más útil es Ctrl+P, que abre cualquier archivo del proyecto escribiendo solo unas letras de su nombre.

Ctrl+D merece una mención aparte. Selecciona la siguiente aparición de la palabra bajo el cursor y añade un cursor más, de modo que puedes editar varias coincidencias a la vez. Combinado con Alt+clic, que coloca cursores en posiciones arbitrarias, es una de las formas más rápidas de hacer cambios repetitivos.

Tu primer proyecto con Emmet

Crea una carpeta para practicar y ábrela en el editor:

mkdir mi-portafolio && cd mi-portafolio
code .

Desde el explorador, crea un archivo index.html. Escribe un signo de exclamación y pulsa Tab: aparecerá una plantilla HTML5 completa. Eso es Emmet, un motor de abreviaturas que viene integrado en el editor y que convierte expresiones breves en bloques de marcado. Usar Emmet en archivos HTML acelera muchísimo la escritura de estructuras repetitivas.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body></body>
</html>

La sintaxis de Emmet se parece a la de los selectores CSS. Algunos ejemplos que puedes probar dentro del body:

Por ejemplo, la abreviatura section.proyectos>h2{Proyectos}+article.tarjeta*2>h3+p genera:

<section class="proyectos">
    <h2>Proyectos</h2>
    <article class="tarjeta">
        <h3></h3>
        <p></p>
    </article>
    <article class="tarjeta">
        <h3></h3>
        <p></p>
    </article>
</section>

Emmet también funciona en CSS: m10 se convierte en margin: 10px;, df en display: flex; y bdrs4 en border-radius: 4px;. Si trabajas con React, puedes activarlo en archivos JSX añadiendo una asociación de lenguajes en la configuración, como verás en la siguiente sección.

La configuración de usuario y la de espacio de trabajo

VS Code guarda sus preferencias en archivos JSON, y entender su jerarquía evita muchos quebraderos de cabeza. Hay dos niveles principales.

La configuración de usuario se aplica a todos los proyectos que abras en tu equipo. Es el lugar para tus preferencias personales: tema, fuente, tamaño de letra, comportamiento del guardado.

La configuración de espacio de trabajo vive dentro del proyecto, en .vscode/settings.json, y tiene prioridad sobre la de usuario. Es el lugar para las reglas que deben compartir todos los miembros del equipo, como el formateador o el tamaño de la indentación, y conviene versionarla con Git.

La interfaz gráfica de configuración (Ctrl+,) es cómoda para explorar opciones, pero editar el JSON directamente es más rápido y permite copiar configuraciones entre equipos. Para abrirlo, busca en la paleta de comandos “Preferences: Open User Settings (JSON)”.

Este es un punto de partida sensato para desarrollo web:

{
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit"
    },
    "editor.fontFamily": "'Cascadia Code', 'Fira Code', Consolas, monospace",
    "editor.fontLigatures": true,
    "editor.fontSize": 15,
    "editor.wordWrap": "on",
    "editor.minimap.enabled": false,
    "editor.guides.bracketPairs": "active",
    "editor.linkedEditing": true,
    "files.autoSave": "onFocusChange",
    "files.trimTrailingWhitespace": true,
    "files.insertFinalNewline": true,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
    "explorer.confirmDragAndDrop": false,
    "terminal.integrated.fontSize": 14
}

Algunas de estas opciones merecen explicación. editor.tabSize en 2 es el estándar de facto en HTML, CSS y JavaScript, aunque el editor viene con 4 por defecto. editor.formatOnSave aplica el formateador cada vez que guardas, lo que elimina las discusiones sobre estilo. editor.linkedEditing hace que al renombrar una etiqueta HTML de apertura se renombre también la de cierre, sin necesidad de extensiones. files.autoSave con onFocusChange guarda el archivo cuando cambias de ventana, algo muy útil cuando trabajas con un servidor de recarga automática.

La coloración de pares de paréntesis, que durante años requirió una extensión, viene integrada y activada en el editor desde hace tiempo; la opción editor.guides.bracketPairs solo añade líneas verticales que unen cada par.

Formateo automático con Prettier

Formatear el código a mano es una pérdida de tiempo y una fuente constante de diferencias irrelevantes en las revisiones. Prettier resuelve esto aplicando un estilo único y opinado a HTML, CSS, JavaScript, TypeScript, JSON, Markdown y otros formatos. Se integra con VS Code a través de su extensión oficial, cuyo identificador es esbenp.prettier-vscode.

Instalar la extensión permite formatear sin más, pero lo recomendable es fijar también Prettier como dependencia del proyecto. Así todo el equipo, y el servidor de integración continua, usan exactamente la misma versión:

npm init -y
npm install --save-dev --save-exact prettier

A continuación, define las reglas en un archivo .prettierrc en la raíz del proyecto:

{
    "semi": true,
    "singleQuote": false,
    "printWidth": 90,
    "trailingComma": "all",
    "bracketSpacing": true
}

Y excluye lo que no debe formatearse con un .prettierignore:

dist
node_modules
coverage
package-lock.json

Con editor.formatOnSave activado y Prettier como formateador predeterminado, cada vez que guardes un archivo se reorganizará automáticamente. Para formatear todo el proyecto de una vez, o para comprobarlo en un pipeline, añade scripts al package.json:

{
    "scripts": {
        "formato": "prettier --write .",
        "formato:comprobar": "prettier --check ."
    }
}

npm run formato:comprobar

Checking formatting...
[warn] src/app.js
[warn] Code style issues found in the above file. Run Prettier with --write to fix.

Este formateo automático con Prettier integrado en el guardado es probablemente la mejora de productividad más inmediata que puedes aplicar al editor.

Análisis de código con ESLint

Prettier se ocupa de la forma; ESLint se ocupa del fondo. Detecta variables sin usar, comparaciones peligrosas, código inalcanzable y patrones propensos a errores. La extensión oficial (dbaeumer.vscode-eslint) muestra los problemas subrayados directamente en el editor y puede corregir automáticamente muchos de ellos al guardar, gracias a la opción source.fixAll.eslint de la configuración anterior.

ESLint utiliza desde su versión 9 el formato de configuración plana (flat config) como predeterminado, basado en un archivo eslint.config.js. Los antiguos archivos .eslintrc han quedado obsoletos, así que si encuentras tutoriales que los usan, conviene traducirlos al nuevo formato. La forma más rápida de empezar es el asistente oficial:

npm init @eslint/config@latest

Un archivo de configuración mínimo para un proyecto web con JavaScript moderno podría ser este:

// eslint.config.js
import js from "@eslint/js";
import globals from "globals";

export default [
    js.configs.recommended,
    {
        files: ["**/*.js"],
        languageOptions: {
            ecmaVersion: "latest",
            sourceType: "module",
            globals: globals.browser,
        },
        rules: {
            "no-unused-vars": "warn",
            eqeqeq: "error",
            "no-console": ["warn", { allow: ["warn", "error"] }],
        },
    },
];

Para evitar que ESLint y Prettier se contradigan sobre cuestiones de estilo, la práctica habitual es dejar todo el formato en manos de Prettier y usar ESLint solo para la calidad del código. Las configuraciones recomendadas actuales de ESLint ya no incluyen reglas de formato, por lo que en proyectos nuevos el conflicto apenas aparece.

Un servidor de desarrollo con recarga automática

Abrir un archivo HTML con doble clic funciona para páginas muy simples, pero en cuanto usas módulos de JavaScript, peticiones fetch a archivos locales o rutas absolutas, el navegador bloquea muchas operaciones por cargar la página con el protocolo file://. Lo correcto es servir el proyecto con un servidor local.

Durante años la opción más popular fue la extensión Live Server, que levanta un servidor con un clic y recarga el navegador al guardar. Sigue siendo muy usada, pero su repositorio acumula miles de incidencias abiertas, de modo que conviene conocer las alternativas antes de decidir.

Microsoft publica su propia extensión, Live Preview, que muestra la página dentro de una pestaña del editor o en el navegador externo y se mantiene junto al resto de herramientas oficiales. Para páginas estáticas y aprendizaje es una opción muy cómoda. Un detalle a tener en cuenta: no conviene tener Live Server y Live Preview activas a la vez, porque pueden interferir en la recarga automática.

Para cualquier proyecto que vaya más allá de unas pocas páginas, la recomendación actual es usar un servidor de desarrollo como Vite, que ofrece recarga en caliente, soporte para módulos, TypeScript y frameworks, y un proceso de compilación para producción:

npm create vite@latest mi-portafolio -- --template vanilla
cd mi-portafolio
npm install
npm run dev

  VITE ready in 312 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

Vite se ejecuta desde la terminal integrada, y VS Code detecta la URL en la salida: basta con hacer Ctrl+clic sobre ella para abrirla.

Extensiones que realmente aportan

El mercado de extensiones es enorme, y la tentación de instalar decenas es grande. Cada extensión consume memoria y tiempo de arranque, así que conviene ser selectivo. Estas son las que aportan valor real en desarrollo web:

• Prettier (esbenp.prettier-vscode): formateo automático.
• ESLint (dbaeumer.vscode-eslint): análisis de calidad del código.
• Live Preview (ms-vscode.live-server) o Live Server (ritwickdey.LiveServer): servidor local para páginas estáticas.
• Error Lens (usernamehw.errorlens): muestra los errores en la misma línea del código.
• GitLens (eamodio.gitlens): historial y autoría de cada línea.
• Tailwind CSS IntelliSense (bradlc.vscode-tailwindcss): autocompletado de clases si usas Tailwind.
• Path Intellisense (christian-kohler.path-intellisense): autocompletado de rutas de archivos.
• EditorConfig (EditorConfig.EditorConfig): respeta las reglas de .editorconfig del proyecto.

Hay extensiones muy recomendadas en tutoriales antiguos que ya no tienen sentido, porque su funcionalidad está integrada: colorear pares de paréntesis, renombrar automáticamente etiquetas HTML emparejadas o sincronizar la configuración entre equipos (que ahora se hace con Settings Sync, iniciando sesión con una cuenta de GitHub o Microsoft).

Las extensiones también se gestionan desde la terminal, lo que resulta útil para automatizar la preparación de un equipo nuevo:

code --install-extension esbenp.prettier-vscode
code --install-extension dbaeumer.vscode-eslint
code --list-extensions

Para que todo el equipo use las mismas herramientas, crea un archivo .vscode/extensions.json en el proyecto. Cuando alguien abra la carpeta, el editor le sugerirá instalar las que falten:

{
    "recommendations": [
        "esbenp.prettier-vscode",
        "dbaeumer.vscode-eslint",
        "usernamehw.errorlens",
        "EditorConfig.EditorConfig"
    ]
}

Así queda la estructura de un proyecto con la configuración compartida:

mi-portafolio/
├── .vscode/
│   ├── extensions.json
│   ├── launch.json
│   └── settings.json
├── src/
│   ├── main.js
│   └── estilos.css
├── .prettierrc
├── .prettierignore
├── eslint.config.js
├── index.html
└── package.json

Perfiles para separar contextos

Si usas VS Code para tareas muy distintas, por ejemplo desarrollo web por la mañana y scripts de Python o escritura de documentación por la tarde, los perfiles evitan que todas las extensiones y ajustes convivan a la vez. Un perfil agrupa su propia configuración, extensiones, atajos, fragmentos de código y distribución de la interfaz.

Se gestionan desde el icono del engranaje, en la esquina inferior izquierda, o con el comando “Profiles: Create Profile” en la paleta. Puedes crear un perfil vacío, copiar el actual o partir de plantillas que el propio editor ofrece para lenguajes concretos. Cambiar de perfil es instantáneo, y también puedes asociar un perfil a una carpeta para que se active automáticamente al abrirla.

Los perfiles se pueden exportar a un archivo o a un gist, lo que facilita compartir con el equipo una configuración completa de partida para desarrollo web.

Depurar JavaScript sin salir del editor

Muchos desarrolladores depuran exclusivamente con console.log. Funciona, pero VS Code incluye un depurador capaz de conectarse a Chrome o Edge y detener la ejecución en puntos de interrupción, inspeccionar variables y recorrer el código paso a paso. No requiere extensiones: el soporte para navegadores basados en Chromium viene integrado.

Con el servidor de desarrollo en marcha, crea un archivo .vscode/launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Depurar en Chrome",
            "url": "http://localhost:5173",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "msedge",
            "request": "launch",
            "name": "Depurar en Edge",
            "url": "http://localhost:5173",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

Pulsa F5 para lanzar el navegador conectado al depurador. Haz clic en el margen izquierdo de cualquier línea de tu código para añadir un punto de interrupción, y cuando la ejecución llegue a ella, el editor se detendrá y mostrará el valor de las variables. Por ejemplo, con este código:

// src/main.js
const proyectos = [
    { nombre: "Tienda online", horas: 120 },
    { nombre: "Blog personal", horas: 35 },
    { nombre: "Panel de métricas", horas: 80 },
];

function totalHoras(lista) {
    return lista.reduce((suma, proyecto) => suma + proyecto.horas, 0);
}

document.querySelector("#total").textContent = `${totalHoras(proyectos)} horas`;

Un punto de interrupción dentro de reduce te permite ver cómo cambia suma en cada iteración, sin modificar el código. Los puntos de interrupción condicionales, que solo se activan si se cumple una expresión, y los logpoints, que imprimen un mensaje sin detener la ejecución, son variantes muy útiles para errores que solo aparecen en casos concretos.

Git y la terminal integrados

VS Code incluye un cliente de Git completo en la vista de control de código fuente (Ctrl+Shift+G). Desde allí puedes ver los cambios de cada archivo, prepararlos línea a línea, escribir el mensaje de commit, cambiar de rama y resolver conflictos con un editor de fusión de tres paneles. El margen del editor muestra con colores qué líneas se han añadido, modificado o eliminado desde el último commit.

La terminal integrada se abre con Ctrl+` y puede dividirse en varios paneles, lo que permite tener el servidor de desarrollo en uno y Git o los tests en otro. Puedes elegir qué shell usar por defecto en la configuración:

{
    "terminal.integrated.defaultProfile.windows": "PowerShell",
    "terminal.integrated.defaultProfile.linux": "bash",
    "terminal.integrated.defaultProfile.osx": "zsh"
}

Las tareas de VS Code permiten lanzar scripts frecuentes desde la paleta de comandos. Un archivo .vscode/tasks.json puede definir, por ejemplo, el arranque del servidor:

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Servidor de desarrollo",
            "type": "npm",
            "script": "dev",
            "isBackground": true,
            "problemMatcher": []
        }
    ]
}

Asistencia con IA integrada

Las versiones recientes del editor integran de serie el chat y los modos de agente de GitHub Copilot, que pueden explicar código, proponer cambios en varios archivos, generar pruebas o ejecutar comandos en la terminal con tu aprobación. Su uso requiere una cuenta de GitHub y, según el plan, puede tener límites de uso.

Es una herramienta útil, especialmente para tareas repetitivas y para explorar código desconocido, pero conviene mantener el criterio propio: revisa siempre los cambios propuestos antes de aceptarlos, desconfía de dependencias o APIs que no reconozcas y no compartas secretos en el chat. Si estás aprendiendo, puede ser recomendable desactivar las sugerencias automáticas durante un tiempo para afianzar los fundamentos; se puede hacer desde la configuración o desde el icono de Copilot en la barra de estado.

Problemas frecuentes y cómo resolverlos

Algunos problemas aparecen una y otra vez al configurar el editor.

El formato al guardar no hace nada. Suele deberse a que no hay un formateador predeterminado para ese lenguaje. Abre la paleta de comandos, ejecuta “Format Document With…” y elige “Configure Default Formatter”. Revisa también que no haya un settings.json de espacio de trabajo que desactive editor.formatOnSave.

Prettier ignora las reglas del .prettierrc. Comprueba que el archivo está en la raíz de la carpeta abierta, no en una subcarpeta, y que no contiene errores de sintaxis. El panel de salida, seleccionando “Prettier” en el desplegable, muestra el motivo exacto.

ESLint no muestra errores. Abre el panel de salida y selecciona “ESLint” para ver el registro. Un mensaje habitual al migrar proyectos antiguos es:

ESLint couldn't find an eslint.config.(js|mjs|cjs) file.

Significa que el proyecto todavía usa un .eslintrc y necesita migrarse al formato de configuración plana.

El navegador no se recarga al guardar. Si usas Live Server, verifica que no tienes también Live Preview activa. Si el guardado automático está configurado con retraso, la recarga puede tardar más de lo esperado.

El editor va lento. Ejecuta “Developer: Show Running Extensions” en la paleta de comandos para ver cuánto tarda en activarse cada extensión, y desactiva las que no necesites. El comando “Help: Start Extension Bisect” desactiva extensiones por mitades para localizar la culpable de un problema.

Los cambios de configuración no se aplican. Recuerda la jerarquía: la configuración del espacio de trabajo prevalece sobre la de usuario. Si un ajuste no surte efecto, busca si está sobrescrito en .vscode/settings.json.

Buenas prácticas para mantener el entorno ordenado

Unas pocas costumbres mantienen el editor rápido y el equipo sincronizado:

• Versiona .vscode/settings.json, extensions.json y launch.json en los proyectos de equipo, pero deja fuera las preferencias personales.
• Instala Prettier y ESLint como dependencias del proyecto, no solo como extensiones, para que las reglas sean idénticas en todos los equipos y en la integración continua.
• Revisa periódicamente tus extensiones y elimina las que ya no usas o cuya función se ha integrado en el editor.
• Activa Settings Sync para no reconstruir tu configuración en cada equipo nuevo.
• Usa perfiles si trabajas con stacks muy distintos.
• Complementa la configuración del editor con un .editorconfig para que las reglas básicas se respeten también en otros editores.

# .editorconfig
root = true

[*]
indent_style = space
indent_size = 2
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

Con este archivo, alguien que use otro editor seguirá respetando la indentación y los finales de línea del proyecto, lo que evita diferencias innecesarias en el historial de Git.

Conclusiones

Visual Studio Code es mucho más que un editor de texto con resaltado de sintaxis: bien configurado, se convierte en un entorno de desarrollo web completo que formatea, analiza, sirve y depura el código sin necesidad de cambiar de herramienta. La clave está en invertir un poco de tiempo al principio en una configuración de VS Code pensada para tu forma de trabajar.

Los pilares de esa configuración son pocos: el comando code en la terminal, una docena de atajos memorizados, Emmet para escribir HTML más rápido, un settings.json con formato al guardar, Prettier y ESLint instalados en cada proyecto, un servidor de desarrollo como Vite o Live Preview y el depurador integrado conectado al navegador. A partir de ahí, perfiles, tareas y extensiones seleccionadas con criterio completan el entorno.

Conviene revisar de vez en cuando las novedades del editor, porque funciones que antes requerían extensiones pasan a estar integradas y algunas recomendaciones antiguas dejan de tener sentido. Empieza por la configuración básica de esta guía, compártela con tu equipo mediante la carpeta .vscode y ve ajustándola a medida que tus proyectos lo pidan.