VS Code 安装

下载

进入VS Code官网：https://code.visualstudio.com，点击 DownLoad for Windows下载windows版本

• 备注：
  • Stable：稳定版
  • Insiders：内测版

安装 --> 双击安装包，选择我同意此协议，再点击下一步

• 默认下一步 --> 更改安装路径

• 安装完成，运行VS Code

插件安装

• VS Code提供了非常丰富的插件功能

• 根据你的需要，安装对应的插件可以大大提高开发效率

完成前端开发，常见插件介绍：

• Chinese (Simplified) Language Pack

• 适用于 VS Code 的中文（简体）语言包

• 安装完毕之后

• 点击右下角的 "Change Language and Restart" 按钮，重新启动服务

• HTML CSS Support

在编写样式表的时候，自动补全功能

大大缩减了编写时间

• JavaScript (ES6) code snippets

支持ES6语法提示

• Mithril Emmet

一个能大幅度提高前端开发效率的一个工具

用于补全代码

• Path Intellisense

路径提示插件

• Vue 3 Snippets

在 Vue 2 或者 Vue 3 开发中提供代码片段，语法高亮和格式化的 VS Code 插件

• 能极大提高你的开发效率

• Auto Close Tag

• 自动闭合HTML/XML标签

• Auto Rename Tag

• 自动完成另一侧标签的同步修改

• open in browser

该插件支持快捷键与鼠标右键快速在浏览器中打开html文件

• 支持自定义打开指定的浏览器
  • 包括：Firefox，Chrome，Opera，IE以及Safari

• Live Server

一个具有实时加载功能的小型服务器

• 实时查看开发的网页或项目效果

• Vue (Official)

• 这个插件包含了完整的 Volar 功能集

  • Vue Language Features (Volar)
  • 核心语言特性插件
  • TypeScript Vue Plugin (Volar)
  • TypeScript 类型检查的插件

• File Utils

可以方便快捷的来创建、复制、移动、重命名文件和目录

• IntelliJ IDEA Keybindings

可在VSCode中使用IDEA的快捷键

• 主题颜色

• 点击左下角的 "设置" -> "主题" -> "主题颜色"

• 然后可以根据自己的喜好，选择喜欢的主题颜色

VS Code 配置

打开配置面板，根据自己的喜好，可以修改字体、背景样式等偏好设置

点击 "设置" --> 点击右上角 "打开设置"

然后在打开的 settings.json 中增加如下配置信息：

{
  "workbench.colorTheme": "Solarized Dark",
  "workbench.statusBar.visible": false,
  "editor.fontFamily": "'Courier New', Consolas, monospace",
  "editor.fontSize": 15,
  "editor.lineHeight": 1.8,
  "editor.tabSize": 2,
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  "editor.minimap.enabled": true,
  "liveServer.settings.donotShowInfoMsg": true,
  "git.confirmSync": false,
  "terminal.integrated.defaultProfile.windows": "Command Prompt"
}

具体配置项的含义，鼠标放在配置项上，会自动悬浮展示出来

Claude Code 插件

Claude Code for VS Code

在 settings.json 中增加如下配置信息：

• 第一句是自动添加的 --> 别忘了添加逗号

"claudeCode.preferredLocation": "panel",
  "claudeCode.environmentVariables":[
  { "name": "ANTHROPIC_BASE_URL", "value": "https://xxxx" },
  { "name": "ANTHROPIC_AUTH_TOKEN", "value": "xxxx" }
]
}

• 再次点击开 --> 跳过认证登录

中转设置( cc-switch )

https://github.com/farion1231/cc-switch/releases

API接口

DeepSeek 开放平台

• 网址 --> 实名认证 --> 充值(10元试试水)

• 复制 API key

sk-324xxx....

返回 cc-switch

右上角创建 --> 选中DeepSeek --> 复制API key

• 请求地址就是用 anthropic(默认) 格式就行

修改主模型 --> deepseek-v4-pro[1m]

• 右下角添加

• 重启 VS code --> 并简单测试

Windows安装

1)Git安装
C:\Windows\System32>git -v
git version 2.53.0.windows.2

📝 总结： 如果你不确定，就勾选它 —— 这是官方安装器为方便用户提供的“一键解决依赖”方案，虽然耗时稍长，但能避免后续 npm install 时因缺少编译工具而报错（如 gyp ERR!）

• ✅ 勾选 → 省心、自动化，适合绝大多数用户
• ❌ 不勾选 → 自定义灵活，适合有经验或特殊环境的用户

2)node.js安装
C:\Windows\System32>node -v
v24.15.0

3)切换下载源
C:\Windows\System32>npm config set registry https://registry.npmmirror.com/
# 将 npm 的默认源切换为 国内镜像源：npmmirror.com，用于加速下载包

4)下载claude-code
C:\Windows\System32>npm install -g @anthropic-ai/claude-code
'出现下面这两行说明安装成功 ✅️'
changed 2 packages in 18s

5)测试验证
# 重新打开一个窗口(管理员身份)
C:\Windows\System32>claude --version
2.1.132 (Claude Code)

6)跳过登录步骤
# 需要找到json文件(显示隐藏文件)
C:\Users\LENOVO(用户名)
'当前目录下,找这个文件'
    📌 .claude.json 
# 添加👇下面这个(英文逗号)
"hasCompletedOnboarding": "true"