图文分步教程
在 VS Code 中使用 Claude Code：从安装到跑起一个应用
一份跟着真实会话走的 VS Code Claude Code 官方插件图解教程——先装 CLI、完成初始化，再装市场里的官方扩展，最后用一条提示词构建并跑通一个 CRUD 应用。
约 5 分钟 · 14 个图文步骤
先说结论
用一条 curl 命令装好 Claude Code CLI，首次运行 claude 选好主题并信任项目文件夹，再去 VS Code 市场安装 Anthropic 官方发布的 Claude Code for VS Code 扩展。扩展会在编辑器旁加一个 Claude 面板：读取你的工作区、回答代码问题，并在每次写文件前弹窗求批准。下面的教程按真实会话从头走到尾：安装、用一道硬件题验证、装扩展、交付一个小型 Express CRUD 应用。
来源视频
本页每一帧画面都来自 ProgrammingKnowledge 的录屏——Ubuntu 24.04 上的 Claude Code 2.1.86 会话，录制于 2026 年 4 月。
截图带出处使用，每一步都链回视频对应秒数。旁白不照抄——上方文字依据屏幕内容撰写，并与 code.claude.com/docs 核对。
第 1 部分 · 安装 Claude Code CLI
扩展驱动的是同一个 Claude Code 二进制，所以先装终端版。以下步骤在 Ubuntu 24.04 上完成；同一份文档也列出 macOS、Homebrew 和 Windows 命令。
- 1
打开官方 Quickstart
搜索 "claude code install"，点进 code.claude.com/docs/quickstart。Step 1 按操作系统列出安装命令——macOS/Linux 的 curl 一行命令、Homebrew，以及单独的 Windows PowerShell 和 Windows CMD 区块。
Quickstart 页面按操作系统分组列出安装命令。看视频 0:30 处 - 2
运行 curl 安装脚本
把 curl -fsSL https://claude.ai/install.sh | bash 粘进终端。跑完会出现截图里的横幅：Claude Code successfully installed，版本 2.1.86，位置 ~/.local/bin/claude，并提示运行 claude --help。
安装成功时会打印版本号和二进制位置。看视频 1:05 处 - 3
首次运行先选文本风格
运行 claude，第一屏让你选终端里的文本风格——默认是 Dark mode，录屏也保留了这个选择。六个选项覆盖浅色、色盲友好和 ANSI 限色终端。
主题选择器自带 Hello World 小程序做实时预览。看视频 1:28 处 - 4
信任你要工作的文件夹
在读取任何内容之前，Claude 会先显示 Accessing workspace 安全确认：文件夹路径、一句"Claude Code'll be able to read, edit, and execute files here"，以及安全指南链接。自己的项目选 1. Yes, I trust this folder。
提示里写明了所信任的确切路径——这里是 /home/yoogeshpatel。看视频 2:38 处
第 2 部分 · 验证安装是否成功
在打开 VS Code 之前，用一条提问和一条斜杠命令看清 CLI 如何请求权限、东西放在哪里。
- 5
批准第一条 shell 命令
问一句"what are the specs of this computer?"，Claude 会列出想跑的命令——lscpu、free -h、nproc、lspci。对话框给三个选项：1. Yes 只准这一次，2. Yes and don't ask again 对这条命令不再询问，3. No 拒绝。
权限弹窗在执行前列出完整命令行。看视频 3:40 处 - 6
读懂验证报告
几秒后答案以结构化报告呈现：CPU（Intel Core Ultra 7 155H，16 核）、内存（共 62 GB）、存储（914 GB）、显卡，以及系统一行——Ubuntu 24.04.2 LTS。能拿到这么具体的答案，说明 CLI 已经装对。
一个具体而正确的答案，就是安装最快的冒烟测试。看视频 4:00 处 - 7
逛一遍斜杠命令
输入 / 打开命令菜单；录屏停在 /skills——它回答 No skills found，并指出技能存放的两个位置：.claude/skills/ 或 ~/.claude/skills/。装上扩展后，这个菜单里的一切用法不变。
/skills 顺便告诉你自定义技能该放哪。看视频 5:00 处
第 3 部分 · 安装 VS Code 扩展
官方扩展由 Anthropic 发布在 VS Code 市场里——不需要第三方账号，也没有额外安装步骤。
- 8
从市场安装扩展
在 VS Code 打开扩展视图，搜索 "claude code"，点开发布者为 Anthropic 的那条——标识符 anthropic.claude-code，录制时安装量 810 万。要求 VS Code 1.98.0 或更高；点 Install。
安装前先在市场页面看清发布者、安装量和版本。看视频 5:30 处 - 9
走一遍 Getting Started 标签页
装完会打开一个 Welcome 标签：Get started with Claude Code、一张 Your AI coding partner 卡片，以及三行清单——Open Claude Code、Chat with Claude、Past conversations。还提到终端备选：命令面板里的 Claude Code: Open in Terminal。
引导页只出现一次；点 Mark Done 即可清掉。看视频 5:48 处 - 10
打开 Claude 面板
活动栏里的 Claude Code 图标会在编辑器旁打开一个侧边面板。空状态写得直白：What to do first? Ask about this codebase or we can start writing code。底部还提示可在 Settings 里切回终端体验。
面板就在编辑器旁边，共享同一个工作区上下文。看视频 6:46 处
第 4 部分 · 从面板构建并运行一个应用
在 Claude 面板里发一条提示词就能搭出 Express CRUD API。每次写文件都会先展示 diff 并请求批准。
- 11
发一条真正的构建提示词
录屏在一条消息里写全了规格：扮演资深后端开发，用 Express 写一个简单的 Node.js CRUD 应用，不用数据库——用内存数组——列出端点和校验要求。这么具体的提示词第一次就能得到能跑的脚手架。
一条消息同时给出角色、技术栈和验收标准。看视频 7:02 处 - 12
接受之前先读 diff
Claude 先给计划再写文件。每个 Write 步骤都会打开绿色 diff——这里是 app.js：跑在 3000 端口的 Express 服务器、内存里的 books 数组、GET /items 路由——写盘之前你能逐行看清要落地的内容。
绿色行是 Claude 的提议；未经你批准不会写入任何内容。看视频 7:22 处 - 13
批准一次，或批准整个会话
每次写文件都会弹窗——这次问的是 Allow write to app.js?——三个选项：1. Yes 只准这次，2. Yes, allow all edits this session 本会话全部放行，3. No。脚手架类工作选第二项能少打扰；先把你看过的 diff 复核一遍。
弹窗写明了要写的文件——这里的 app.js 有 232 行。看视频 7:29 处 - 14
运行并测试 Claude 写好的应用
最后的回复先打勾确认校验和错误处理，然后给出运行清单：npm install、npm start、自动重启用的 npm run dev，外加每条端点的 curl 命令——GET /items、GET /items/:id、POST、PUT、DELETE——全部指向 localhost:3000。
回复末尾是每条路由可直接粘贴的 curl 命令。看视频 7:48 处