Como configurar o Visual Studio Code no Mac para desenvolvimento web profissional

Montar um ambiente de desenvolvimento web no Mac com Visual Studio Code não é complicado, mas a diferença entre “está instalado” e “está configurado para trabalhar a sério” são várias horas e alguns ajustes que quase ninguém te conta. Este guia trata exatamente disso: deixar o VS Code pronto para programar de verdade num MacBook com Apple Silicon, com extensões úteis (não as 40 da moda), integração com o terminal Zsh e Homebrew, e uma configuração que aguenta projetos reais de React, Vue ou Node.js.

Tempo estimado: entre 30 e 45 minutos se começares do zero. Válido para macOS Sequoia 15.x e Ventura 13.x em qualquer Mac com chip M1, M2, M3 ou M4.

Requisitos prévios

Antes de tocar no VS Code, convém ter o Mac minimamente preparado.

• macOS 13 Ventura ou superior. O VS Code funciona em versões anteriores, mas muitas extensões modernas exigem 13+.
• Command Line Tools do Xcode. Instalam-se sozinhas na primeira vez que executares git no terminal, ou manualmente com xcode-select --install.
• Homebrew instalado. É a via mais limpa para gerir Node, Git e utilitários. Instruções em brew.sh.
• Conta no GitHub se vais usar o Copilot ou sincronizar definições.

Ficha rápida do ambiente recomendado:

Componente	Versão recomendada (2026)
macOS	Sequoia 15.4 ou superior
Visual Studio Code	1.95+ (Universal / Apple Silicon)
Node.js	22 LTS
Git	2.47+
Shell	Zsh (por defeito no macOS)
Homebrew	4.4+

Descarregar a versão correta para Apple Silicon

Aqui já se cometem erros. Vai a code.visualstudio.com e descarrega o binário Apple Silicon, não o Intel nem o Universal. O Universal funciona, mas pesa o dobro e não traz nada se o teu Mac for M1, M2, M3 ou M4.

Para confirmar o teu chip: menu Apple → Acerca deste Mac. Se vires “Apple M…”, estás em Silicon.

Alternativa via Homebrew, mais cómoda se já o usas:

brew install --cask visual-studio-code

O Homebrew deteta a arquitetura e descarrega o pacote correto. Além disso, atualizá-lo depois é brew upgrade --cask visual-studio-code sem teres de descarregar o DMG manualmente.

Primeira instalação e ajustes básicos

Arrasta o VS Code para Aplicações (se usaste o DMG) e abre-o. No primeiro arranque:

1. Aceita abrir a app descarregada da Internet.
2. Escolhe o tema. Default Dark Modern funciona bem; se trabalhas muito de dia, GitHub Light Default cansa menos a vista.
3. Salta o passo de sincronização por agora, veremos depois.

O primeiro que convém fazer: ativar o comando code no terminal. Abre a paleta de comandos com ⌘ + Shift + P, escreve “shell command” e escolhe Shell Command: Install ‘code’ command in PATH. A partir daí, code . a partir de qualquer pasta abre-te o projeto no VS Code.

Configurar a integração com Zsh e o terminal

O macOS usa Zsh por defeito desde o Catalina. O VS Code deteta-o, mas convém afinar o terminal integrado.

Abre as Definições com ⌘ + , e procura:

• terminal.integrated.defaultProfile.osx → define como zsh.
• terminal.integrated.fontSize → 13 ou 14 se o teu ecrã for Retina de 14″.
• terminal.integrated.fontFamily → MesloLGS NF se fores usar o Powerlevel10k, ou deixa a do sistema.

Para uma experiência decente em Zsh, instala o Oh My Zsh:

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

E acrescenta dois plugins muito usados: zsh-autosuggestions e zsh-syntax-highlighting. Instalam-se com o Homebrew (brew install zsh-autosuggestions zsh-syntax-highlighting) e ativam-se acrescentando duas linhas ao final do teu ~/.zshrc. A documentação oficial de cada um explica o caminho exato consoante o teu sistema.

