Claude Code CLI常见生产环境指令开发项目入门学习0-1

首先,这一篇文章主要是用来写一些大部分在开发过程中用的多的实用CLI的指令以及开发技巧,涉及到的Claude Code CLI的安装问题以及API中转等问题,文章中不赘述,请自行搜索资料解决。本次用的是Claude Code CLI + 智谱AI(GLM 4.7) 来开发一个待办清单的练手项目(对于实际项目开发流程有借鉴意义,欢迎观看)。

练手程序项目:待办清单

起步

首先的话进入中终端,转到对应需要开发的目录下面,这里我以自己电脑的文件夹举例,比如我们要开发一个待办清单:

回车之后等待一小会,就完成了,部分截图如下:

这里询问我们关于文件创建是否同意,这里是个人审查完AI代码之后,确认无误就可以选择Yes了,如果对于模型能力足够相信的话可以,一直允许后续的编辑操作,就不用频繁同意了,这里我选择第二个。

当选择第二个之后,下面会多出一行紫色字体,这个就表示自动同意模式开启(accept edits on)。比如说,你发现AI模型输出质量不行,后悔一直同意想要切换模式的话,可以按住shift+tab键来切换了

现在变成了规划模式。规划模式作用:探讨方案,只是聊天,不执行。当再次按住shift+tab之后,如下图:

底部的模式消失了,变成了之前的样子,说明之后的对话修改也需要经过你的同意才能执行。这个只是提醒,当前模式默认是默认模式。(claude没有标注当前这种模式情况),刚进入claude code里面,使用的就是默认模式。这个模式下编码比较谨慎,会优先询问用户意见,让用户选择yes 或者 no。

cc只在三种模式转换:默认模式(谨慎)、自动模式(方便)、规划模式(构思)。

这里为了演示方便,我切回了自动模式。当这个待办清单编码好之后输出完毕,想要打开时,我们可以直接去这个文件夹下面打开这个,也可以使用终端的命令打开。

文件夹下面直接看:

在cc中切成终端命令:输入一个!在输入框中

windows用户使用start,mac用户使用open

界面如下图所示:

这个待办清单基础功能实现完毕,GLM+CC确实很不错

重构代码

对于一个项目来说,都写到一个文件里面肯定是不方便维护的,以及扩展问题,所以我们肯定要拆分重整一个架构模块,改变架构是一个大的工程,因此我们可以使用规划模式(Plan Mode) 进行构思设计。确定好架构细节在出手。比如这里将html文件重构为React + Typescript + Vite 技术栈的项目。如果想要写的提示词很多,可以按住shift + enter进行换行(mac)。Windows的话是ctrl + enter进行换行,继续写提示词

这里因为是计划模式,因此当大模型对你的第一次输入处理完毕时候,会询问你是否继续执行,如果你还需要追加功能,就选择no,并且添加一定的补充:

这是计划模式执行之后大致输出内容:

当第一次输入的提示词被在规划模式下执行完之后会输出如上部分内容:

这时候cc会询问你三个选项,如果你的项目还有额外需要追加的东西,选择第三个,告诉cc你要追加的内容,即再写一下提示词

输入完追加的提示词之后,回车之后cc就会追加计划了,第二次cc的规划模式下的输出结果如下

可以看到考虑到了事件优先级的问题,因此我们可以同意之后看看修改后的效果

中途询问了我是否需要创建项目,这里之前有说过自动模式不是直接同意所有的步骤吗,为什么这边还询问,实际上对于一些危险操作,cc依然会询问用户是否需要执行,如果想要让cc不管什么任务都执行的话,需要在开始的时候就设置一个参数:--dangerously-skip-permissions

运行图中的命令,这个命令危险,所以需要一直同意才行

最终进入到这个页面可以看到也bypass permissions这个标志,这就是允许任何命令执行模式,但是强烈建议,不要使用这个,因为这就相当于你给了大模型跟你一样对于终端的权限,这种操作是十分危险的。

