简介：VS Code安装步骤文档面向刚接触Visual Studio Code的初学者，也适合需要快速完成环境配置的开发者参考。文档从访问官网选择对应系统版本开始，逐步讲解浏览许可协议、勾选同意、设置附加任务、执行安装与等待完成等环节，并在安装后补充中文语言包以及JavaScript、HTML等常用扩展的安装方法，帮助读者跨越界面语言和功能扩展的障碍。同时，文档还介绍了创建工作区、新建文件夹与文件、选择语言模式、保存并运行代码等基础用法，附带操作提示与常见注意事项，能降低新手在环境准备和初次使用时的出错概率。资源包共1个docx文档，大小1.51MB，步骤截图配合文字说明，按流程分节，便于边看边操作或随时查找。目前已有202人学习使用。无论是入门编程还是转向Web开发，这份简明指南都能帮助省去检索教程的时间，按步骤完成VS Code的安装和基础配置。
1. VS Code 安装从开始就可能翻车：User Installer 与 System Installer 到底差在哪
很多人第一次装 VS Code，卡住的地方根本不是代码，而是官网下载页上那个不起眼的下拉菜单。明明点了“下载 Windows 版”，装完却发现右键菜单里没有“通过 Code 打开”，终端里敲code直接提示找不到命令，或者等安装进度条走到 100% 才发现装到了 C 盘系统目录却没有任何权限。这些问题的根源几乎都指向同一个细节：安装包类型选错了。VS Code 安装教程在网上一搜一大把，但能把“User Installer 和 System Installer 的区别”“附加任务里勾哪几项”“扩展装完要不要重启”讲透的并不多。这篇笔记按一次完整的下载、安装、配置、运行 HTML 流程走下来，把每一步的选择原因和踩过的坑都摆到台面上，适合刚接触 VS Code、正在配环境的新手，也适合要给同事写安装文档的熟手对照着检查细节。
2. 下载与安装执行：许可协议、附加任务和 PATH 一条龙
2.1 官网下载入口：架构、平台、安装包类型三个选项怎么看
VS Code 的官网地址是 https://code.visualstudio.com/ ，打开后首页会根据当前操作系统自动给出一个下载按钮，Windows 用户看到的是 “Windows User Installer”。但页面下方和下载目录里其实藏着好几种安装包，我见过不少人直接点首页大按钮，结果装的 User Installer，后面在终端里想用code命令才发觉 PATH 没配全。
Windows 平台下主要有三种安装包：User Installer、System Installer 和 ARM64 版本。User Installer 装在当前用户的 AppData 目录下，不需要管理员权限，适合个人开发机；System Installer 装在 Program Files 目录下，安装时会请求 UAC 管理员授权，适合公司统一装机或者一台机器多人共用的情况。ARM64 则是给骁龙这类 ARM 处理器的 Windows 设备用的，绝大多数 x86 电脑不要碰。
我一般建议：Windows 个人开发机无脑选 User Installer。它不需要管理员权限，升级时不用反复去点“以管理员身份运行”，卸载也干净。如果之前装过老版本，优先在“设置 → 应用”里卸载干净再装新版，防止旧版残留的注册表项导致安装到一半报错。实际上下载时也可以直接用 winget 命令行来装，在 PowerShell 里执行：
# 用 winget 安装用户级 VS Code winget install Microsoft.VisualStudioCode --scope user--scope user对应上文说的 User Installer，改成--scope machine就是系统级安装。winget 方式适合批量装机或者不想去网页点按钮的场景，它会自动处理下载和解压，装完再手动验证code命令是否可用。
2.2 安装向导逐项说明：许可协议与附加任务参数表
双击安装包后，第一个界面是许可协议。这里只有“我同意此协议”可选，不同意就只能点取消退出，没有第二个分支。点击“下一步”后会进入“选择附加任务”界面，这步是整场安装里最容易埋坑的地方，所有后续“右键没有打开方式”“命令行找不到 code”这类问题，八成都是这步没勾对。
我把常见的附加任务整理成了表格，方便对照着勾：
| 附加任务 | 推荐值 | 理由 |
|---|---|---|
| 创建桌面快捷方式 | 按需 | 开始菜单里有，桌面图标不是必需 |
| 将“通过 Code 打开”添加到文件和目录上下文菜单 | 勾选 | 不加的话右键文件夹时没有入口，日常很别扭 |
| 将 Code 注册为受支持文件的编辑器 | 勾选 | 双击 .html、.js 文件会默认用 VS Code 打开 |
| 添加到 PATH | 勾选 | 不勾的话终端里无法使用code命令打开项目 |
| 在 Windows 资源管理器目录中显示“通过 Code 打开” | 勾选 | 与上下文菜单配合，文件夹右键直接进工作区 |
PATH 这一项是重中之重。勾选后安装程序会自动把 VS Code 的 bin 目录写进用户环境变量，装完重开终端就能用code .打开当前目录。如果这步漏掉了，后面再补环境变量虽然也能救，但步骤多一层，不如装的时候直接落定。验证是否生效可以开一个新的 PowerShell 窗口执行：
# 验证 code 命令是否进入 PATH code --version输出版本号说明命令已经生效；如果提示“code 不是内部或外部命令”，说明 PATH 没配上，需要手动补环境变量，具体操作放到第 5 章避坑清单里讲。
2.3 安装位置与解压逻辑：装到哪、升级时容易出什么问题
点击“安装”按钮之后，界面会显示一个进度条。这一步并不只是复制文件，VS Code 内部会先解压安装包到临时目录，再根据安装类型写入目标位置。User Installer 默认路径是C:\Users\你的用户名\AppData\Local\Programs\Microsoft VS Code，System Installer 默认路径是C:\Program Files\Microsoft VS Code。两者除了位置不同，文件权限和升级行为也不一样。
User 模式下次启动会检查更新，更新包同样下载到用户目录，不会触发 UAC 弹窗，这是它日常体验顺畅的主要原因。System 模式升级时经常弹出 Windows 的权限确认框，在锁定了用户权限的办公电脑上，这个问题尤其明显。可以用命令直接查看最终安装位置：
# 查看 user 安装目录下的 bin 文件是否存在 dir "$env:LOCALAPPDATA\Programs\Microsoft VS Code\bin"能列出code.cmd和code这两个文件，说明安装结构是完整的。安装结束后第一次启动 VS Code，界面默认是英文的，这是正常状态，语言包放在第 3 章单独处理。
3. 中文语言包与扩展安装：装完先切中文，再补 JavaScript 和 HTML 工具链
3.1 中文（简体）语言包：搜索 Chinese 之后为什么是它
VS Code 默认只有英文界面，装完第一件事不是写代码，而是把界面切到中文。打开左侧边栏的扩展图标，或者直接按快捷键Ctrl+Shift+X呼出扩展面板，在搜索框输入Chinese，搜索结果里排在最前面的通常是“中文（简体）语言包”，名字自带“中文（简体）”字样，发布方标识为官方身份。点击“安装”按钮，装完后 VS Code 一般会弹窗提示重启以应用语言包。
重启之后如果界面还是英文，可以按Ctrl+Shift+P打开命令面板，输入Configure Display Language，回车后选择zh-cn，VS Code 会立即切换到中文界面。语言包只影响菜单、设置项、提示信息这些界面文字，不影响 JavaScript、HTML 的代码补全和语法高亮，这两套机制是分开的。语言包本身占用的磁盘空间很小，大概几 MB，不需要担心影响性能。
很多教程会推荐装多个语言包，我个人的习惯是只装中文一个。英文界面配合中文语言包来回切换没有意义，代码提示本身是英文的，界面语言反而是最不重要的一层。真正影响开发效率的是下面要说的代码类扩展。
3.2 JavaScript 与 HTML 相关扩展：搜索词和安装取舍
输入里提到了安装 JavaScript、open、html 相关扩展，对应的实际操作是到扩展面板搜索关键词，然后选择高评价的扩展安装。这里有个需要澄清的点：VS Code 对 JavaScript 和 HTML 的基础语法高亮是内置的，不装任何扩展也能识别.js和.html文件。扩展市场上的 JavaScript、HTML 类插件，主要补的是代码片段、自动补全和格式化能力。
对于刚入门的学习场景，我建议装这几个就够，不要贪多：
| 搜索关键词 | 推荐扩展 | 解决什么问题 |
|---|---|---|
| javascript | JavaScript (ES6) code snippets | 输入clg直接补全console.log，写练习代码效率高 |
| html | HTML CSS Support | 在 HTML 的 class 属性里补全 css 类名，避免手写错 |
| open | Open in Browser | 在当前浏览器打开 HTML 文件，预览静态页面 |
| live | Live Server | 启动本地服务器，修改代码后浏览器自动刷新 |
Open in Browser 适合只写一个静态页面，右键后选择浏览器直接打开；Live Server 会更接近实际开发，它会起一个本地端口，文件保存后页面自动刷新。如果只是跑通安装流程，用 Open in Browser 就够；如果打算认真写前端，建议直接用 Live Server。两者都装也不冲突，但日常主力用一个即可。
3.3 用命令行安装扩展：code --install-extension 的批量方式
扩展除了在图形界面点安装，也可以使用命令行批量装。VS Code 安装时如果勾选了 PATH，code命令就带了一组扩展管理参数，适合重装环境后一次性恢复所有插件：
# 安装中文语言包 code --install-extension ms-ceintl.vscode-language-pack-zh-hans # 安装 Live Server，需要右键菜单起本地服务 code --install-extension ritwickdey.LiveServer # 安装 HTML CSS 类名补全 code --install-extension formulahendry.auto-rename-tag每条命令后面的参数是扩展的 ID，在扩展详情页的地址栏里能看到，同一个扩展的 ID 在重新安装后不会变化。用命令行安装的好处是不用在图形界面上一个个搜索，缺点是不会像界面那样实时展示进度，装完可以直接运行code --list-extensions查看当前已安装的全部扩展 ID，确认是否装全。
装扩展有一个常见的错误心态：看到推荐就装，最后装上二三十个。扩展越多，启动时加载的进程就越多，VS Code 开机会明显变慢。我现在的规则是严格按照项目类型装，纯 HTML 练习就只装语言包、Live Server 和代码片段类扩展，其他的等需要时再搜。
4. 工作区与目录结构：新建文件夹、语言模式和保存之间的配合
4.1 添加文件夹到工作区：和直接打开文件夹有什么不同
VS Code 没有传统 IDE 里那种“新建项目”的向导，它面对的基本单位就是文件夹。把文件夹加进来的方式有两种：一种是在欢迎页点击“打开文件夹”，另一种是菜单栏选择“文件 → 将文件夹添加到工作区”。两种方式都能看到左侧资源管理器里出现目录树，但背后有一点区别。
直接“打开文件夹”时，VS Code 只把当前文件夹当作工作区根目录，状态栏右下角显示的是文件夹名；“将文件夹添加到工作区”则可能生成一个.code-workspace文件，这个文件的作用是记录一个工作区里包含哪些根文件夹以及相关设置。如果只是处理一个项目目录，建议直接“打开文件夹”，少生成一个配置文件；如果同时要管理多个目录，比如一个课程作业分成了lesson1和lesson2两个文件夹，才需要考虑.code-workspace。
实际操作时，把文件夹从资源管理器窗口拖进 VS Code 窗口也能完成打开操作，这是最快的方式。我经常在配好工作区后用下面这个命令启动 VS Code 并直接进入当前目录，省去翻文件夹的步骤：
# 在 PowerShell 或 cmd 当前目录下打开 VS Code code .这个命令的前提是安装时 PATH 已配置，否则就需要使用 VS Code 内部的“以管理员身份运行”来补救，后面避坑章节会展开。
4.2 项目目录怎么建：css、image、js 三个目录的分工
输入里有一个关键操作：在工作区中新建文件夹css-image-js，并把js下的两个文件复制粘贴进去。这可能是一次课程作业的目录整理，实际更常见的做法是把样式、图片、脚本分别放到三个平行的目录里。一个最基础的前端页面目录结构长这样：
. ├── index.html ├── css/ │ └── style.css ├── image/ │ └── logo.png └── js/ ├── index.js └── utils.jsindex.html放在根目录，css目录放样式表，image目录放图片资源，js目录放脚本文件。HTML 引用这些文件时使用的是相对路径，比如引用样式写成<link rel="stylesheet" href="css/style.css">，引用脚本写成<script src="js/index.js"></script>。目录一旦建成，后续所有的文件引用都要跟这个结构走，否则预览时资源加载不出来。
在 VS Code 左侧资源管理器里新建文件夹非常简单，点击文件树顶部的新建文件夹图标，或者右键弹出菜单选择“新建文件夹”。我把这个操作总结成一句话：先建骨架，再写文件。不要先在桌面散落十几个零散文件，再往项目里拖，那样容易把引用路径搞乱。用命令在终端里创建也是一样的效果：
# 在当前工作区根目录下创建三个资源目录 mkdir css image js命令里的三个参数对应三个目录名，目录名用单数还是复数没有硬性规定，但css、image、js这三个写法是社区里最常见的约定，见名知意。
4.3 新建文件与语言模式：HTML 后缀和右下角语言栏的关系
新建文件时，VS Code 会根据文件扩展名自动判断语言模式。换句话说，文件保存为index.html，右下角状态栏就会显示“HTML”；保存为style.css，右下角自动切到“CSS”。如果新建文件时不带任何扩展名，比如直接叫新建文件，VS Code 会把它当纯文本处理，右下角显示“纯文本”，此时写 HTML 标签不会有任何语法高亮。
输入里提到的“新建文件 → 选择 HTML 语言”，就是针对这种情况的补救措施。操作方式是：新建文件后，按Ctrl+K再按M，打开语言模式列表，输入html回车，状态栏的语言标识就会变成 HTML。不过语言模式只是让编辑器识别语法，真正决定文件能不能被浏览器当网页打开的，是文件保存时的扩展名。
保存文件用Ctrl+S，这段操作在 VS Code 里比其他任何步骤都容易忽略。输入的项目正文里特别标注过“需保存输入好的代码，否则运行不成功”，这句话是真实的血泪经验：文件内容在内存里编辑了很久，但磁盘上的版本还是旧的，右键运行浏览器打开的自然是旧页面。养成写完就存的习惯，比装任何扩展都重要。
5. 安装配置避坑指南：五个高频报错逐个拆解
5.1 右键菜单没有“通过 Code 打开”
现象：安装完成并重启电脑后，在文件夹或文件上点右键，菜单里没有“通过 Code 打开”的选项。
原因：安装向导的“选择附加任务”步骤里没有勾选“添加到上下文菜单”。这一步默认可能是不勾选的，很多新手一路点“下一步”就跳过了。
解决：重新运行下载的安装包，选择“修改”模式，安装向导会重新走到“选择附加任务”界面，把上下文菜单相关的两个复选框都勾上，再继续完成即可，不需要先卸载。如果不想重新装，也可以直接打开 VS Code，在设置里搜索explorer找相关配置，但恢复右键菜单的速度远不如重跑一次安装向导快。
5.2 终端执行 code 命令报错：PATH 没生效
现象：打开 PowerShell 输入code --version，提示“code 不是内部或外部命令”，或者“无法将 code 项识别为 cmdlet 的名称”。
原因：安装时没有勾选“添加到 PATH”，VS Code 的 bin 目录不在系统环境变量里，终端找不到可执行文件。
解决：打开系统环境变量设置，在用户变量的Path中追加一行C:\Users\你的用户名\AppData\Local\Programs\Microsoft VS Code\bin。保存后必须新开一个终端窗口才能生效，已经打开的窗口不会自动刷新环境变量。验证时重新输入code --version，能输出版本号即恢复。
5.3 语言包装完界面还是英文
现象：扩展面板里搜到“中文（简体）”并安装了，重启 VS Code 后界面依然是英文。
原因：语言包安装成功后需要重启才能生效，但部分情况下重启也没触发语言切换，因为 VS Code 的显示语言配置仍然留在了默认的en上。
解决：按Ctrl+Shift+P打开命令面板，输入Configure Display Language，选择zh-cn，确认后 VS Code 会自动重启并切换为中文。如果列表里没有zh-cn，回到扩展面板检查语言包是否真的处于“已安装”状态，有时安装进度条走完但插件的激活还没完成，重新搜索并再点一次安装即可。
5.4 右键运行 HTML 没有反应或页面空白
现象：写好index.html，右键选择在浏览器中打开，浏览器启动了但页面是空的，或者显示的是上一次保存的旧内容。
原因：文件没有保存，VS Code 编辑区显示的代码和磁盘上的文件不一致，浏览器读取到的是旧版本。另一种情况是右键菜单里根本没有“Open in Browser”或“Open with Live Server”选项，说明相关扩展未安装。
解决：先按Ctrl+S保存，再重新右键运行。扩展没有安装就去扩展面板搜open in browser或live server安装。用 Live Server 时还需要注意，它默认只对工作区内的文件生效，如果 HTML 文件是单独从别的路径打开的，可能出现无法启动服务的情况，把文件所在文件夹添加到工作区再试。
5.5 扩展装到一半失败或一直在转圈
现象：点击扩展的“安装”按钮后，进度条长时间不结束，或者弹出“无法安装此扩展”的提示。
原因：扩展市场下载依赖网络连接，网络不通畅或者访问扩展服务超时时，VS Code 不会像普通软件那样给出特别明确的报错，只是卡住或提示失败。
解决：先检查网络是否正常，换个网络环境重新试一次，比如从公司网络切到手机热点。如果网络正常但仍然失败，可以打开 VS Code 设置，搜索proxy检查代理配置是否符合当前网络要求，因为错误的代理设置会让扩展市场请求被拦。扩展安装是重试性很高的操作，失败后直接在扩展面板再点一次安装通常就能恢复，不用重启 VS Code。
6. 验证跑通：保存、右键运行一个 HTML 页面打完全部流程
6.1 验证 code 命令与版本
配置到这里，安装是否成功已经不只是“图标能双击打开”这么简单了，我习惯用三个命令做一轮完整的检查。打开新的终端窗口：
# 查看 VS Code 版本号 code --version # 列出已安装扩展，确认语言包和运行插件在列 code --list-extensions第一个命令输出版本号和 commit id，说明安装文件和 PATH 都正确。第二个命令应该能看到中文语言包和 Live Server 相关的扩展 ID。这一步能立刻暴露前面提到的 PATH 未配置问题，不用等用到的时候才发现终端里敲不出code。
6.2 最小 HTML 页面跑通
新建一个练习文件夹，比如在桌面创建my-page，在 VS Code 里打开它，新建index.html，写入下面这段最小页面：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>VS Code 安装验证</title> </head> <body> <h1>Hello, VS Code</h1> </body> </html>写完后按Ctrl+S保存。右键编辑器区域，选择“Live Server: Open with Live Server”，浏览器会自动打开一个本地地址，页面上应该显示Hello, VS Code。如果只用 Open in Browser，则右键选择“Open in Browser”，浏览器会直接以file://协议打开本地文件。两种方式都能看到标题和标题文字，说明从安装到运行整条链路通了。
6.3 从安装到日常运行的固定习惯
验证跑通后，把整个流程固定成一套肌肉记忆：先确认安装包类型是 User Installer，再确认附加任务里 PATH 和上下文菜单勾上了；装完第一件事装中文语言包，然后按项目类型装扩展；写文件先建目录再建文件，保存后再运行。从那以后我每次换新机器或者帮同事排错，都强制自己走一遍“安装 → 扩展 → 保存运行”这三步，基本没有失手过。这套流程看起来琐碎，但每一步对应的都是一类高频报错，提前做掉能省下后面排查的半天时间，希望帮到你。
本文还有配套的精品资源，点击获取
