目录
步骤 1：安装 Chat for Claude Code 插件
四、Claude Code 实践案例（含可直接使用的提示词）
在 2025 年的 AI 编程时代，很多人都听说过 Claude Code 的强大：写代码、查问题、补功能、甚至能从 UI 图片直接生成前端页面。
但真正让人头疼的其实只有一件事——环境配置。
没错，最难、最容易踩坑的就是 Claude Code 的本地环境部署；
而 VSCode 插件？
只要你把 Claude Code 配好，装个插件、点几下配置，直接就能用。
所以这篇文章我会带你完成两件事：
搞定最核心、最困难的：Claude Code 本地环境部署
⚙️ 然后用最简单的步骤，把 VSCode 插件配置好，立刻开始写代码
本教程会用最通俗的方式，把每一步拆得足够细、足够清楚，让你照着做就能跑通。
如果你之前安装失败、报错不断、命令行看不懂……这篇就是为你准备的。
准备好了吗？
我们从最关键的 Claude Code 环境配置 开始搞起！
一、前置准备（先做这几件事）
Node.js 18 或更高版本 请前往 Node.js 官方网站安装最新 LTS 版本，确保 Claude Code 能正常运行。
Git（Windows 用户必需） 如果你使用 Windows，请提前安装 Git for Windows，否则后续依赖安装可能失败。
Node.js可参考：【2025年最新版】Node.js安装及环境配置超详细教程（以win11为例子）
Git安装可参考：【2025年最新版】Git安装及环境配置超详细教程（以win11为例子）
二、安装和使用 Claude Code（终端运行）
在使用 Claude Code 之前，我们需要先完成工具安装和环境变量配置。下面按照步骤一步步来，非常简单。
第一步：安装 Claude Code
打开你的命令行工具，直接输入以下命令即可全局安装 Claude Code：
npm install -g @anthropic-ai/claude-code安装完成后，输入下面的命令查看是否安装成功。只要能看到版本号，就表示已经就绪：
claude --version
第二步：配置 Claude Code 所需的环境变量
Claude Code 安装好后，需要手动指定 API 地址、Key 以及模型信息。首先在C:\Users\LucasTTboy\.claude创建一个文件夹 settings.json，然后将文件内容修改为以下格式，并替换成你自己的环境变量值：（其中"sk-xxx"需要替换成自己的APIKey！！！）
{
"env": {
"ANTHROPIC_AUTH_TOKEN": "sk-xxx",
"ANTHROPIC_BASE_URL": "https://linoapi.com.cn",
"API_TIMEOUT_MS": "3000000",
"ANTHROPIC_MODEL": "claude-haiku-4-5-20251001"
}
}
第三步：注册API平台并获取APIKey
首先进入到API平台：https://linoapi.com.cn/register?aff=sJ68，点击右上角的登录/注册按钮。
刚开始注册会送0.4元的，如果不够可以去【钱包】那边适当充值。
接下来点击【API令牌】，点击【添加令牌】
填写好名称和选择好分组，这里分组一定要选择【Claude Code专属】
额度这边可以适当调整，其它的参数都默认即可，然后点击【提交】。
点击复制那个秘钥就可以了。
然后在【模型广场】中搜索“Claude”，就会有很多不一样的模型，可以选择一个复制到上面配置的"ANTHROPIC_MODEL"，这里我填写了"claude-haiku-4-5-20251001"。
第四步：重新打开终端窗口
环境变量修改完成后，一定需要重新打开一个新的终端窗口，配置才能生效。
第四步：开始使用 Claude Code
进入你的项目目录，运行claude。
cd test_code
claude
输入claude之后，来到第一个选项，直接默认选择继续即可。
这时 Claude Code 就正式启动了。
通过以上步骤，你已经成功完成 Claude Code 的安装、环境配置信息和模型验证。下一步，就可以开始愉快地进行 AI 辅助开发了 ！
三、安装和使用 Claude Code（Vscode运行）
为了让 Claude Code 能在 VS Code 中无缝使用，需要完成插件安装、参数配置以及启动流程。下面按照操作顺序分步骤说明。
步骤 1：安装 Chat for Claude Code 插件
首先，打开 VS Code。点击左侧边栏的 扩展（Extensions） 图标，在搜索框输入：Chat for Claude Code，找到插件后点击 Install（安装）。
安装完成后，VS Code 左侧会新增一个 Claude 面板。
打开Claude Code Chat，根据上面已经配置好的Claude Code，这里就可以直接用了。是不是非常方便哈哈哈。
来到Claude Code Chat的设置这里，打钩"Enable Yolo Mode (Auto-allow all permissions)"可以添加给Claude Code的权限，就不需要每次点击那个"allow"的按钮了。
四、Claude Code 实践案例（含可直接使用的提示词）
做一个“明天吃什么”应用，请以 抽签x美食探险的风格，随机生成一个“明天吃什么"应用。需包含:
1.推荐菜名(可本地/全球随机，但是能在实际生活中找到)
2.食运签名(菜品背后的绝佳寓意)3.推荐理由(结合合菜品本身发散推荐理由)
风格整体需美观、有仪式感，符合美食氛围有食物emoji和音效，带惊喜感。
看起来感觉还行哈哈哈，这还只是一次运行的结果，后期可以添加更多的要素和直接做成一个小产品都行。
到这里，整个 Claude Code（本地部署）+ VSCode 插件可视化使用 的全流程就全部跑通啦！你会发现：其实真正复杂的只有第一次环境配置；
一旦把 Claude Code 配好，无论是在终端里写代码，还是在 VS Code 的 Chat 面板里进行可视化交互，都能体验到——“AI 程序员就在你电脑里”的感觉。后续你还能继续尝试：
给 Claude Code 添加更多系统能力（执行命令、运行脚本、自动创建文件）
把它与前端、后端、爬虫、小工具开发串联起来
甚至让它根据 UI 草图、设计稿、截图，直接生成可运行的完整项目
这才是 AI 编程的真正魅力：你写一句话，它写一整个功能。
如果你在配置过程中遇到任何报错、异常、权限问题，也可以继续来问我，我可以帮你排查——从 npm、环境变量、模型配置，到命令行问题全部都能搞定。
祝你早日用 Claude Code 做出你的第一个“小作品”！
我们下篇教程再见！
浙公网安备 33010602011771号