接着回到刚才的开发过程中,之后会问你一些第三方库函数和启动命令,同意即可

这时候打开网页发现页面是空白的,查看了控制台发现报错了,交给GLM+CC解决

当前项目如果启动了npm run dev,之后想要继续修改的话,可以按住ctrl + b去让前端启动在后台,最终呈现出来的效果如下:

注意此时,我们后台刚才迭代之后有四个任务在运行,输入/task可以查看对应内容:

根据对应的提示信息可以看到对应的操作效果。

追加功能

比如这时候,我希望这个待办清单项目能够给外国人使用,就添加一个语言切换的功能,中文和英文这个语言切换,这时候可以给cc输入提示词。

生成的效果如下,还算过得去的程度吧,功能至少实现好了

但是这个看起来也有一点怪怪的,这时候考虑回滚一下吧。最简单的进入回滚的方式就是按两下Esc,进入回滚,或者使用/rewind命令

中途这些测试如下(可能不是原生的cc模型,模型比较不适配吧,哈哈):

找到刚开始准别加入语言切换功能的会话位置,回车即可回滚

这边回滚时候会出现以下四个选项,根据需要选择:

当我们回车之后,代码和历史对话都会回滚。效果又变回之前得了:

如果我们觉得项目所用的技术栈过于复杂想要变回原本的html版本,那我们首先需要停止当前前端的启动(使用/tasks),之后进行回滚(/rewind)。回滚之后可以用!ls查看文件内容。

查看之后文件夹下面的文件内容如下:

按照上面的说话我们不是应该回滚到只剩下一个html页面吗?为什么还有什么多其他文件,这是因为cc的回滚机制只回滚自己写入的,如果是终端命令生成的文件,cc是不能够回滚的。所以建议还是使用git来管理项目。 这里我直接手动删除其他文件了。最终结果是这样的。

回归到基础的html如下:

回滚最终建议使用git,这里我们在引入下一个概念,使用外部工具该如何使用?现在假设你觉得模型做出的UI设计太丑了,在Figma上设计好了UI想让cc学习并且编写出类似的UI代码,怎么接入Figma呢?常规想法是把图片传给cc,直接粘贴在这个CLI界面里(复制粘贴就行了)。但是这张方式肯定精度还原不够好,这里我们可以用MCP 来试试。Figma有提供一个很好的MCP服务。这里我们援引官方的步骤格式,先安装Figma的MCP Server。这里放一个官网步骤链接方便学习:https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/

在当前CLI中连按两下ctrl + c退出,粘贴官网命令

然后现在回车之后看下面这个内容,就代表安装好了

如果我们想要回到之前的会话,我们可以看到上面一张图中有一串指令告诉你了,使用/resume

或者说如果不想这样,也可以在启动的时候加一个参数:-c(continue)

这样就能回到上一次对话。对话恢复了。现在来执行mcp服务,就用/mcp实现就行了

这边可以看到我们安装了Figma的MCP服务,需要鉴权操作,因此,我们执行对应操作

之后会打开一个网页,让你同意权限即可。

这时候可以看到,mcp服务链接上了。而且enter进去之后发现服务状态也是可用的

如果要查看具体功能就选择第一个就行了,figma的mcp支持的功能在里面都看得到。

这里并不需要自己选择功能,交给cc来调用就行了,按esc退出到输入框那边就行了。这里我们网上选择了一个跟我们项目相关的待办清单的界面:

由于MCP服务已经准备就绪,只需要让cc去延申到这个设计稿上,最后就能看到还原的效果情况了。导出的图片样子大致如下:

现在任务就是把图片传给cc,直接粘贴固然可以,但是还原效果不精确,如果是用MCP就比较精确一点了。

输入框里面输入完这句话之后,还要去figma里面复制稿件链接

复制完之后回到CLI,最后要输入的提示词如下:

