VibeCoding

Vibe Coding

参考文档：VibeCoding零基础实战开发

目录

环境配置

以下都是Windows 部署，其他系统看参考文档：VibeCoding零基础实战开发

nodejs安装

Node.js — 下載 Node.js®

  1. 下载对应的版本，得到node-v26.5.0-x64.msi文件
  • image-20260714141159540

  1. 双击打开运行 node-v24.16.0-x64.msi文件

  2. 一路下一步即可，注意尽量选择别安装在C盘

    • image.png

  3. 测试安装是否成功：node -v，npm -v

    • image-20260714141419826

修复 PowerShell 脚本运行禁止问题

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

image-20260714141630962

Python安装

Python环境部署

  1. 下载：得到python-3.14.6-amd64.exe文件

  2. 找到 python-3.14.6-amd64.exe安装包文件，双击运行打开；务必勾选 Add python.exe to PATH

    • 都勾选上，如下图

    • image-20260714142346296

  3. 如上图，勾选 2 个框后，点击 Customize installation，然后next

    • image-20260714142527077

  4. 如下图，选择安装路径，不要带有中文，不建议安装在 C 盘，写好路径点Install

    • image-20260714142643737

  5. 点击如下图

    • image-20260714142828799、

    • 在 Windows 上安装 Python 时，勾选"‌Disable path length limit‌"选项是解决系统默认 260 字符路径限制（MAX_PATH）的关键步骤。该操作会修改注册表，允许系统和 Python 处理长达 32,767 字符的文件路径，避免在安装大型包或深度嵌套目录时出现"[WinError 206] The filename or extension is too long"错误 。‌‌

      • 核心作用与原理

        • ‌突破系统限制‌：Windows 传统 API 默认限制路径长度为 260 字符，勾选该选项会将注册表项 LongPathsEnabled 设置为 1，从而启用长路径支持 。

        • ‌预防安装报错‌：pip 在安装过程中会解压文件到临时目录，若路径总长度超过 260 字符，未启用此选项会导致“文件不存在”的误报，启用后可彻底解决此类问题 。

        • ‌适用场景‌：对于现代 Windows 10/11 系统及 Python 3.6+ 版本，建议始终启用该功能以兼容复杂的开发环境 。‌‌

      • 注意事项

        • 虽然启用长路径支持能解决大多数路径问题，但极少数依赖旧版 Windows API 的遗留软件可能无法识别长路径。不过在纯 Python 开发环境中，这种情况极为罕见，‌推荐在安装时直接勾选该选项‌以确保后续开发顺畅 。‌‌

  6. 安装成功，点close

    • image-20260714143129365

  7. 验证，打开终端软件，执行如下命令：

    •   python --version
  pip --version
    • image-20260714143358117

    • 我装的3.14.6版本，显示的确实3.10.18版本。猜测是windows自带的python覆盖了我安装的。以下是解决方案

      • 使用py --version显示的就是3.14.6版本。py 命令能自动识别并调用你安装的最新版 3.14.6。
      • 如果你希望输入 python 时直接显示 3.14.6，需要调整系统环境变量：修正环境变量 PATH（让 python 命令指向新版）
        • 在系统变量或用户变量中找到 Path
          3. 把 D:\ToolOfProduction\Python\Python314\ 上移到 %LibreOffice% 那行之前.。（如果系统变量没有D:\ToolOfProduction\Python\Python314\ 就新增）
          4. 重新打开终端即可生效

git安装

  1. 下载：Git - Install for Windows。得到Git-2.55.0.2-64-bit.exe文件
  2. 双击Git-2.55.0.2-64-bit.exe文件，一路下一步即可，建议别安装在C盘
    • image-20260714150029775
  3. 验证，打开终端软件，执行如下命令：git -v
    • image-20260714150104444

Claude Code

Claude Code安装

  1. 打开终端程序，执行如下命令

    • # 如果网络环境不太好可以先执行这条命令
npm config set registry https://registry.npmmirror.com

# 执行如下命令，开始安装claude code
npm install -g @anthropic-ai/claude-code

    • 如图，执行后等待大概 1~5 分钟（视网络速度）

      image-20260714145114171

  2. 验证：claude --version

    • image-20260714145209968

