序言版权声明、服务说明、转载规范和联系方式
本教程由「小荣的网络开发日志」实操整理编写,面向第一次接触代码编辑器的小白。
遇到操作问题可以联系作者咨询。承接网站、App、小程序和脚本定制开发,也提供 AI 编程教学与项目陪跑。
联系方式:微信 rongyaolg,电话 18375295913
遇到操作问题可以联系作者咨询。承接网站、App、小程序和脚本定制开发,也提供 AI 编程教学与项目陪跑。
联系方式:微信 rongyaolg,电话 18375295913
1 VS Code 是什么
VS Code,全名 Visual Studio Code,是微软推出的免费代码编辑器。
你可以把它理解成写代码的“工作台”:项目里的页面、样式、程序和配置文件都可以在这里查看和修改。它还带有终端和扩展市场,既能运行项目,也能通过插件增加代码提示、格式化和 AI 编程能力。
| 能力 | 小白怎么理解 |
|---|---|
| 编辑代码 | 像编辑文档一样打开和修改代码文件 |
| 管理项目 | 在左侧查看整个项目的文件和文件夹 |
| 运行命令 | 在内置终端中安装依赖、启动项目 |
| 安装插件 | 按项目需要增加中文、格式化、AI 等功能 |
| 查看问题 | 看到报错位置、Git 修改和文件状态 |
很多 AI 编辑器的界面都和 VS Code 相似。先认识文件区、编辑区、终端和扩展市场,以后换 Cursor、Trae 等工具也更容易上手。
2 下载 VS Code
打开官方下载页面:https://code.visualstudio.com/download
网站通常会自动识别你的电脑系统。Windows 用户下载 Windows 安装包,Mac 用户根据自己的芯片选择 macOS 版本。不确定芯片类型时,可以点击苹果菜单里的“关于本机”查看。
不要从不熟悉的软件下载站下载,避免安装到被修改过的版本。
3 Windows 安装
- 双击下载好的安装包。
- 阅读许可协议,选择同意后继续。
- 安装目录保持默认即可。
- 在“选择其他任务”页面,建议勾选“添加到 PATH”和右键菜单相关选项。
- 点击安装,完成后启动 VS Code。
“添加到 PATH”可以让你以后在终端里用命令打开 VS Code。如果安装时忘记勾选,也不影响先学习基本功能。
4 macOS 安装
- 打开下载好的安装文件。
- 将 Visual Studio Code 拖进 Applications(应用程序)文件夹。
- 从启动台或应用程序中打开 VS Code。
- 如果系统首次打开时询问是否信任,确认文件来自 VS Code 官网后选择打开。
5 设置中文界面
点击左侧像积木一样的“扩展”图标。
搜索 Chinese。
找到 Microsoft 发布的 Chinese (Simplified) Language Pack,点击 Install。

按照提示重启或切换语言。
重启后看到“文件、编辑、查看”等中文菜单,就说明设置成功。习惯英文界面的用户也可以保持默认,不影响后续操作。
6 完成检查
完成本篇后,你应该能够:
- 正常打开 VS Code。
- 找到左侧的资源管理器、搜索、Git、运行和扩展图标。
- 打开命令面板:Windows 使用 Ctrl + Shift + P,macOS 使用 Command + Shift + P。
下一篇会真正打开一个项目,并使用文件区和终端。