首先,cc发现figma的mcp可以解决这个问题,并且询问我们操作意愿:

这时候cc问你是否需要重写这个文件内容,同意即可

最后打开页面效果如下:

中途因为GLM 4.7额度不够了,现在用的是GLM 4.5 air,感觉样式颜色跟得上,布局有瑕疵,功能正常能够添加没问题,但是之前的优先级功能消失了,存在一定局限性。可能原生cc的模型会比较好一点。MCP具体用法就是这么用的,只要激活了,cc会自动根据情况调用。

上下文压缩问题

前面的操作过多会使得上下文资源主键变少,这时候为了保证后续的功能开发能够稳定发挥模型性能,就要压缩之前的上下文信息了,前面有一些上下文信息有用,有一些是没用的,选择性的考虑。cc中上下文压缩用到的是/compact。而且可以在该命令后面追加一些具体的保留策略,比如说重点保留用户提出的需求之类。不过一般不用这样子。

压缩完之后可以按住ctrl + o去看压缩之后的上下文内容:

下面是上下文信息,你可以看到具体的上下文内容,如果想要回到cli界面继续开发,也可以接着按ctrl + o

上下文有关命令还有一个/clear,比较极端,直接清空上下文。上面的/compact压缩完上下文之后无法对上下文进行自定义。而且上下文是与某个会话绑定的。下次进入cc的时候还得来到这个会话。这就会延伸出一个问题,我们如果想要新开一个会话并且依然使用对应的一些信息充当上下文而不希望进行这种重复性的对话操作时我们可以使用什么方案呢?其实可以使用CLAUDE.md文件 ,充当一个固定的上下文信息需要补充的文件,这样在新开的一个项目中我们只需要读取这一部分文件就无需额外的再重新写对应的会话内容。

首先,我们可以让cc自己生成一个这个文件,通过/init命令

指令执行完毕之后如下内容:

我们可以打开CLAUDE.md文件看看结果:

我们可以随时添加这个里面的一些指导编码的要求。比如我们在这个文件最后添加一个注意事项,内容是:每次会话完之后必须回答最后一句必须是Hello Claude Code

为了让修改的指导编码内容被加载,需要先退出当前会话,重新进入(是用claude -c)。我们现在就可以测试这个规则是否被运用了,比如打个招呼(这个灵验需要cc原生的模型比较灵验),不然可以直接强制读取

不是原生模型的情况下,我用的是这个,放在CLAUDE.md中

md 复制代码
# CRITICAL SYSTEM INSTRUCTIONS
- **MANDATORY:** You MUST append the phrase "Hello Claude Code" at the very end of **EVERY** single response.
- This is a strict requirement for this CLI environment.
- Do not forget this step.

打开CLAUDE.md文件的方法也可以通过命令/memory。这有三个模式,一个是当前项目,一个是当前用户,一个是自记忆的文件夹。一般选择具体项目

就会自动弹出默认的系统的文件

文件的基础功用就是这个,下面是Hook。

Hook功能

cc有这个功能,允许用户在运行工具前后的时机执行自己的逻辑,常见的就是格式化,毕竟团队开发编码规范重要

这里选择工具使用后执行逻辑,hook功能原生的比较好弄,这个第三方模型貌似没有。

Agent Skill

如果想要复用某些规范或者提示词,可以存储成一个skill,进行处理。agent skill就是给大模型看的说明书。就是一个动态加载的prompt。创建一个agent skill流程如下:

新开一个终端,输入 mkdir -p ~/.claude/skills/daily-report

mac用: code ~/.claude/skills/daily-report

windows用户用下面这个命令:

然后输入这些内容:

之后保存,退出当前终端,然后输入claude -c,进入。然后使用指令/skills。此时发现,agent skill如下:

之后在输入框中输入以下提示词:

可以看到,这个成功加载了skill技能,输出了如下内容:

