Cómo configurar Visual Studio Code en Mac para desarrollo web profesional

Montar un entorno de desarrollo web en Mac con Visual Studio Code no es complicado, pero la diferencia entre "lo tengo instalado" y "lo tengo configurado para trabajar en serio" son varias horas y unos cuantos ajustes que casi nadie te cuenta. Esta guía va justo de eso: dejar VS Code listo para picar código de verdad en un MacBook con Apple Silicon, con extensiones útiles (no las 40 de moda), integración con la terminal Zsh y Homebrew, y una configuración que aguanta proyectos reales de React, Vue o Node.js.

Tiempo estimado: entre 30 y 45 minutos si vas de cero. Válido para macOS Sequoia 15.x y Ventura 13.x en cualquier Mac con chip M1, M2, M3 o M4.

Requisitos previos

Antes de tocar VS Code, conviene tener el Mac mínimamente preparado.

• macOS 13 Ventura o superior. VS Code funciona en versiones anteriores, pero muchas extensiones modernas piden 13+.
• Command Line Tools de Xcode. Se instalan solos la primera vez que ejecutes git en la terminal, o manualmente con xcode-select --install.
• Homebrew instalado. Es la vía más limpia para gestionar Node, Git y utilidades. Instrucciones en brew.sh.
• Cuenta de GitHub si vas a usar Copilot o sincronizar ajustes.

Ficha rápida del entorno recomendado:

Componente	Versión recomendada (2026)
macOS	Sequoia 15.4 o superior
Visual Studio Code	1.95+ (Universal / Apple Silicon)
Node.js	22 LTS
Git	2.47+
Shell	Zsh (por defecto en macOS)
Homebrew	4.4+

Descargar la versión correcta para Apple Silicon

Aquí ya se cometen errores. Ve a code.visualstudio.com y descarga el binario Apple Silicon, no el Intel ni el Universal. El Universal funciona, pero pesa el doble y no aporta nada si tu Mac es M1, M2, M3 o M4.

Para comprobar tu chip: menú Apple → Acerca de este Mac. Si ves "Apple M…", vas a Silicon.

Alternativa vía Homebrew, más cómoda si ya lo usas:

brew install --cask visual-studio-code

Homebrew detecta la arquitectura y descarga el paquete correcto. Además, actualizarlo luego es brew upgrade --cask visual-studio-code sin tener que descargar el DMG a mano.

Primera instalación y ajustes básicos

Arrastra VS Code a Aplicaciones (si has usado el DMG) y ábrelo. En el primer arranque:

1. Acepta abrir la app descargada de Internet.
2. Elige tema. Default Dark Modern va bien; si trabajas mucho de día, GitHub Light Default cansa menos la vista.
3. Salta el paso de sincronización por ahora, lo veremos después.

Lo primero que conviene hacer: activar el comando code en la terminal. Abre la paleta de comandos con ⌘ + Mayúscula + P, escribe "shell command" y elige Shell Command: Install 'code' command in PATH. A partir de ahí, code . desde cualquier carpeta te abre el proyecto en VS Code.

Configurar la integración con Zsh y la terminal

macOS usa Zsh por defecto desde Catalina. VS Code lo detecta, pero conviene afinar la terminal integrada.

Abre Ajustes con ⌘ + , y busca:

• terminal.integrated.defaultProfile.osx → ponlo en zsh.
• terminal.integrated.fontSize → 13 o 14 si tu pantalla es Retina de 14".
• terminal.integrated.fontFamily → MesloLGS NF si vas a usar Powerlevel10k, o deja la de sistema.

Para una experiencia decente en Zsh, instala Oh My Zsh:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Y añade dos plugins que se usan mucho: zsh-autosuggestions y zsh-syntax-highlighting. Se instalan con Homebrew (brew install zsh-autosuggestions zsh-syntax-highlighting) y se activan añadiendo dos líneas al final de tu ~/.zshrc. La documentación oficial de cada uno explica la ruta exacta según tu sistema.