Claude Code配置

本文参考 DeepSeek 官方文档：https://api-docs.deepseek.com/zh-cn/guides/coding_agents

  1. 注册 DeepSeek APIKEY

  2. 请修改并复制如下内容：

    • {
  "env": {
    "ANTHROPIC_BASE_URL": "https://api.deepseek.com/anthropic",
    "ANTHROPIC_AUTH_TOKEN": "你的 DeepSeek API Key",
    "ANTHROPIC_MODEL": "deepseek-v4-pro[1m]",
    "ANTHROPIC_DEFAULT_OPUS_MODEL": "deepseek-v4-pro[1m]",
    "ANTHROPIC_DEFAULT_SONNET_MODEL": "deepseek-v4-pro[1m]",
    "ANTHROPIC_DEFAULT_HAIKU_MODEL": "deepseek-v4-flash[1m]",
    "CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC": "1",
    "CLAUDE_CODE_EFFORT_LEVEL": "max"
  }
}

    • 其中上面第二个命令，注意替换内容为你的 APIKEY

  3. 打开如下文件（如果文件或文件夹没有请直接新建即可），将上述内容复制到文件中，并保存即可；

    • Windows 系统：C:\Users\你的用户名\.claude\settings.json

    • Mac 系统：~/.claude/settings.json

Claude Code测试

终端方式

  1. 打开终端，注意需要以管理员身份运行

    • image-20260714151921428

  2. 进入你想要的文件夹下，例如我的是D:\ToolOfProductionData\ClaudeCodeFile文件夹下

    • # cd /盘名字 路径
cd /d "D:\ToolOfProductionData\ClaudeCodeFile"

  3. 执行：mkdir ClaudeTest

  4. 执行：cd ClaudeTest

  5. 执行：claude，进入 claude code 界面（第一次进入）

  6. 如下图，选择文本风格，建议选择编号 1 自动控制（按键盘上下键控制）然后回车

    image-20260714152232747

  7. 会弹出一些安全警告，直接按回车即可，如下图：

    image.png

  8. 选择 yes信任文件夹，如下图

    image-20260714152414330

  9. 此时可以正常使用 claude code 了。先问一个简单问题， 你是什么大模型？。

    • 可以正常显示是 DeepSeek，表示和 DeepSeek 的集成一切 OK，可以正常使用了；（报错402是余额不足，充下钱就好了）
    • image-20260714152732645
Claude Code集成VS Code

  1. 下载VS Code

  2. 打开安装包

  3. 同意协议点击下一步，也是建议不安装在C盘

  4. 在 VS Code 的插件市场中搜索 claude，找到插件 Claude Code For VS Code由 Anthropic公司发布，点击安装即可。

    image-20260714162841200

  5. 为了方便开发可以将 Claude Code 插件移动到右侧边栏

    image-20260714162933879

  6. 测试

    image-20260714164014315

Claude Code个人总结

Claude Code 本质

Claude Code是一个agent，可以自定义使用的大模型，本质上就是一个 JavaScript/Node.js 项目，只不过它被打包成了一个可直接执行的命令行工具。

  1. 它是一个 npm 包
  2. 它的核心是 JavaScript 代码
  3. 就像其他 JS 工具一样
┌─────────────────────────────────────────────────────────┐
│                    Claude Code                          │
├─────────────────────────────────────────────────────────┤
│  本质：一个 Node.js 命令行工具                             │
│  形态：npm 全局包 (@anthropic-ai/claude-code)             │
│  语言：JavaScript/TypeScript                             │
│  运行：通过 Node.js 执行编译后的 JS 代码                    │
│  角色：AI Agent (能调用工具、执行命令、读写文件)              │
│  灵活性：可配置使用不同的大模型 API                          │
└─────────────────────────────────────────────────────────┘
会话

/resume显示，或者vscode直接显示

  • 发现会话是根据对应文件夹显示的，这个文件夹下执行的会话只在这个文件夹下显示。
  • 会话保存地址：C:\Users\dywang\.claude\projects

Claude Code模式