这个skill是由大模型发现和启动的,除了大模型发现触发之外,我们也可以通过对应的技能名字主动触发skill,只需要使用SKILL.md里面到的name触发,比如这个每日报道的name为:daily-report

后面可以追加一些具体的请求。agent skill有很多策略,可以去官网查看。

SubAgent

这个本质上就是一个独立的agent,具有独立工具,独立上下文以及独立的skill,也可以自己完成一个任务。一般来说,SubAgent用来代码审核。

想要用SubAgent,可以先在输入框中输入/agents

回车之后会有如下操作指引,这里要创建一个SubAgent,所以需要选择Library

这里cc也有对SubAgent说明这个东西:

这边选择项目级别的agent,接下来会让你选择agent的创建方式。一种是:先用Claude初始化,另外一种是完全手动创建,推荐使用cc的初始化。

选择cc推荐的之后也说了要你好好描述,表示这个SubAgent的职责功能

输入完之后回车cc就可以自己创建一个SubAgent,接下来我们要选择SubAgent的权限

这里因为是代码审查,所以选择只读工具就行了,选择完之后定位到continue

之后要你选择SubAgent你想用的模型

这里由于我们使用的是GLM(非cc的原生模型,所以选择第四个,集成父Agent的)

这边可以选择你的这个SubAgent的颜色,如果触发了SubAgent,救护展示你选择的对应颜色

这边我选择绿色。然后就会生成如下结果,如果生成的SubAgent内容不符合我们的期望我们能够使用e来编辑,自己提交自己需要的审查代码格式。

修改完毕之后,保存退出,重新进入当前终端,刷新内容。输入以下内容:

这里可以看出cc调用了我们刚才创建的SubAgent。

Agent Skill会共享主对话的上下文,它执行过的每一行日志,每一个思考过程,都会记录到当前上下文中,如果你让一个agent skill去代码审查一个拥有几万行的一个代码。那么这个上下文肯定会塞满整个窗口这样子的话不便于我们的一个开发节奏。token消耗飙升,agent也会因为记忆过载导致变傻。agent skill适合处理与上下文强关联的。

SubAgent相当于开辟一个副本用来处理非主线的任务,比如说格式,代码矫正,规范,安全等。它会独立创建一个会话,不会回传到Agent里面,只有SubAgent活干完了,才会来汇报结果。

这样子组队换内容的上下文就会更加干净不会被其他额外的东西撑爆。

Plugin

插件。把一些列的功能都装在一起了,一键安装之后,cc可以获得一整套高级能力,我们选择如下的这个前端设计的插件安装

确定之后安装就完成了

安装完毕之后,重启cc。

这里加载完之后输出如下:

使用这个命令打开页面

打开的效果是真的好看啊,这个插件强推:

大体基础的东西就是这点,更多的精髓需要去官网进行学习。

相关推荐
Orange_sparkle10 小时前
claude code高级使用手册
python·ai·claude code
酿情师1 天前
OpenCode 详细入门指南,从安装到使用保姆级教程
vscode·visual studio code·cli·opencode
小酒窝.1 天前
【Claude Code】记忆管理与压缩,真·源码分析
ai 应用·claude code
yyk的萌1 天前
Claude Code 命令大全
linux·运维·服务器·ai·claude code
九章智算云1 天前
一份CLAUDE.md,为何能让GitHub榜首项目狂揽6万星?
人工智能·ai·大模型·agent·ai工具·claude code·vibe-coding
不做超级小白1 天前
白嫖计划之LongCat一日体验
ai编程·claude code·longcat
维元码簿2 天前
Claude Code 深度拆解:上下文里有什么——工具能力声明
ai·agent·claude code·ai coding
❀͜͡傀儡师2 天前
Claude Code 官方弃用 npm 安装方式:原因分析与完整迁移指南
前端·npm·node.js·claude code
F_D_Z2 天前
【清晰教程】CC Switch——Claude Code / Codex / Gemini CLI / Open Claw一键切换工具
claude code·cc switch