Как настроить Visual Studio Code на Mac для профессиональной веб-разработки

Настроить среду веб-разработки на Mac с Visual Studio Code несложно, но разница между «у меня установлено» и «настроено для серьёзной работы» — это несколько часов и пара настроек, о которых почти никто не рассказывает. Это руководство как раз о том, чтобы подготовить VS Code к настоящей работе на MacBook с Apple Silicon: полезные расширения (а не 40 модных), интеграция с терминалом Zsh и Homebrew, а также конфигурация, которая выдерживает реальные проекты на React, Vue или Node.js.

Примерное время: от 30 до 45 минут, если начинаете с нуля. Подходит для macOS Sequoia 15.x и Ventura 13.x на любом Mac с чипом M1, M2, M3 или M4.

Необходимые условия

Прежде чем трогать VS Code, стоит минимально подготовить Mac.

macOS 13 Ventura или новее. VS Code работает и на более старых версиях, но многие современные расширения требуют 13+.
Command Line Tools для Xcode. Устанавливаются сами при первом запуске git в терминале или вручную командой xcode-select --install.
Установленный Homebrew. Это самый аккуратный способ управлять Node, Git и утилитами. Инструкции на brew.sh.
Аккаунт GitHub, если планируете использовать Copilot или синхронизацию настроек.

Краткая сводка рекомендуемой среды:

Компонент	Рекомендуемая версия (2026)
macOS	Sequoia 15.4 или новее
Visual Studio Code	1.95+ (Universal / Apple Silicon)
Node.js	22 LTS
Git	2.47+
Shell	Zsh (по умолчанию в macOS)
Homebrew	4.4+

Скачайте правильную версию для Apple Silicon

Здесь уже часто ошибаются. Зайдите на code.visualstudio.com и скачайте бинарный файл Apple Silicon, а не Intel или Universal. Universal работает, но весит вдвое больше и ничего не даёт, если у вас Mac на M1, M2, M3 или M4.

Чтобы проверить чип: меню Apple → «Об этом Mac». Если видите «Apple M…», выбирайте Silicon.

Альтернатива через Homebrew, удобнее, если он у вас уже есть:

brew install --cask visual-studio-code

Homebrew сам определит архитектуру и загрузит нужный пакет. Кроме того, обновлять его потом можно командой brew upgrade --cask visual-studio-code, не скачивая DMG вручную.

Первая установка и базовые настройки

Перетащите VS Code в «Программы» (если использовали DMG) и откройте. При первом запуске:

Подтвердите открытие приложения, загруженного из интернета.
Выберите тему. Default Dark Modern подойдёт; если много работаете днём, GitHub Light Default меньше утомляет глаза.
Пропустите шаг синхронизации пока, к нему вернёмся позже.

В первую очередь включите команду code в терминале. Откройте палитру команд сочетанием ⌘ + Shift + P, введите «shell command» и выберите Shell Command: Install ‘code’ command in PATH. После этого code . из любой папки откроет проект в VS Code.

Настройка интеграции с Zsh и терминалом

macOS использует Zsh по умолчанию с версии Catalina. VS Code его определяет, но встроенный терминал стоит немного настроить.

Откройте настройки сочетанием ⌘ + , и найдите:

terminal.integrated.defaultProfile.osx → укажите zsh.
terminal.integrated.fontSize → 13 или 14, если у вас Retina-экран 14″.
terminal.integrated.fontFamily → MesloLGS NF, если будете использовать Powerlevel10k, или оставьте системный шрифт.

Для нормальной работы Zsh установите Oh My Zsh:

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

И добавьте два часто используемых плагина: zsh-autosuggestions и zsh-syntax-highlighting. Их можно установить через Homebrew (brew install zsh-autosuggestions zsh-syntax-highlighting) и активировать, добавив две строки в конец вашего ~/.zshrc. Официальная документация каждого из них подскажет точный путь для вашей системы.

