DescubreApple

Apple, Mac, iPhone, iPad

OS X

How to set up Visual Studio Code on Mac for professional web development

Step-by-step guide to getting Visual Studio Code ready for work on a Mac with Apple Silicon: installation, extensions, Zsh and Homebrew integration, and real-world settings for React, Vue and Node.js.

JG
By · 9 min readAI-generated images
Cómo configurar Visual Studio Code en Mac para desarrollo web profesional
Como Configurar Visual Studio Code En Mac Para Desarrollo Web Profesional

Setting up a web development environment on a Mac with Visual Studio Code isn’t complicated, but the difference between “I have it installed” and “I have it configured to work seriously” amounts to several hours and a handful of tweaks almost nobody tells you about. This guide covers exactly that: getting VS Code ready for real coding on a MacBook with Apple Silicon, with useful extensions (not the 40 trendy ones), integration with the Zsh and Homebrew terminal, and a configuration that holds up on real React, Vue or Node.js projects.

Estimated time: 30 to 45 minutes if you start from scratch. Valid for macOS Sequoia 15.x and Ventura 13.x on any Mac with an M1, M2, M3 or M4 chip.

Prerequisites

Before touching VS Code, it’s worth having your Mac minimally prepared.

  • macOS 13 Ventura or later. VS Code runs on earlier versions, but many modern extensions require 13+.
  • Xcode Command Line Tools. They install automatically the first time you run git in the terminal, or manually with xcode-select --install.
  • Homebrew installed. It’s the cleanest way to manage Node, Git and utilities. Instructions at brew.sh.
  • GitHub account if you plan to use Copilot or sync settings.

Quick reference for the recommended environment:

Component Recommended version (2026)
macOS Sequoia 15.4 or later
Visual Studio Code 1.95+ (Universal / Apple Silicon)
Node.js 22 LTS
Git 2.47+
Shell Zsh (default on macOS)
Homebrew 4.4+

Download the correct build for Apple Silicon

This is where mistakes already happen. Go to code.visualstudio.com and download the Apple Silicon binary, not the Intel or Universal one. The Universal build works, but it’s twice the size and offers nothing extra if your Mac is an M1, M2, M3 or M4.

To check your chip: Apple menu → About This Mac. If you see “Apple M…”, you need the Silicon build.

Alternative via Homebrew, more convenient if you already use it:

brew install --cask visual-studio-code

Homebrew detects the architecture and downloads the correct package. Updating later is simply brew upgrade --cask visual-studio-code, with no need to download the DMG by hand.

First installation and basic settings

Drag VS Code to Applications (if you used the DMG) and open it. On first launch:

  1. Accept opening the app downloaded from the Internet.
  2. Choose a theme. Default Dark Modern works well; if you work a lot during the day, GitHub Light Default is easier on the eyes.
  3. Skip the sync step for now; we’ll get to it later.

The first thing worth doing is enabling the code command in the terminal. Open the command palette with ⌘ + Shift + P, type “shell command” and choose Shell Command: Install ‘code’ command in PATH. From then on, code . from any folder opens that project in VS Code.

Configuring Zsh and terminal integration

macOS has used Zsh by default since Catalina. VS Code detects it, but it’s worth fine-tuning the integrated terminal.

Open Settings with ⌘ + , and search for:

  • terminal.integrated.defaultProfile.osx → set it to zsh.
  • terminal.integrated.fontSize → 13 or 14 if you have a 14″ Retina screen.
  • terminal.integrated.fontFamily → MesloLGS NF if you plan to use Powerlevel10k, or leave the system default.

For a decent Zsh experience, install Oh My Zsh:

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

And add two heavily used plugins: zsh-autosuggestions and zsh-syntax-highlighting. Install them with Homebrew (brew install zsh-autosuggestions zsh-syntax-highlighting) and enable them by adding two lines at the end of your ~/.zshrc. The official documentation for each explains the exact path for your system.

