首页

在 Mac 的 VS Code 中使用 Claude Code

你已在 Mac 上安装了 Claude Code，现在需要一个可视化编辑器来处理代码。VS Code 让你可视化编辑文件，同时在集成终端中运行 Claude Code。可以把它想象成在一个窗口中同时拥有代码编辑器和 AI 助手。

核心概念

• VS Code - 微软开发的免费代码编辑器，可在 Mac 上运行
• Integrated Terminal（集成终端） - VS Code 内置终端面板，可在其中运行 Claude Code
• Explorer Panel（资源管理器面板） - VS Code 左侧文件浏览器

准备工作

• 完成在 Mac 上安装 Claude Code
• 完成 VS Code 入门指南
• 10-15 分钟

步骤 1：启动 VS Code

• 打开访达（Finder）并进入应用程序（Applications）
• 找到 Visual Studio Code 并双击打开
• 如果看到警告”Visual Studio Code is an app downloaded from the internet（Visual Studio Code 是从互联网下载的应用）”，点击 Open（打开）
• VS Code 会打开并显示欢迎标签页，你可以关闭这个标签页

提示：在 Dock 中右键点击 VS Code，选择 选项 > 在程序坞中保留（Options > Keep in Dock），方便以后快速访问。

步骤 2：创建项目文件夹

• 打开访达（Finder）
• 点击左侧边栏中的文稿（Documents）
• 点击菜单栏中的文件 > 新建文件夹（File > New Folder）
• 将文件夹命名为 test_claude

步骤 3：在 VS Code 中打开文件夹

• 在 VS Code 中，点击菜单栏中的 File（文件）> Open Folder（打开文件夹）
• 导航到文稿（Documents），选择 test_claude 文件夹
• 点击 Open（打开）
• 如果提示”Do you trust the authors of the files in this folder?（你信任此文件夹中文件的作者吗？）”，点击 Yes, I trust the authors（是的，我信任这些作者）

现在你应该能在左侧资源管理器面板中看到 TEST_CLAUDE。

步骤 4：启动 Claude Code 并登录

• 打开新终端：点击菜单栏中的 Terminal（终端）> New Terminal（新建终端）
• 终端面板会出现在 VS Code 底部
• 在终端中输入：

  claude
  

• 如果 Claude Code 要求你登录，请按照安装教程中的登录步骤操作。Claude Code 需要付费 Claude 套餐（如 Pro 或 Max）或 Anthropic Console 账户——免费套餐不包含 Claude Code。
• 你会看到欢迎消息和 Claude Code 提示符
• 现在你可以在 VS Code 中编辑文件的同时使用 Claude Code 了

注意：只需登录一次，以后启动时会直接显示欢迎消息。

步骤 5：测试工作流程

• 在 Claude Code 中输入：

  写一篇简短的文章，解释为什么 LLM 喜欢使用 Markdown 格式。保存为 article.md
  

• Claude Code 创建文件，你会看到 article.md 出现在左侧资源管理器面板中
• 点击 article.md 在编辑器中查看
• 预览格式化后的文章：在 article.md 编辑器内右键点击，选择 Markdown Preview Enhanced: Open Preview to the Side（即 VS Code 入门指南中安装的扩展）。如果你没有安装该扩展，可改为右键点击 article.md 标签页，选择 Open Preview（打开预览）
• 你会看到渲染后的 Markdown，包括标题、项目符号等格式

稍后在 VS Code 中重新打开 Claude

关闭 VS Code 后，以下是返回项目的方法：

• 方法 A： 打开 VS Code，点击 File > Open Recent（文件 > 打开最近使用），然后选择 test_claude
• 方法 B： 打开终端（Terminal），使用 cd ~/Documents/test_claude 导航到你的项目，然后输入 code .

VS Code 会记住最近使用的文件夹，使用方法 A 的 Open Recent（打开最近使用）通常最快。

下一步

• 让 Claude Code 解释现有代码库：”解释这个项目做什么”
• 让 Claude Code 帮助你编写新功能：”添加一个计算列表平均值的函数”
• 使用 Claude Code 修复错误：”这段代码出现错误，你能修复它吗？”
• 尝试 Claude Code 扩展，获得带内联差异显示的可视化聊天面板。在 VS Code 终端中运行 claude 通常会自动为你安装它（如果没有，在扩展中搜索”Claude Code”）。打开任意文件，然后点击编辑器右上角的 Spark 图标

故障排除

• 终端显示”zsh”但 Claude Code 无法启动 - 确保已正确安装 Claude Code，运行 claude --version 验证
• 终端（Terminal）中提示”code”命令未找到 - 在 VS Code 中，点击 View（查看）> Command Palette（命令面板），输入”shell command”，选择 Shell Command: Install ‘code’ command in PATH（Shell 命令：在 PATH 中安装 ‘code’ 命令）
• VS Code 因来自未识别的开发者而无法打开 - 前往 System Settings > Privacy & Security（系统设置 > 隐私与安全性） 并点击 Open Anyway（仍要打开）

工作流程概述

• VS Code 提供可视化编辑界面
• Integrated Terminal（集成终端） 在 VS Code 内运行 Claude Code
• 文件保存在文稿（Documents）文件夹中（或你选择的位置）
• 编辑器中编辑文件，终端中与 Claude Code 对话，两全其美

由 Steven Ge 创建于 2025 年 12 月 10 日。