Перезапустите встроенный терминал VS Code (⌃ + ` открывает его) — и умное автодополнение готово.

Установка Node.js через Homebrew (и почему не через официальный установщик)

Вы можете скачать .pkg с nodejs.org, и это сработает. Но если когда-нибудь захотите перейти с Node 22 на Node 24 или держать две версии для двух проектов, потом пожалеете.

Разумный вариант — nvm (Node Version Manager):

brew install nvm
mkdir ~/.nvm

Добавьте в свой ~/.zshrc:

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

Перезагрузите конфигурацию командой source ~/.zshrc, и можно выполнять nvm install 22, nvm use 22, nvm install 20 и переключаться между версиями для каждого проекта. VS Code подхватывает это автоматически во встроенном терминале.

Основные расширения для веб-разработки

Ловушка здесь — установить двадцать расширений «на всякий случай». VS Code от этого тормозит, а многие из них конфликтуют друг с другом. Вот те, что дают реальную пользу:

Основа для любого веб-проекта:

ESLint (Microsoft) — линтинг JS/TS. Обязательно.
Prettier – Code formatter — автоматическое форматирование. Назначьте его форматировщиком по умолчанию.
EditorConfig for VS Code — учитывает .editorconfig чужих проектов.
GitLens — история Git прямо в редакторе. Бесплатной версии более чем достаточно.

Для React / Next.js:

ES7+ React/Redux/React-Native snippets — быстрые сниппеты (rafce и подобные).
Simple React Snippets, если хотите что-то полегче.

Для Vue:

Vue – Official (ранее Volar). Установите и отключите Vetur, если он у вас есть.
TypeScript Vue Plugin (Volar), если работаете с TS.

Для Node.js:

REST Client — тестирование эндпоинтов без выхода из VS Code, альтернатива Postman.
DotENV — подсветка синтаксиса для файлов .env.

Удобство работы:

Path Intellisense — автодополнение путей к файлам.
Error Lens — показывает ошибки прямо в строке, а не только подчёркиванием.
Auto Rename Tag — переименовывает парные HTML/JSX-теги.

Не ставьте наборы «всё в одном» вроде «React Extension Pack». Они тянут то, что вам не нужно, и замедляют запуск.

Настройки settings.json, которые действительно важны

Откройте палитру командой ⌘ + Shift + P и найдите «Preferences: Open User Settings (JSON)». Добавьте или измените:

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

Ключевые моменты: formatOnSave с Prettier избавляет от споров о стиле, linkedEditing переименовывает парные HTML-теги, а отключение миникарты даёт больше реального места на MacBook Air 13″.

Установите JetBrains Mono командой brew install --cask font-jetbrains-mono, если её нет. Fira Code или Cascadia Code тоже хорошо работают с лигатурами.

Git и GitHub: чистая аутентификация

Настройте глобальную идентификацию:

git config --global user.name "Ваше Имя"
git config --global user.email "you@email.com"
git config --global init.defaultBranch main

Для аутентификации в GitHub современный путь — расширение GitHub Pull Requests and Issues от Microsoft. При первом push оно запускает OAuth-процесс в браузере и сохраняет учётные данные в Связке ключей macOS. Без ручных токенов и без ~/.netrc.

Если предпочитаете SSH, создайте ключ командой ssh-keygen -t ed25519 -C "you@email.com" и добавьте открытый ключ в GitHub → Settings → SSH keys.

GitHub Copilot и альтернативы

Copilot стоит 10 $ в месяц (около 9,50 € в 2026 году, оплата в долларах) для индивидуального использования; бесплатен для проверенных студентов и мейнтейнеров популярных open source-проектов. Устанавливается как расширение и авторизуется под тем же аккаунтом GitHub.

Серьёзные альтернативы:

Codeium — бесплатен для индивидуального использования, официальное расширение в Marketplace.
Continue — открытый код, позволяет подключить собственную модель (Claude, GPT-4, локальные модели через Ollama).
Cursor — не расширение, а полноценный форк VS Code. Если Copilot вам мало, стоит попробовать.

Для фронтенд-разработки Copilot по-прежнему самый отполированный в построчном автодополнении. Codeium очень близок к нему и ничего не стоит.

Синхронизация настроек между несколькими Mac

Если у вас MacBook Pro и Mac mini, включите Settings Sync: палитра команд → «Settings Sync: Turn On». Можно синхронизировать настройки, расширения, сочетания клавиш, сниппеты и состояние интерфейса. Данные хранятся в вашем аккаунте Microsoft или GitHub.

Ручная альтернатива, если не хотите использовать аккаунты: сохранить settings.json и список расширений в приватном репозитории GitHub. Список установленных расширений выводится командой:

code --list-extensions > extensions.txt

Переустанавливаются на другом Mac простым циклом.

Частые проблемы

VS Code медленно открывает большие проекты. Исключите node_modules и .next из индексации в settings.json:

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

Команда code не работает в терминале. Повторите «Shell Command: Install ‘code’ command in PATH». Если не помогло, проверьте, что /usr/local/bin есть в вашем $PATH.

Prettier не форматирует при сохранении. Убедитесь, что он назначен форматировщиком по умолчанию и что в проекте нет .prettierignore, исключающего файл.

Терминал не находит nvm или node. Обычно причина в том, что ~/.zshrc не загружается. Проверьте, что встроенный терминал использует Zsh, а не Bash: Настройки → найдите terminal.integrated.defaultProfile.osx.

Copilot ничего не предлагает. Проверьте, что вы авторизованы (значок на нижней панели), и что язык файла не находится в списке исключений расширения.

Альтернативы VS Code на Mac

VS Code не единственный достойный редактор для Mac, но самый популярный. Если производительность для вас критична, посмотрите на Zed (нативный, написан на Rust, запускается менее чем за секунду). Для тяжёлого JavaScript/TypeScript WebStorm от JetBrains по-прежнему мощнее в рефакторинге, хотя для индивидуального использования стоит 169 € в год после первого года.

Если много работаете с контейнерами, имеет смысл дополнить VS Code грамотно настроенным Docker Desktop на Apple Silicon, чтобы он не выедал батарею. А если проводите за кодом много часов в день, разница между клавиатурой MacBook и внешней механической клавиатурой ощутима для запястий уже через месяц использования.

FAQ

Работает ли VS Code нормально на MacBook Air M3 с 8 ГБ? Да, для small и medium проектов (React, Vue, статические сайты). Для больших монорепозиториев или при нескольких активных контейнерах Docker 16 ГБ будут очень кстати.

Стоит ли платить за Copilot, если я уже пользуюсь ChatGPT? Зависит от задачи. Copilot предлагает подсказки прямо во время набора, чего ChatGPT в браузере не делает. Если вы постоянно копируете код между вкладками, Copilot сэкономит время. Если задаёте лишь редкие вопросы, он не нужен.

Можно ли использовать VS Code для iOS или нативной разработки под Mac? Технически да, с расширениями для Swift, но для сборки и подписи по-прежнему требуется Xcode. Для чистого Swift без приложений Apple VS Code с официальным расширением Swift работает хорошо.

Как полностью удалить VS Code? Перетащите приложение в корзину и удалите ~/Library/Application Support/Code и ~/.vscode. Если ставили через Homebrew, выполните brew uninstall --cask visual-studio-code и затем удалите эти папки.

Стоит ли использовать VS Code Insiders? Это тестовая версия, которая обновляется каждый день. Полезна, если хотите новые функции раньше времени или разрабатываете расширения. Для повседневной работы лучше оставаться на стабильной версии.