Cómo configurar VS Code para el desarrollo de JavaScript

Visual Studio Code (VS Code) es hoy uno de los editores más usados para escribir JavaScript, tanto en el backend como en el frontend. Funciona en Windows, macOS y Linux y ya incluye lo básico para empezar.

• Depurador de código.
• Terminal integrado.
• Herramientas para trabajar con Git.
• Resaltado de sintaxis para muchos lenguajes y formatos de archivo.
• Navegación rápida por el proyecto.
• Vista previa integrada de Markdown.
• Autocompletado inteligente (IntelliSense).
• Extensiones, que se instalan desde el propio editor.

Las extensiones agregan funciones que el editor no trae de serie. Para JavaScript necesitarás pocas, y en esta guía veremos las más importantes. Si empiezas con HTML y CSS, mira también la selección de extensiones para principiantes.

Para instalar una extensión, abre la vista "Extensions" en la barra lateral (o usa Ctrl+Shift+X en Windows y Linux, Shift+Cmd+X en macOS), escribe el nombre en el campo de búsqueda y haz clic en "Install". Antes de instalar una, revisa el nombre del editor que la publica y el número de instalaciones.

Prepara Node.js

Para ejecutar JavaScript fuera del navegador y para instalar herramientas como ESLint necesitas Node.js. Instala una versión LTS (a octubre de 2026 las líneas LTS son la 24 y la 22), ya sea desde nodejs.org o con un gestor de versiones. Si vas a trabajar con varios proyectos, el gestor de versiones te ahorrará problemas, y lo explicamos en la guía sobre gestores de versiones.

Ejecuta tu código

Hoy no hace falta convertir tu código de ES6 a ES5 para practicar. Los navegadores actuales y Node.js entienden JavaScript moderno, así que puedes abrir el terminal integrado de VS Code (menú Terminal) y ejecutar tu archivo directamente.

node index.js

Para que Node.js reinicie el programa cada vez que guardas un cambio, usa el modo de observación.

node --watch index.js

Si ya definiste comandos en la sección scripts de tu package.json, puedes lanzarlos con node --run nombre-del-script o con npm run nombre-del-script.

Cuando un proyecto para el navegador necesita empaquetar módulos o transformar código, se usan herramientas especializadas. Puedes leer sobre ellas en las guías de transpiladores y de webpack. Babel, que antes se configuraba con una tarea en tasks.json, sigue existiendo, pero ya no es un paso obligatorio para aprender.

Estándares de codificación con ESLint

ESLint es una herramienta que revisa tu código JavaScript y señala errores y malas prácticas mientras escribes. Es una de las más usadas en el ecosistema.

Lo recomendable es instalar ESLint dentro de cada proyecto y no de forma global. Así cada proyecto lleva su propia versión y su propia configuración. Con Node.js instalado, sigue estos pasos desde la carpeta del proyecto, que debe tener un package.json (si no lo tiene, crea uno con npm init).

1. Ejecuta npm init @eslint/config@latest y responde las preguntas del asistente. Instala ESLint como dependencia del proyecto y crea el archivo de configuración.
2. Revisa el archivo eslint.config.js que se genera. Es el formato actual, llamado "flat config". Más abajo ves un ejemplo para un proyecto de navegador.
3. Instala en VS Code la extensión ESLint, publicada por Microsoft. Usa el ESLint de tu proyecto y marca los problemas directamente en el editor.
4. Ejecuta npx eslint archivo.js para revisar un archivo desde el terminal.

import { defineConfig } from "eslint/config";
import globals from "globals";
import js from "@eslint/js";

export default defineConfig([
  { files: ["**/*.js"], languageOptions: { globals: globals.browser } },
  { files: ["**/*.js"], plugins: { js }, extends: ["js/recommended"] },
]);

Si encuentras tutoriales antiguos con un archivo .eslintrc.yml o .eslintrc.json, ten en cuenta que ese formato ya no es compatible con ESLint 10. Para proyectos de Node.js, cambia globals.browser por globals.node. ESLint 10 necesita Node.js 20.19, 22.13 o 24 en adelante.