Reinicia la terminal integrada de VS Code (⌃ + ` para abrirla) y ya tienes autocompletado inteligente.

Instalar Node.js con Homebrew (y por qué no con el instalador oficial)

Puedes descargar el .pkg de nodejs.org, sí. Pero si algún día quieres saltar de Node 22 a Node 24, o mantener dos versiones para dos proyectos, te vas a arrepentir.

La opción sensata es nvm (Node Version Manager):

brew install nvm
mkdir ~/.nvm

Añade a tu ~/.zshrc:

export NVM_DIR="$HOME/.nvm"
[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh"

Recarga con source ~/.zshrc y ya puedes hacer nvm install 22, nvm use 22, nvm install 20, cambiar entre versiones por proyecto, etc. VS Code lo detecta automáticamente en la terminal integrada.

Extensiones esenciales para desarrollo web

Aquí la trampa es instalar veinte extensiones "por si acaso". VS Code se ralentiza y muchas se pisan entre ellas. Estas son las que aportan valor real:

Base para cualquier proyecto web:

• ESLint (Microsoft) — linting de JS/TS. Imprescindible.
• Prettier – Code formatter — formateo automático. Configúralo como formateador por defecto.
• EditorConfig for VS Code — respeta los .editorconfig de proyectos ajenos.
• GitLens — historial de Git dentro del editor. La versión gratuita ya sobra.

Para React / Next.js:

• ES7+ React/Redux/React-Native snippets — snippets rápidos (rafce y compañía).
• Simple React Snippets si prefieres algo más ligero.

Para Vue:

• Vue – Official (antes Volar). Instálala y desactiva Vetur si lo tienes.
• TypeScript Vue Plugin (Volar) si trabajas con TS.

Para Node.js:

• REST Client — probar endpoints sin salir de VS Code, alternativa a Postman.
• DotENV — sintaxis para archivos .env.

Calidad de vida:

• Path Intellisense — autocompleta rutas de archivos.
• Error Lens — muestra los errores en la línea, no solo subrayados.
• Auto Rename Tag — renombra etiquetas HTML/JSX en pareja.

Evita instalar packs "todo en uno" tipo "React Extension Pack". Meten cosas que no usas y ralentizan el arranque.

Ajustes de settings.json que marcan diferencia

Abre la paleta con ⌘ + Mayúscula + P y busca "Preferences: Open User Settings (JSON)". Añade o ajusta:

{
  "editor.fontSize": 14,
  "editor.fontFamily": "JetBrains Mono, Menlo, monospace",
  "editor.fontLigatures": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.minimap.enabled": false,
  "editor.linkedEditing": true,
  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,
  "workbench.startupEditor": "none",
  "terminal.integrated.fontSize": 13,
  "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
}

Puntos clave: formatOnSave con Prettier evita discusiones de estilo, linkedEditing renombra etiquetas HTML a pares, y desactivar el minimapa deja más espacio real en un MacBook Air de 13".

Instala JetBrains Mono con brew install --cask font-jetbrains-mono si no la tienes. Fira Code o Cascadia Code también funcionan bien con ligaduras.

Git y GitHub: autenticación limpia

Configura tu identidad global:

git config --global user.name "Tu Nombre"
git config --global user.email "tu@email.com"
git config --global init.defaultBranch main

Para autenticar con GitHub, la vía moderna es la extensión GitHub Pull Requests and Issues de Microsoft. Al primer push te lanza el flujo OAuth en el navegador y guarda las credenciales en el Llavero de macOS. Sin tokens manuales, sin ~/.netrc.

Si prefieres SSH, genera la clave con ssh-keygen -t ed25519 -C "tu@email.com" y añade la pública en GitHub → Settings → SSH keys.

GitHub Copilot y alternativas

Copilot cuesta 10 $ al mes (unos 9,50 € en 2026, facturación en dólares) para uso individual, gratis para estudiantes verificados y mantenedores de proyectos open source populares. Se instala como extensión y se autentica con la misma cuenta de GitHub.

Alternativas serias:

• Codeium — gratis para uso individual, extensión oficial en el Marketplace.
• Continue — open source, permite conectar tu propio modelo (Claude, GPT-4, modelos locales vía Ollama).
• Cursor — no es extensión, es un fork completo de VS Code. Si Copilot se te queda corto, merece una prueba.

Para desarrollo web frontend, Copilot sigue siendo el más pulido en autocompletado en línea. Codeium está muy cerca y no cuesta nada.

Sincronizar ajustes entre varios Macs

Si tienes un MacBook Pro y un Mac mini, activa Settings Sync: paleta de comandos → "Settings Sync: Turn On". Puedes elegir sincronizar ajustes, extensiones, atajos, snippets y estado de UI. Se guarda en tu cuenta de Microsoft o GitHub.

Alternativa manual si no quieres cuentas: guardar tu settings.json y lista de extensiones en un repo privado de GitHub. Extensiones instaladas se listan con:

code --list-extensions > extensions.txt

Y se reinstalan en el otro Mac con un bucle sencillo.

Problemas comunes

VS Code va lento al abrir proyectos grandes. Excluye node_modules y .next del indexado en settings.json:

"files.watcherExclude": {
  "**/node_modules/**": true,
  "**/.next/**": true,
  "**/dist/**": true
}

El comando code no funciona en la terminal. Vuelve a ejecutar "Shell Command: Install 'code' command in PATH". Si sigue fallando, revisa que /usr/local/bin esté en tu $PATH.

Prettier no formatea al guardar. Comprueba que está como formateador por defecto y que el proyecto no tenga un .prettierignore excluyendo el archivo.

La terminal no encuentra nvm o node. Suele ser porque ~/.zshrc no se está cargando. Verifica que la terminal integrada usa Zsh y no Bash: Ajustes → busca terminal.integrated.defaultProfile.osx.

Copilot no sugiere nada. Revisa que estás autenticado (icono en la barra inferior) y que el lenguaje del archivo no está en la lista de exclusión de la extensión.

Alternativas a VS Code en Mac

VS Code no es el único editor decente para Mac, aunque sí el más usado. Si el rendimiento te importa mucho, echa un ojo a Zed (nativo, escrito en Rust, arranca en menos de un segundo). Para JavaScript/TypeScript pesado, WebStorm de JetBrains sigue siendo más potente en refactorización, aunque cuesta 169 € al año para uso individual tras el primer año.

Si trabajas mucho con contenedores, te interesa complementar VS Code con Docker Desktop bien configurado en Apple Silicon para que no te chupe la batería. Y si vas a picar código muchas horas al día, la diferencia entre el teclado del MacBook y un teclado mecánico externo se nota en las muñecas al mes de uso.

FAQ

¿VS Code funciona bien en un MacBook Air M3 de 8 GB? Sí, para proyectos pequeños y medianos (React, Vue, sitios estáticos). Con proyectos monorepo grandes o varios contenedores Docker activos, 16 GB se agradecen mucho.

¿Merece la pena pagar Copilot si ya uso ChatGPT? Depende. Copilot integra sugerencias en línea mientras escribes, algo que ChatGPT en navegador no hace. Si copias y pegas código constantemente entre pestañas, Copilot te ahorra tiempo. Si solo consultas dudas puntuales, no.

¿Puedo usar VS Code para desarrollo iOS o Mac nativo? Técnicamente sí con extensiones de Swift, pero Xcode sigue siendo obligatorio para compilar y firmar. Para Swift puro sin apps de Apple, VS Code con la extensión oficial de Swift va bien.

¿Cómo desinstalo VS Code por completo? Arrastra la app a la papelera y borra ~/Library/Application Support/Code y ~/.vscode. Si lo instalaste con Homebrew, brew uninstall --cask visual-studio-code y luego borra esas carpetas.

¿VS Code Insiders vale la pena? Es la versión de pruebas, se actualiza a diario. Útil si quieres funciones nuevas antes de tiempo o eres desarrollador de extensiones. Para trabajo diario, quédate en la estable.

OS X Software #Apple Silicon #configuracion #desarrollo web #MacOS #Node.js #Visual Studio Code