手把手|VSCode搭建Claude编程环境,低成本用AI写代码

手把手|VSCode搭建Claude编程环境,低成本用AI写代码

📌 教程前言

作为海南大学大一学生,从零开始搞定VSCode调用AI写代码、做UI,全程无复杂操作,跟着步骤走就能成功。避开报错坑、网络坑、扣费坑,低成本用上高效AI编程工具,新手也能一次通关。

✅ 前期准备

  • 电脑系统:Windows(本教程适配Windows环境)
  • 提前装好:VSCode编辑器、Node.js(版本v24.14.0即可)
  • 备好手机号(用于DeepSeek平台注册)
  • 备用:网络环境稳定,避免安装卡顿

🔧 步骤一:全局安装Claude命令行工具

  1. 按下Win+X,打开Windows PowerShell,先检查Node版本,确认已安装
    (安装地址https://nodejs.org/en
node-v
  1. 执行安装命令,切记不要打错包名,少字母会直接报错
npminstall-g @anthropic-ai/claude-code 
  1. 等待安装完成,出现added 2 packages提示,即为安装成功

💡 报错避坑:如果提示404找不到包,一定是包名拼写错误,正确为claude-code,不是claud-code

4.安装git(安装地址https://git-scm.com/
检查安装

git--version

⚠️ 常见问题:直接运行报错解决

安装完成后,直接输入claude运行,会出现连接失败提示,这是正常情况:

claude 

报错提示:Unable to connect to Anthropic services,原因是大陆网络无法直连Claude官方,无需纠结,直接跳转下一步配置替代方案。

在文件管理器搜索栏搜索你的用户名(比如我的叫zc)找到上面写了claude的json配置文件,用vscode打开,用记事本也可以

在这里插入图片描述


在配置文件中加上这样一条配置

"hasCompletedOnboarding":true

记得要加上逗号符合json格式,可以的话,要豆包帮你检查格式

💰 步骤二:DeepSeek平台注册与API密钥获取

我们改用低成本的DeepSeek算力,性价比拉满,适合学生党

  1. 打开DeepSeek官方平台:https://platform.deepseek.com/
  2. 用手机号注册登录,完成实名认证
  3. 进入控制台,找到API Keys选项,点击新建密钥
  4. 复制保存好密钥(sk-开头),密钥只显示一次,丢失需重新创建
  5. 进入充值页面,最低充值10元即可,支持微信、支付宝,学生无压力

🔀 步骤三:CC-Switch工具配置(转发请求)

  1. 下载CC-Switch工具,选择Windows便携版,解压即可使用
  2. 运行exe文件,将Claude的请求转发至DeepSeek,解决网络无法访问的问题
  3. 按照工具提示,完成基础配置,绑定对应的API接口
在这里插入图片描述

⚙️ 步骤四:VSCode插件安装与配置

  1. 打开VSCode,左侧扩展栏搜索Claude Code,安装官方插件(安装最多的就是正确的)
  2. 安装完成后重启VSCode,确保插件生效
  3. 进入设置,配置API密钥、接口地址、模型名称,对接DeepSeek
  4. 保存配置,再次重启VSCode,完成全部部署

🚀 步骤五:测试使用,开始AI编程

  1. 打开VSCode右侧Claude面板,输入指令测试
  2. 输入简单需求,比如“写一段简约科技风HTML网页代码”,即可快速生成
  3. 可用于写代码、优化脚本、制作UI、写爬虫,效率直线提升
提示词


在这里插入图片描述

📝 重要注意事项(新手必看)

  1. 扣费说明:仅DeepSeek按token扣费,VSCode插件、CC-Switch、Claude命令行均免费,日常写代码成本极低,一天几块钱足够
  2. 密钥保管:API密钥切勿泄露,避免被盗刷余额
  3. 网络要求:全程无需特殊网络,普通校园网、家用网即可使用
  4. 模型选择:选用deepseek-chat模型,适配代码编写、UI设计,性价比最高

✨ 教程总结

全程几步就能搞定,告别复杂配置和高昂费用,大一新生也能轻松拥有专属AI编程助手,不管是写作业、做课程设计、做个人网页,都能大幅提升效率,轻松上手AI开发。


👉 关注我,持续更新大一学生AI编程干货

后续会分享更多爬虫ai高效使用技巧、AI写代码优化提示词、简约网页UI设计、低成本编程工具,带你轻松玩转AI开发,少走弯路,持续提升编程技能~

Read more

黑马程序员java web学习笔记--后端进阶(二)SpringBoot原理

目录 1 配置优先级 2 Bean的管理 2.1 Bean的作用域 2.2 第三方Bean 3 SpringBoot原理 3.1 起步依赖 3.2 自动配置 3.2.1 实现方案 3.2.2 原理分析 3.2.3 自定义starter 1 配置优先级 SpringBoot项目当中支持的三类配置文件: * application.properties * application.yml ❤ * application.yaml 配置文件优先级排名(从高到低):properties配置文件 > yml配置文件 > yaml配置文件 虽然springboot支持多种格式配置文件,但是在项目开发时,推荐统一使用一种格式的配置。

前端模块化开发:从面条代码到结构化代码的蜕变

前端模块化开发:从面条代码到结构化代码的蜕变 毒舌时刻 模块化开发?不就是把代码分成几个文件嘛,有什么大不了的?我见过很多所谓的模块化代码,其实就是把一堆函数随便塞进不同的文件里,根本没有任何结构可言。 你以为把代码分成模块就万事大吉了?别天真了!如果你的模块设计不合理,反而会让代码变得更加混乱。比如那些互相依赖的模块,就像一团乱麻,让你根本理不清头绪。 为什么你需要这个 1. 代码可维护性:模块化代码结构清晰,易于理解和维护,当需要修改某个功能时,只需要修改对应的模块即可。 2. 代码复用:模块化可以让你在不同的项目中复用相同的代码,减少重复开发的工作量。 3. 团队协作:模块化可以让不同的开发者负责不同的模块,减少代码冲突和沟通成本。 4. 性能优化:模块化可以帮助你实现代码分割,减少初始加载时间,提高应用的性能。 反面教材 // 这是一个典型的面条代码 let users = []; let products = []; function fetchUsers() { fetch('https://api.example.com/

【白话前端 09】HTML网页结构搭建:从语义化标签到整站规划

早期写网页,前端只有一个容器标签可用:<div>。 结果就是页面里堆叠了几百个 <div>。人眼能通过 CSS 样式看出哪里是头部、哪里是侧边栏。但对于搜索引擎爬虫、或是视障者的屏幕阅读器来说,这只是一坨没有主次的文本碎片。机器根本不知道 <div> 这几个英文字母代表核心内容。 HTML5 引入 <header>、<main> 等语义化标签,本质不是为了给页面换个长相,而是给网页写一份“机器能看懂的结构说明书”。 当把核心代码放进 <main>,把底部备案信息扔进 <footer>,爬虫一进来就明确知道:“抓取有效信息直接去 <main> 里找,底部的东西可以直接跳过。”这就是语义化的底层价值。 本文不背概念,

前端代码质量保证:让你的代码更可靠

前端代码质量保证:让你的代码更可靠 毒舌时刻 代码质量?听起来就像是前端工程师为了显得自己很专业而特意搞的一套复杂流程。你以为随便写几个测试就能保证代码质量?别做梦了!到时候你会发现,测试代码比业务代码还多,维护起来比业务代码还麻烦。 你以为ESLint能解决所有问题?别天真了!ESLint只能检查代码风格,无法检查逻辑错误。还有那些所谓的代码质量工具,看起来高大上,用起来却各种问题。 为什么你需要这个 1. 减少错误:代码质量保证可以帮助你发现和修复代码中的错误,减少生产环境中的问题。 2. 提高可维护性:高质量的代码更容易理解和维护,减少后期的维护成本。 3. 促进团队协作:统一的代码质量标准可以便于团队成员之间的协作,减少沟通成本。 4. 提高开发效率:高质量的代码可以减少调试和修复错误的时间,提高开发效率。 5. 提升代码安全性:代码质量保证可以帮助你发现和修复安全漏洞,提升代码的安全性。 反面教材 // 这是一个典型的代码质量问题示例 // 1. 代码风格不一致 function getUser(id) { return fetch(`/api/