Reinicia o terminal integrado do VS Code (⌃ + ` para o abrir) e já tens autocompletar inteligente.

Instalar Node.js com Homebrew (e porque não com o instalador oficial)

Podes descarregar o .pkg de nodejs.org, sim. Mas se um dia quiseres passar do Node 22 para o Node 24, ou manter duas versões para dois projetos, vais arrepender-te.

A opção sensata é o nvm (Node Version Manager):

brew install nvm
mkdir ~/.nvm

Acrescenta ao teu ~/.zshrc:

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

Recarrega com source ~/.zshrc e já podes fazer nvm install 22, nvm use 22, nvm install 20, alternar entre versões por projeto, etc. O VS Code deteta-o automaticamente no terminal integrado.

Extensões essenciais para desenvolvimento web

Aqui a armadilha é instalar vinte extensões “por si acaso”. O VS Code fica lento e muitas sobrepõem-se umas às outras. Estas são as que aportam valor real:

Base para qualquer projeto web:

• ESLint (Microsoft) — linting de JS/TS. Imprescindível.
• Prettier – Code formatter — formatação automática. Configura-o como formatador por defeito.
• EditorConfig for VS Code — respeita os .editorconfig de projetos alheios.
• GitLens — histórico do Git dentro do editor. A versão gratuita chega e sobra.

Para React / Next.js:

• ES7+ React/Redux/React-Native snippets — snippets rápidos (rafce e companhia).
• Simple React Snippets se preferires algo mais leve.

Para Vue:

• Vue – Official (antes Volar). Instala-a e desativa o Vetur se o tiveres.
• TypeScript Vue Plugin (Volar) se trabalhas com TS.

Para Node.js:

• REST Client — testar endpoints sem sair do VS Code, alternativa ao Postman.
• DotENV — sintaxe para os ficheiros .env.

Qualidade de vida:

• Path Intellisense — autocompleta caminhos de ficheiros.
• Error Lens — mostra os erros na linha, não apenas sublinhados.
• Auto Rename Tag — renomeia etiquetas HTML/JSX em par.

Evita instalar packs “tudo em um” tipo “React Extension Pack”. Trazem coisas que não usas e atrasam o arranque.

Ajustes de settings.json que fazem diferença

Abre a paleta com ⌘ + Shift + P e procura “Preferences: Open User Settings (JSON)”. Acrescenta ou 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" }
}

Pontos-chave: formatOnSave com o Prettier evita discussões de estilo, linkedEditing renomeia as etiquetas HTML em par, e desativar o minimapa liberta espaço real num MacBook Air de 13″.

Instala o JetBrains Mono com brew install --cask font-jetbrains-mono se ainda não o tens. Fira Code ou Cascadia Code também funcionam bem com ligaduras.

Git e GitHub: autenticação limpa

Configura a tua identidade global:

git config --global user.name "O Teu Nome"
git config --global user.email "tu@email.com"
git config --global init.defaultBranch main

Para autenticar no GitHub, a via moderna é a extensão GitHub Pull Requests and Issues da Microsoft. No primeiro push lança o fluxo OAuth no navegador e guarda as credenciais no Porta-chaves do macOS. Sem tokens manuais, sem ~/.netrc.

Se preferires SSH, gera a chave com ssh-keygen -t ed25519 -C "tu@email.com" e adiciona a pública em GitHub → Settings → SSH keys.

GitHub Copilot e alternativas

O Copilot custa 10 $ por mês (cerca de 9,50 € em 2026, faturação em dólares) para uso individual, gratuito para estudantes verificados e mantenedores de projetos open source populares. Instala-se como extensão e autentica-se com a mesma conta do GitHub.

Alternativas sérias:

• Codeium — gratuito para uso individual, extensão oficial no Marketplace.
• Continue — open source, permite ligar o teu próprio modelo (Claude, GPT-4, modelos locais via Ollama).
• Cursor — não é uma extensão, é um fork completo do VS Code. Se o Copilot te ficar curto, vale a pena experimentar.

Para desenvolvimento web frontend, o Copilot continua a ser o mais polido em autocompletar em linha. O Codeium está muito perto e não custa nada.

Sincronizar definições entre vários Macs

Se tens um MacBook Pro e um Mac mini, ativa o Settings Sync: paleta de comandos → “Settings Sync: Turn On”. Podes escolher sincronizar definições, extensões, atalhos, snippets e estado da interface. Guarda-se na tua conta da Microsoft ou do GitHub.

Alternativa manual se não quiseres contas: guardar o teu settings.json e a lista de extensões num repositório privado do GitHub. As extensões instaladas listam-se com:

code --list-extensions > extensions.txt

E reinstalam-se no outro Mac com um ciclo simples.

Problemas comuns

O VS Code fica lento ao abrir projetos grandes. Exclui o node_modules e o .next da indexação em settings.json:

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

O comando code não funciona no terminal. Volta a executar “Shell Command: Install ‘code’ command in PATH”. Se continuar a falhar, verifica que o /usr/local/bin está no teu $PATH.

O Prettier não formata ao guardar. Confirma que está como formatador por defeito e que o projeto não tem um .prettierignore a excluir o ficheiro.

O terminal não encontra o nvm ou o node. Normalmente é porque o ~/.zshrc não está a ser carregado. Verifica que o terminal integrado usa Zsh e não Bash: Definições → procura terminal.integrated.defaultProfile.osx.

O Copilot não sugere nada. Confirma que estás autenticado (ícone na barra inferior) e que a linguagem do ficheiro não está na lista de exclusão da extensão.

Alternativas ao VS Code no Mac

O VS Code não é o único editor decente para Mac, embora seja o mais usado. Se o desempenho te importa muito, dá uma olhada ao Zed (nativo, escrito em Rust, arranca em menos de um segundo). Para JavaScript/TypeScript pesado, o WebStorm da JetBrains continua a ser mais poderoso em refatorização, embora custe 169 € por ano para uso individual após o primeiro ano.

Se trabalhas muito com contentores, interessa-te complementar o VS Code com o Docker Desktop bem configurado em Apple Silicon para não consumir a bateria. E se vais programar muitas horas por dia, a diferença entre o teclado do MacBook e um teclado mecânico externo nota-se nos pulsos ao fim de um mês de uso.

FAQ

O VS Code funciona bem num MacBook Air M3 de 8 GB? Sim, para projetos pequenos e médios (React, Vue, sites estáticos). Com monorepos grandes ou vários contentores Docker ativos, 16 GB agradecem-se muito.

Vale a pena pagar o Copilot se já uso o ChatGPT? Depende. O Copilot integra sugestões em linha enquanto escreves, algo que o ChatGPT no navegador não faz. Se copias e colas código constantemente entre separadores, o Copilot poupa-te tempo. Se só consultas dúvidas pontuais, não.

Posso usar o VS Code para desenvolvimento iOS ou Mac nativo? Tecnicamente sim com extensões de Swift, mas o Xcode continua obrigatório para compilar e assinar. Para Swift puro sem apps da Apple, o VS Code com a extensão oficial de Swift funciona bem.

Como desinstalo o VS Code por completo? Arrasta a app para o lixo e apaga o ~/Library/Application Support/Code e o ~/.vscode. Se o instalaste com Homebrew, brew uninstall --cask visual-studio-code e depois apaga essas pastas.

Vale a pena o VS Code Insiders? É a versão de testes, atualiza-se diariamente. Útil se queres funcionalidades novas antes do tempo ou és desenvolvedor de extensões. Para o trabalho diário, fica na estável.