image-20260714165743319

  • Manual：Claude 每一次文件修改操作都会弹窗请求你的手动审批，不会自动改动任何代码。

  • Edit automatically：选中文字 / 整个文件的代码修改自动执行，无需确认；但终端 Shell 命令（npm、bash、pip 等）依旧需要手动审批。

  • Plan mode：Claude 先完整扫描工程代码、梳理修改方案，仅输出完整改造计划，不直接改动文件，等你确认方案后再执行编辑。

  • Auto：Claude 会自动执行所有操作，由一个后台分类模型评估操作安全，阻止超出范围或有风险的行为。

  • Effort（max）：控制 Claude 处理任务时的思考深度、上下文分析力度。

    • 拉高了效率低，但结果稳。
    • 拉低反之。

我们最合适选择 Plan mode，并拉满 Effort， 以非专业人士的视角，由 claude 给出方案并向我们解释方案，我们做出决策是最合适的。

Claude Code的CLAUDE.md文件

CLAUDE.md:你的项目"说明书”

  • CLAUDE.md是ClaudeCode中最重要的配置文件之一。它就像你给新来的实习生写的“项目入职手册”一一告诉Al这个项目的背景、技
    术栈、编码规范和当前进度。
  • 为什么CLAUDE.md 如此重要?
    • 没有CLAUDE.md时，ClaudeCode每次开始工作都要花时间”重新认识”你的项目。有了CLAUDE.md，它一启动就知道项目的全部背景，效率大幅提升。

CLAUDE.md的三个层级（由顶向下叠加生效）：

  • 很多人只知道CLAUDE.md可以放在项目根目录，其实官方设计了3个层级的CLAUDE.md，它们会同时生效、不冲突：

    层级 路径 作用范围 适合写什么
    全局级 ~/.claude/CLAUDE.md 所有项目都会读 个人习惯、身份、翻译偏好（如”永远用中文回答”、“我是xx、从事xx")
    项目级 项目根录/CLAUDE.md 仅本项目 项目技术栈、架构、规范、进度（可提交Git，团队共享）
    文件夹级 子目录/CLAUDE.md 仅该子目录 模块专属约定(如src/payment/CLAUDE.md写支付模块踩过的坑)

  • 三层叠加生效，不冲突。优先级：文件夹级>项目级>全局级。

  • 全局级CLAUDE.md范例，可以抄大佬是怎么写的：

    ## 沟通方式

- 默认中文回复；代码、命令、变量名、文件路径保持英文
- 结论先行，简洁直接，不先铺垫背景
- 不谄媚，不夸”这是个很好的问题”，不以”当然可以”开头
- 给真实判断，方案有问题直接指出，发现更好做法主动说明

## Git

- 不自动git commit或git push，除非我明确要求
- 提交前先展示将要提交的变更摘要

## 红线操作

以下操作即使在auto-accept模式下也必须先问我：

- 删除文件、目录或git 历史
- 修改`.env`、密钥、token、证书、Cl/CD 配置
- `git push`、`git rebase`、`git reset --hard`、强制推送
- 公开发布（`npm publish`、生产部署等）

Claude Code常用命令一览

# 会话
/resume

# 查看上下文使用情况
/context
# 压缩上下文
/compact

# 查看本次修改的内容 只能在终端中执行，插件中不行
/diff

# /rewind 或者 双击Esc 终端和vscode都能使用
# 会话中回退：回退到会话的某次提问，回退到选中的提问回答前，代码也会一并回退
/rewind

# 代码审查
/code-review

以下是一些基础高频命令，方便在忘记命令或需要切换模型、管理上下文、查看状态等场景时快速查阅。