Restart VS Code’s integrated terminal (⌃ + ` to open it) and you now have smart autocompletion.

Installing Node.js with Homebrew (and why not with the official installer)

You can download the .pkg from nodejs.org, sure. But if one day you want to move from Node 22 to Node 24, or keep two versions for two projects, you’ll regret it.

The sensible option is nvm (Node Version Manager):

brew install nvm
mkdir ~/.nvm

Add to your ~/.zshrc:

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

Reload with source ~/.zshrc and you can run nvm install 22, nvm use 22, nvm install 20, switch between versions per project, and so on. VS Code picks it up automatically in the integrated terminal.

Essential extensions for web development

The trap here is installing twenty extensions “just in case”. VS Code slows down and many of them conflict with each other. These are the ones that add real value:

Base for any web project:

  • ESLint (Microsoft) — linting for JS/TS. Essential.
  • Prettier – Code formatter — automatic formatting. Set it as the default formatter.
  • EditorConfig for VS Code — respects the .editorconfig files of other people’s projects.
  • GitLens — Git history inside the editor. The free version is more than enough.

For React / Next.js:

  • ES7+ React/Redux/React-Native snippets — quick snippets (rafce and friends).
  • Simple React Snippets if you prefer something lighter.

For Vue:

  • Vue – Official (formerly Volar). Install it and disable Vetur if you have it.
  • TypeScript Vue Plugin (Volar) if you work with TS.

For Node.js:

  • REST Client — test endpoints without leaving VS Code, an alternative to Postman.
  • DotENV — syntax for .env files.

Quality of life:

  • Path Intellisense — autocompletes file paths.
  • Error Lens — shows errors inline on the line, not just underlined.
  • Auto Rename Tag — renames HTML/JSX tag pairs together.

Avoid “all-in-one” packs like “React Extension Pack”. They bring in things you don’t use and slow down startup.

settings.json tweaks that make a difference

Open the palette with ⌘ + Shift + P and search for “Preferences: Open User Settings (JSON)”. Add or adjust:

{
  "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" }
}

Key points: formatOnSave with Prettier ends style debates, linkedEditing renames HTML tags in pairs, and turning off the minimap gives you more real space on a 13″ MacBook Air.

Install JetBrains Mono with brew install --cask font-jetbrains-mono if you don’t have it. Fira Code or Cascadia Code also work well with ligatures.

Git and GitHub: clean authentication

Set your global identity:

git config --global user.name "Your Name"
git config --global user.email "you@email.com"
git config --global init.defaultBranch main

To authenticate with GitHub, the modern route is Microsoft’s GitHub Pull Requests and Issues extension. On your first push it launches the OAuth flow in the browser and stores credentials in the macOS Keychain. No manual tokens, no ~/.netrc.

If you prefer SSH, generate the key with ssh-keygen -t ed25519 -C "you@email.com" and add the public key in GitHub → Settings → SSH keys.

GitHub Copilot and alternatives

Copilot costs $10 a month (around €9.50 in 2026, billed in dollars) for individual use, free for verified students and maintainers of popular open source projects. It installs as an extension and authenticates with the same GitHub account.

Serious alternatives:

  • Codeium — free for individual use, official extension on the Marketplace.
  • Continue — open source, lets you connect your own model (Claude, GPT-4, local models via Ollama).
  • Cursor — not an extension, it’s a full fork of VS Code. If Copilot falls short for you, it’s worth a trial.

For frontend web development, Copilot is still the most polished for inline autocompletion. Codeium is very close and costs nothing.

Syncing settings across several Macs

If you have a MacBook Pro and a Mac mini, turn on Settings Sync: command palette → “Settings Sync: Turn On”. You can choose to sync settings, extensions, keybindings, snippets and UI state. It’s stored in your Microsoft or GitHub account.

Manual alternative if you don’t want accounts: save your settings.json and extension list in a private GitHub repo. Installed extensions are listed with:

code --list-extensions > extensions.txt

And reinstall them on the other Mac with a simple loop.

Common problems

VS Code is slow when opening large projects. Exclude node_modules and .next from indexing in settings.json:

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

The code command doesn’t work in the terminal. Run “Shell Command: Install ‘code’ command in PATH” again. If it still fails, check that /usr/local/bin is in your $PATH.

Prettier doesn’t format on save. Check that it’s set as the default formatter and that the project doesn’t have a .prettierignore excluding the file.

The terminal can’t find nvm or node. This usually happens because ~/.zshrc isn’t being loaded. Verify that the integrated terminal uses Zsh and not Bash: Settings → search for terminal.integrated.defaultProfile.osx.

Copilot suggests nothing. Check that you’re signed in (icon in the bottom bar) and that the file’s language isn’t on the extension’s exclusion list.

Alternatives to VS Code on Mac

VS Code isn’t the only decent editor for Mac, though it’s the most widely used. If performance matters a lot to you, take a look at Zed (native, written in Rust, starts in under a second). For heavy JavaScript/TypeScript work, WebStorm from JetBrains remains more powerful for refactoring, although it costs €169 a year for individual use after the first year.

If you work a lot with containers, it’s worth complementing VS Code with Docker Desktop properly configured on Apple Silicon so it doesn’t drain your battery. And if you’re going to code many hours a day, the difference between the MacBook keyboard and an external mechanical keyboard shows up in your wrists after a month of use.

FAQ

Does VS Code run well on an 8 GB MacBook Air M3? Yes, for small and medium projects (React, Vue, static sites). With large monorepos or several active Docker containers, 16 GB will be much appreciated.

Is it worth paying for Copilot if I already use ChatGPT? It depends. Copilot integrates inline suggestions while you type, something ChatGPT in the browser doesn’t do. If you constantly copy and paste code between tabs, Copilot saves you time. If you only ask occasional questions, it doesn’t.

Can I use VS Code for iOS or native Mac development? Technically yes with Swift extensions, but Xcode remains mandatory for building and signing. For pure Swift without Apple apps, VS Code with the official Swift extension works well.

How do I completely uninstall VS Code? Drag the app to the Trash and delete ~/Library/Application Support/Code and ~/.vscode. If you installed it with Homebrew, run brew uninstall --cask visual-studio-code and then delete those folders.

Is VS Code Insiders worth it? It’s the testing version, updated daily. Useful if you want new features early or you develop extensions. For daily work, stick with the stable release.

JG

More in OS X

🇬🇧 EN