Para que ESLint corrija automáticamente lo que pueda cada vez que guardas, agrega esto a la configuración de VS Code (archivo settings.json).

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

Formato automático con Prettier

ESLint se ocupa de errores y malas prácticas. Para que el código tenga siempre el mismo formato (sangrías, comillas, espacios) se usa un formateador. El más conocido es Prettier, que tiene extensión para VS Code ("Prettier - Code formatter"). Instálalo en el proyecto con npm install prettier -D --save-exact y configura el editor para que lo use al guardar.

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

La extensión usa la versión de Prettier que instalaste en el proyecto y respeta su archivo de configuración (por ejemplo .prettierrc). Así todo el equipo formatea igual. Existen alternativas como Biome, que junta formato y revisión en una sola herramienta, pero Prettier sigue siendo la opción más común.

Autocompletado

VS Code incluye IntelliSense, un sistema de análisis de código que ofrece autocompletado y sugerencias para JavaScript, TypeScript, JSON, HTML y CSS sin instalar nada. Si una librería no muestra sugerencias, suele deberse a que faltan sus archivos de tipos, y casi siempre se resuelve instalando el paquete de la librería con npm.

jsconfig.json

Para un proyecto sencillo no necesitas configurar nada. El archivo jsconfig.json sirve para indicarle a VS Code que una carpeta es la raíz de un proyecto de JavaScript, qué archivos incluir y qué opciones usar. Colócalo en la raíz del proyecto. Un ejemplo mínimo es el siguiente.

{
  "compilerOptions": {
    "target": "ES2022",
    "checkJs": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Con exclude dejas fuera carpetas como node_modules o dist, lo que ayuda al rendimiento. La opción checkJs activa la revisión de tipos en tus archivos JavaScript. Si prefieres activarla solo en un archivo, suele bastar con escribir // @ts-check en la primera línea.

Depuración

VS Code tiene un depurador integrado. Puedes poner puntos de interrupción (clic a la izquierda del número de línea), avanzar paso a paso y ver el valor de las variables en tiempo real.

Código de Node.js. No necesitas instalar nada. Abre la paleta de comandos (Ctrl+Shift+P en Windows y Linux, Shift+Cmd+P en macOS), ejecuta "Debug: Create JavaScript Debug Terminal" y lanza tu programa con node desde ese terminal. Se depurará automáticamente. También puedes usar la vista "Run and Debug" con un archivo .vscode/launch.json.

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Program",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/index.js",
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

Código del navegador. Tampoco necesitas un complemento aparte. VS Code depura en Edge y en Chrome. La forma más rápida es ejecutar el comando "Debug: Open Link" desde la paleta de comandos e ingresar la dirección de tu página (por ejemplo http://localhost:8000). Si prefieres una configuración fija, en launch.json usa "type": "chrome" o "type": "msedge", con "request": "launch" y la "url" de tu aplicación.

Dos herramientas útiles que conviene conocer son el punto de interrupción condicional, que se detiene solo si una expresión es verdadera, y el "logpoint", que escribe un mensaje en la consola de depuración sin detener el programa. Ambos se crean con clic derecho en el margen del editor.

Asistentes de IA en el editor

VS Code puede integrar asistentes de IA. El más conocido es GitHub Copilot, que ofrece sugerencias mientras escribes, un chat para hacer preguntas y un modo de agente para tareas más largas. Para usarlo necesitas una cuenta de GitHub. Existe un plan gratuito de Copilot, pero con un uso limitado que depende de tu plan. También hay otros editores basados en VS Code con IA integrada, como Cursor.

Estas herramientas ahorran tiempo, pero pueden equivocarse y a veces inventan funciones que no existen. Si estás aprendiendo, intenta escribir tú el código y usa el asistente para pedir explicaciones o revisar errores, no para que te entregue la solución completa. Lee siempre lo que sugiere antes de aceptarlo.

Enlaces

Curso sobre cómo configurar el entorno de trabajo para trabajar en el ecosistema moderno de JavaScript.