命令 作用 使用场景
/help 显示帮助信息 忘记命令时查看
/model 查看/切换当前模型（高/中/低档） 需要换用更强/更快的模型时
/compact 压缩当前对话的上下文 对话太长，AI 开始“遗忘”早期内容时
/clear 完全清空当前对话 开始全新的任务时
/context 详细查看上下文占比（各 MCP/Skill 各占多少） 优化 token、诊断哪里占上下文
/memory 查看/编辑 CLAUDE.md 与自动记忆 管理项目/全局记忆、开启 Auto Memory
/status 查看会话状态 确认模型、Token 消耗
/cost 查看当前会话费用 监控花了多少钱
/review 对当前项目进行代码审查 完成功能后检查质量
/init 自动生成项目的 CLAUDE.md 进入新项目后的第一件事
/plan 切入 Plan Mode（只读规划模式） 复杂任务起手（详见 4.9 节）
/rewind 回滚 cc 之前的修改 “后悔药”，下面重点讲
/resume 选择历史会话恢复 上次话题还没聊完
/btw “顺便问一句”，不污染主上下文 主任务进行中想问个无关问题

工程化控制和Agent开发

1.git版本控制代码

让生成的代码自动提交到git上有记录。

  • 存到本地git仓库
  • 存到远程git仓库

一个版本开发后，上下文可能很大了，可以在此时进行一个上下文压缩，具体看下面详细说明。

2.上下文压缩控制

  • /context

  • /compact

Claude Code 的上下文窗口有限（通常约 200K tokens）。随着对话进行，历史消息、代码片段、工具调用结果不断累积，最终会触发"上下文窗口满"的情况。有效的上下文管理是保持长会话生产力的最关键技能。

工作原理：

  • Claude 读取完整对话历史，生成结构化摘要
  • 摘要内容包括：已完成的任务、已做的决策、修改过的文件、关键事实
  • 早期对话被替换为压缩摘要，仅保留最近的若干轮完整对话
  • 压缩后释放大量上下文空间，可以继续工作

使用时机：

  • ✅ 主动压缩：每 30-50 轮对话后主动执行，不要等 Claude "开始遗忘"才压缩
  • ✅ 任务切换时：完成一个大任务、开始新任务前
    • 完成一个功能后，可以执行下/compact压缩下，再开启下一个功能
  • ✅ 响应变慢时：对话历史过长会导致处理速度下降
  • ✅ 开始出现遗忘迹象：Claude 开始忽略早期指令时

注意事项：

  • 压缩是不可逆的——压缩后无法恢复被丢弃的原始对话
  • 压缩质量取决于对话结构的清晰度——如果对话混乱，摘要也会遗漏信息
  • 压缩前可以手动总结关键点告诉 Claude

相关命令：

# 查看上下文使用情况
/context
# 压缩上下文
/compact

自动压缩（Auto-Compact）：

Claude Code 在上下文接近上限时会自动触发压缩，你会在界面看到提示。但依赖自动压缩有以下问题：

  • 自动压缩发生在"快满"的时候，此时 Claude 可能已经因为上下文拥挤而表现下降
  • 主动 /compact 比被动等待自动压缩效果更好

减少上下文消耗的技巧：控制输出量

  • 精准提问：明确指定你需要什么，避免开放式问题产生大量输出
  • 文件读取策略：不要一次性读取整个大文件，指定行范围或搜索特定函数
  • 避免不必要的工具调用：不要让 Claude 重复读取同一文件

3.Memory 记忆管理

三层记忆体系-Claude Code 的记忆系统分为三个层次：

层次 位置 作用域 加载时机
项目级 CLAUDE.md <project>/CLAUDE.md 当前项目 每次会话启动
项目级 MEMORY.md <project>/.claude/MEMORY.md 当前项目 会话中可按需检索
用户级 MEMORY.md ~/.claude/MEMORY.md 所有项目 会话中可按需检索

Claude Code 的记忆系统是一个跨会话持久化存储机制。它让你可以把重要信息（偏好、约定、项目背景等）存成小文件，每次新会话启动时自动加载，这样Claude Code就不需要每次都从头了解项目。

记忆存放在 memory/ 目录下，结构如下：

memory/
├── MEMORY.md          # 索引文件，每条记忆一行链接
├── 某条记忆.md         # 一个文件 = 一条记忆
└── 另一条记忆.md

每条记忆文件包含：

  • frontmatter（name、description、metadata.type）用于检索匹配
  • 正文记录具体内容

记忆有四种类型：

类型 用途
user 关于你的信息（角色、偏好、习惯）
feedback 你给过的反馈和纠正
project 项目背景、目标、约束
reference 外部链接、文档、工单

