【干货】这些Claude Code使用技巧对你应该有用
前言
Claude Code两脚踢翻cursor,现阶段已经是最牛逼的AI工具了,这篇文章来聊聊我的Claude Code使用技巧,可能对你有用。
关注公众号:【前端欧阳】,加入我的AI交流群。
注册Claude账号
想要使用Claude Code必须注册claude,并且开通pro或者max。这里会遇到两个困难:注册账号被秒封、充值支付问题
。
Claude号称封号狂魔,不少小伙伴都是注册后立马就被秒封(俺也一样)。
经过摸索我找到一个稳定的注册方案:
- 开全局梯子!开全局梯子!开全局梯子!重要的事情说三遍。最好使用漂亮国节点。
- 不需要什么指纹浏览器,直接使用无痕模式打开Claude官网直接注册就行。
充值支付问题有两个方案:
- 苹果礼品卡,因为我们全家都是安卓,所以我使用方案二。ps:据说可以利用低汇率国家进行充值,价格比官网还低得多。
- bybit
和Claude Code讨论清楚再写代码
大部分小伙伴应该是这样使用AI编辑器生成代码的:
帮我实现xxx需求,这个是需求的具体描述: xxxx
结果就是AI给你吐出一堆代码,但是很烂,有各种问题,一般需要AI修改好多轮后才能
勉强
达到你想要的效果。更致命的是每一轮AI都可能会推翻之前的逻辑,重新给你生成一堆新的代码,这导致对代码的掌控力是越来越差。
AI写代码的流程和人写代码其实是一样的
,如果让你实现一个需求你会直接拿到需求后直接就开始coding吗?明显不会!!!
我平时做一个需求一般是这样的:
- 查看需求文档,和产品沟通需求细节,保证我理解的需求和产品想要的需求一致
- 规划大体思路和步骤
- coding
之前我们直接让AI直接开始coding,跳过了前面的两步,AI生成的代码能够符合你的心意才怪呢,换你来直接开始coding你也无法一次写出符合要求的代码。
所以正常的流程应该是这样的:
- 将需求喂给AI,明确说明不生成代码,而是让他给出大体思路和对需求的理解
- 纠正AI思路和需求理解的错误,然后让他生成更加详细的实现步骤
- 让他生成代码
因为全流程我们都参与进来了,所以对代码的掌控力很高。
虽然我们会和AI进行很多轮对话,但是因为没有生成代码,所以token消耗一般比直接让AI写代码然后不断修改相比要少许多。
使用魔法关键字
Claude官方给出的魔法词语可以加速Claude Code的思考,直接在对话中将魔法词加入就行,按照效果由弱到强进行排列:
think < think hard < think harder < ultrathink
比如这样:
帮我实现xxx需求ultrathink
没有什么限制,直接在输入里面加入魔法词就行,缺点就是太费token。
按一次ESC还是两次ESC?
如果Claude Code正在输出的内容你不满意,按一次ESC键就可以直接打断他的输出。
按两次ESC键这个功能有点高级,很多人都不会用。
我们来举一个"开发一个用户登录功能"的例子来说明:
假设你正在使用 Claude Code 开发一个用户登录功能,对话过程是这样的:
初始对话流程:
消息 1
- 你输入:创建一个用户登录页面,包含用户名和密码输入框
Claude Code 执行并创建了 login.html
消息 2
- 你输入:添加表单验证,确保用户名和密码不为空
Claude Code 添加了 JavaScript 验证代码
消息 3
- 你输入:将验证逻辑改为使用 jQuery
Claude Code 开始重写代码使用 jQuery...
这时你意识到问题:
你突然想到:"等等,我其实不想用 jQuery,我想用原生 JavaScript 但是要更优雅的实现方式"
使用两次 ESC:
-
按两次 ESC
- Claude Code 显示历史消息列表:[1] 创建一个用户登录页面,包含用户名和密码输入框 [2] 添加表单验证,确保用户名和密码不为空 [3] 将验证逻辑改为使用 jQuery ← 当前位置
-
选择消息 2
- 跳回到添加验证那一步 -
修改提示重新输入
:添加表单验证,使用原生 JavaScript 的 addEventListener 和现代 ES6 语法, 包含实时验证和友好的错误提示
-
Claude Code 现在会:
- 从消息 2 的状态重新开始
- 使用原生 JavaScript 而不是 jQuery
- 实现更现代的验证方式
- 之前的"消息 3"(jQuery 版本)被新的路径替代
这里有两点需要注意:
- 你跳转到消息2时代码不会回滚到消息2时的代码,只是历史聊天记录被重置了
- 跳转到消息2,说明历史聊天记录只有消息1,因为你新输入的消息将会成为新的消息2
两次ESC键的功能可以让你进行消息的时间回溯,在某个十字路口你选择了方案A,走到最后发现方案A是死胡同。然后你按下两次ESC键,可以让你回到那个十字路口,然后你选择方案B,继续你的新方案开发。
完成一个功能后就暂存代码
我的开发习惯是完成一个功能后就直接暂存代码(也可能commit代码取决于当时的情况),然后去开发新功能。
如果AI给出的代码不满意,我会直接丢弃,然后让AI重新生成,这样做的好处就是已经完成的功能不受影响。
也可以直接给Claude Code说让他将代码回滚回去
回滚上次改的代码
不过我更喜欢暂存+丢弃代码的方案,AI的输出具有随机性,这种自己手动操作能够保证100%没问题。
使用background tasks
我们一般使用yarn start
之类的命令来启动服务,如果报错了需要手动将终端中的错误信息复制给Claude Code,然后才是分析错误和解决问题。
有了background tasks后就简单很多了,直接告诉Claude Code让他给我启动yarn start命令:
如果出错了,直接给Claude Code说:“报错了,查看日志和分析错误原因”
如果想关闭服务,直接告诉Claude Code说:“结束yarn start命令”
因为Claude Code是在终端执行,理论上电脑上面能够做的事情,Claude Code都能够做到。
其实这个background tasks也有很大的想象空间,是一个大量消耗token的利器。
将文件或者文件夹加入对话
Claude Code是知道当前项目的结构,并且也知道你当前是打开的哪个文件,一般情况我们直接给他说需求他就能很聪明的知道去改哪些文件。
有的时候我们只想Claude Code修改指定文件或者文件夹,这时我们就可以使用@
功能直接将文件或者文件夹加入对话。
如果你觉得这个麻烦,也可以直接将文件或者文件夹拖拽到Claude Code的对话框也可以。
将图片加入对话
虽然Claude Code在终端中运行,但是也支持直接发送图片。在Mac上面是复制图片后,直接在输入框中command+v
或者control+v
都可以粘贴图片。
--dangerously-skip-permissions模式
在处理复杂任务时Claude Code执行时间一般都不短,你也不可能一直盯着他干活自己什么都不干。等你干完其他事情回来后发现他还卡在那里说:是否允许我执行xxx?
运行他执行后,然后你再去干其他事情,干完后回来发现他又卡在那里说:是否允许我执行xxx?
这样干效率反而更低了,可以直接使用--dangerously-skip-permissions
模式,使用这个模式后将会允许Claude Code执行任何操作。
claude --dangerously-skip-permissions
国外很多大佬都推荐这样使用,我也是这样使用的,目前来看没有出现问题。
但是这样使用有一定的风险,因为Claude Code是在终端执行的,他可以操作你电脑上面的任意文件,
不是仅限于当前项目的文件夹内
!!有的人推荐使用docker进行隔离使用。MCP
Claude Code也可以安装MCP,安装方式也简单粗暴,直接给Claude Code说:
给我安装context7的MCP
也可以通过命令行来查看MCP list、安装MCP、卸载MCP。
在Claude Code中MCP主要分为两个维度,一个是项目维度,一个是用户维度。
在Mac的/Users/你的用户名/.claude.json
位置里面存的就是Claude Code的配置文件,不管是项目维度的MCP还是用户维度的MCP都在里面。
这个是项目维度MCP:
这个是用户维度MCP:
查看MCP list:
claude mcp list
这个命令不光会将项目维度的MCP列出来,也会将用户维度的MCP列出来
添加MCP:
claude mcp add <name> <command> [args...]
这里的name
是MCP的名称,command
是MCP的命令,args...
是MCP的参数。
比如这样:
claude mcp add browsermcp -- npx -y @browsermcp/mcp
就会生成这样的配置:
"mcpServers": { // 省略... "browsermcp": { "type": "stdio", "command": "npx", "args": [ "-y", "@browsermcp/mcp" ], "env": {} } }
claude mcp add
还支持--scope
用于指定作用域:
- local(默认):项目特定,私有配置
- user:用户级别,所有项目可用
- shared:团队共享配置
比如这样就是指定安装MCP到用户级别:
claude mcp add browsermcp --scope user -- npx -y @browsermcp/mcp
和之前的命令结构一样,只是新增了一个--scope
参数。
卸载MCP:
Claude Code卸载MCP的命令是:
claude mcp remove <name> --scope <scope>
这里的name
是MCP的名称,scope
是MCP的作用域。
比如这样:
claude mcp remove browsermcp --scope user
卸载MCP后,在/Users/你的用户名/.claude.json
位置里面的配置文件中也会删除对应用户维度MCP的配置。
我目前在使用这两个MCP:context7
和browsermcp
context7
可以让AI获取到最新的文档,避免AI生成的是过时的代码,直接给Claude Code说使用context7就行了。
browsermcp+Claude Code
因为操作浏览器可以复用当前用户的登录状态(不是开启一个无头浏览器),这样想象空间就更大了,比如你可以这样给他说:
- 打开竞品网站,将他的xxx功能抄过来(简单粗暴)
- 生成一篇关于xxx的笔记,然后发布到小红书
整个流程我们只需要做的是将AI需要操作的浏览器登录上,然后给他布置任务就行,他自己就能埋头苦干+自己PUA自己。
因为现在的AI已经能够聪明的像人类一样浏览网页了,虽然是借助浏览器MCP这种工具。
用嘴写代码
打字永远没有用嘴说的快,在AI时代冒出了很多借助LLM语言转文字的工具。
当你还在扛哧扛哧的打字写提示词时,聪明的人已经使用工具直接语言输入提示词。
我目前在使用Spokenly
,原因是他支持自定义大模型API key,这种方式就不需要订阅他的服务,我是使用的OpenAI的key。
如果有更好的coding方面语音转文字工具期待各位大佬评论区推荐。
CLAUDE.md文件添加记忆
这个和Cursor的.cursor/rules
相似,让你可以添加自己的提示词让AI更加了解你的项目也编码风格。
这个文件我们不需要手动去添加,直接使用/init
命令就可以让Claude Code根据我们项目的情况自动生成。
和cursor相似,你需要在日常使用的时候根据你的实际情况去不断的手动更新或者给Claude Code指令让他自己去更新CLAUDE.md文件,这样Claude Code你才会越用越顺手。
除了手动修改CLAUDE.md文件 还可以使用 #
符号来添加记忆:
他会让你选择是在项目维度添加记忆还是在用户维度添加记忆
除此之外Claude Code还支持自定义hooks,这个也很有用。你可以定制一些编辑文件前的钩子,也可以定制一些编辑文件后的钩子,类似于前端框架中的生命周期,想象空间也挺大的,值得单独写篇文章。
总结
其实还有不少高端技巧还没分享,比如git worktree
结合多窗口使用Claude Code让你可以并行开发多个任务,在网上看到一些国外的牛人直接开了四个窗口,相当于一心四用。更多高端技巧如果大家感兴趣我们后面继续分享。
关注公众号:【前端欧阳】,加入我的AI交流群。
评论