下载#

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

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

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

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

• 安装完成,运行VS Code

插件安装#

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

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

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

1. Chinese (Simplified) Language Pack

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

• 安装完毕之后

• 点击右下角的 “Change Language and Restart” 按钮,==重新启动服务==

2. HTML CSS Support

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

大大缩减了编写时间

3. JavaScript (ES6) code snippets

支持ES6语法提示

4. Mithril Emmet

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

==用于补全代码==

5. Path Intellisense

路径提示插件

6. Vue 3 Snippets

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

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

7. Auto Close Tag

• 自动闭合HTML/XML标签

8. Auto Rename Tag

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

9. open in browser

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

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

10. Live Server

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

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

11. Vue (Official)

• 这个插件包含了完整的 Volar 功能集
  • Vue Language Features (Volar)
    • 核心语言特性插件
  • TypeScript Vue Plugin (Volar)
    • TypeScript 类型检查的插件

12. File Utils

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

13. IntelliJ IDEA Keybindings

可在VSCode中使用IDEA的快捷键

14. ==主题颜色==

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

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

VS Code 配置#

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

点击 “设置” —> 点击右上角 “打开设置”

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

1
{
2
  "workbench.colorTheme": "Solarized Dark",
3
  "workbench.statusBar.visible": false,
4
  "editor.fontFamily": "'Courier New', Consolas, monospace",
5
  "editor.fontSize": 15,
6
  "editor.lineHeight": 1.8,
7
  "editor.tabSize": 2,
8
  "editor.codeActionsOnSave": {
9
    "source.fixAll": "explicit"
10
  },
11
  "editor.minimap.enabled": true,
12
  "liveServer.settings.donotShowInfoMsg": true,
13
  "git.confirmSync": false,
14
  "terminal.integrated.defaultProfile.windows": "Command Prompt"
15
}

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

Claude Code 插件#

Claude Code for VS Code

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

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

1
"claudeCode.preferredLocation": "panel",
2
  "claudeCode.environmentVariables":[
3
  { "name": "ANTHROPIC_BASE_URL", "value": "https://xxxx" },
4
  { "name": "ANTHROPIC_AUTH_TOKEN", "value": "xxxx" }
5
]
6
}

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

Windows安装#

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

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

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

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

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

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

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

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