4.查看本次修改

查看本次修改的内容 只能在终端中执行，插件中不行

/diff

5.回退到会话的某次提问

双击Esc

/rewind 或者 双击Esc，终端和vscode都能使用

会话中回退：回退到会话的某次提问，回退到选中的提问回答前，代码也会一并回退

6.代码审查

/code-review

7.自己的/命令-Skill技能

Skill 核心概念

Skill 不只是个 Markdown 文件，而是一个完整的文件夹。它可以包含：

  • 主指令文件 SKILL.md
  • 参考文档、代码模板
  • 可执行的辅助脚本

它的工作方式是，Claude 会根据你的任务描述，自动识别并加载相关的 Skill，或者你也可以通过 /skill-name 这样的斜杠命令手动调用。

自定义Skill技能

项目技能：只有本项目可以使用，项目的.claude\skills\技能名文件夹\目录下

  • 发送给claude code：帮我创建一个技能，只在本项目使用，名字叫/run-wx-red-pocket，功能就是启动这个项目

  • 结果：claude code会在项目的目录下的.claude\skills\run-wx-red-pocket\文件夹下生成SKILL.md文件

  • 使用：/run-wx-red-pocket

    • 如果报未知命令错误Unknown command，就重启下claude code就行，因为新加的skill还没有被claude加载。重启vscode。

全局技能：所有项目都能使用，存放在C:\Users\dywang\.claude\skills\技能名文件夹\目录下

Agent开发实战

SubAgent介绍

img

记忆：claude code已经管理好了

模型：调用已有的模型deepseek

记忆和模型claude code都已经搞定了，只有技能是需要我们自定义的，根据我们自定义的技能，得到不同的数字员工。

img

Claude Code主Agent控制使用所有SubAgent

img

SubAgent创建

发送给claude code：帮我创建一个subagent，名字叫做tester，用于单元测试，可以使用技能/unit-test；当用户有单元测试需求
的时候都可以调用这个subagent

结果：claude code会在项目的目录下的.claude\agents\文件夹下生成tester.md`文件

image-20260715155543432

使用：发送执行单元测试时，它会自己检测派活给subagent执行

image-20260715161316329

Hooks 钩子系统

Hooks 允许在特定事件前后自动执行脚本。

支持的 Hook 类型
Hook 触发时机
pre-command 执行任意命令之前
post-command 执行任意命令之后
on-start Claude Code 会话启动时
on-complete Claude Code 工作完成时
pre-edit 编辑文件之前
post-edit 编辑文件之后
配置示例

.claude\settings.json文件中

{
  "hooks": {
    "pre-command": {
      "command": "echo 'Claude 即将执行命令'",
      "description": "记录所有即将执行的命令"
    },
    "post-command": {
      "command": "./scripts/check-breaking-changes.sh",
      "description": "检查是否引入了破坏性变更"
    },
    "on-start": {
      "command": "git fetch --all",
      "description": "启动时拉取最新远程分支"
    }
  }
}
Hook 脚本可以访问的环境变量
变量 说明
CLAUDE_EVENT_TYPE 事件类型（pre-command / post-command 等）
CLAUDE_COMMAND 将要执行或已执行的命令
CLAUDE_FILE_PATH 正在编辑的文件路径
CLAUDE_WORKING_DIR 当前工作目录
实例

image-20260715162120805

我想要实现一个效果，对于git commit动作进行拦截，配置一个hook。

  • 拦截后会检查，是否通过了单元测试和质量检查，通过了放行，允许存档，不通过则拒绝；

如何验证是否通过单元测试和质量检测，就需要改造目前有的2个agent，

  • 即：tester和quality-engineer，让这2个agent在完成工作后，形成通过的标记文件。

再新建一个agent，名字叫做gitcommit-agent

  • 功能就是：调用这个agent后，并行执行tester和quality-engineer2个agent，然后再调用git-save技能进行提交

你来看看想法的可行性，以及给出行动方案的规划细节，我们讨论一下

image-20260715162520010
posted @ 2026-07-15 19:23  deyang  阅读(18)  评论(0)    收藏  举报