简介：这是一份VS Code（Visual Studio Code）安装与配置的完整图文教程文档，面向刚接触编程的入门学习者，以及需要快速配置开发环境的开发者。内容从官网下载、阅读许可协议、选择附加任务到完成安装均有详细说明，并覆盖中文语言包、JavaScript/HTML等常用扩展的安装方法，同时介绍了工作区、新建文件夹与文件、代码运行等基本操作，可帮助零基础用户顺畅完成编辑器部署与初始设置。资源为1个docx文档，大小约1.51MB，文字步骤搭配界面操作示意，适合对照练习或作为教学讲义使用。该文档目前已吸引202人学习，步骤清晰、覆盖安装到运行全流程，还附有注意事项与常见问题处理思路，学习后可独立完成VS Code环境搭建并开展简单项目编写。

1. 装 VS Code 之前，先想清楚这三件事

VS Code 是当前 Web 开发、前端练习和后端调试里最常用到的编辑器之一，新电脑到手第一件事往往就是装它。这份安装教程看着只有十几步，实际装起来却有不少容易被忽略的分叉路口：许可协议直接点同意没问题，但附加任务里的 PATH 选项没勾，后面在终端敲code命令就会报"不是内部或外部命令"；扩展装了一大堆，真正写 HTML 时语法提示却出不来，多半是语言包和插件的关系没理顺。这篇笔记按"安装前选型 → 安装中决策 → 安装后配置 → 踩坑记录 → 顺手配置"的顺序走一遍，适合刚接触编程的新手，也适合给同事快速装机时照着操作。

2. 安装 VS Code 的关键决策：许可协议、附加任务与安装版本

2.1 从官网下载时，先分清 System Install 和 User Install

打开 VS Code 官网下载页，Windows 用户会看到两个安装包选项：User Installer 和 System Installer。常见做法是推荐普通用户选 System Installer，因为安装后所有用户都能使用，而且右键菜单里的"Open with Code"注册更完整；如果你在公司电脑上没有管理员权限，才需要用 User Installer，它安装到当前用户的 AppData 目录下，不写注册表，也不需要管理员授权。

下载时还要注意架构选择。大多数新电脑是 64 位系统，官网默认给的 x64 版本就够用；只有碰到老旧的 32 位系统时才需要找 ia32 版本。ARM 架构的电脑（部分轻薄本和平板）建议选 ARM64 版本，性能上更匹配。这里有一个常见误解：下载页面通常默认显示 Windows 版本，macOS 和 Linux 用户需要手动切换标签页，macOS 有两个选择——Intel 芯片选 x64，Apple Silicon 选 ARM64，选错会导致安装后打开闪退。

2.2 许可协议和安装路径：两个容易被忽略的默认值

安装向导的第一步是许可协议，直接勾选"我同意此协议"并点击"下一步"即可，这一步不需要细读全文，但要注意下一步的"选择安装位置"。VS Code 默认会装到C:\Users\用户名\AppData\Local\Programs\Microsoft VS Code（User 安装）或C:\Program Files\Microsoft VS Code（System 安装）。我一般会建议你把安装路径改到 D 盘之类的非系统盘，比如D:\Software\VS Code，原因很简单：VS Code 后续会积累大量扩展缓存和用户数据，虽然单个体积不大，但长期使用后会产生数 GB 的增量文件，放在系统盘会让 C 盘空间越来越紧张。

安装位置下方还会出现"开始菜单文件夹"选项，默认是Visual Studio Code，保留默认即可，不影响的。这里有第二个常见决策点：是否勾选"将'使用 Code 打开'操作添加到 Windows 资源管理器目录上下文菜单"和"将'使用 Code 打开'操作添加到 Windows 资源管理器文件上下文菜单"。这两个选项建议全部勾上，因为日常开发中经常需要在项目文件夹上右键直接打开编辑器，没有这两个选项你每次都要先打开 VS Code 再去选择文件夹，操作效率低很多。

2.3 附加任务里的 PATH 选项：不勾选会留下长期隐患

进入"选择附加任务"界面后，有一个最容易出问题的选项："添加到 PATH（重启后生效）"。这个选项控制的是你是否能在命令行工具（CMD、PowerShell、终端）里直接输入code来启动 VS Code。如果不勾选，安装完成后你在终端输入code .会提示找不到命令，必须打开 VS Code 界面才能用，这对习惯了用终端打开项目的开发者来说很别扭。

另一个实用选项是"创建桌面快捷方式"，按需要勾选即可。还有"将'在终端中运行 Code 命令'添加到位于 PATH 中的相关命令"这个描述在不同版本中略有差异，但核心作用都是注册code命令。我见过很多人安装时没注意这个选项，后来每次开项目都要先打开 VS Code 再手动拖文件夹进去，用了一周才回头重新安装修复 PATH。所以这里宁可多勾选也不要不勾选。

2.4 安装过程与首次启动：解压和后台配置阶段

点击"安装"按钮后，Installation 界面会显示进度条，实际过程分为两段：第一段是解压安装包文件到指定目录，第二段是注册系统组件和创建快捷方式。全过程通常在 1-3 分钟内完成，取决于电脑磁盘速度。安装完成后不要急着关掉向导，点击"完成"按钮前注意看是否勾选了"启动 Visual Studio Code"选项——建议取消勾选，先让安装程序完全退出，再手动启动，避免首次启动时和安装进程产生文件占用冲突。

首次启动 VS Code 会看到英文界面，这是正常的。标题栏会显示 Welcome 标签页，左边有活动栏（图标依次是资源管理器、搜索、源代码管理、运行和调试、扩展），顶部有菜单栏。此时如果界面渲染异常、显示空白或者打字卡顿，优先检查显卡驱动——VS Code 基于 Electron 框架，对 GPU 加速依赖较强，老显卡或者驱动没更新的机器可能需要在启动参数里加--disable-gpu才能正常显示，这个后面避坑章节详细说。

3. 第一次打开 VS Code 后：语言包、扩展、工作区与文件准备

3.1 安装中文语言包：扩展搜索框和安装流程

VS Code 默认英文界面，第一次使用中文系统的用户建议先装中文语言包。左侧活动栏从上往下数第五个图标是扩展市场（也可以通过快捷键Ctrl+Shift+X打开），在搜索框输入"Chinese"，搜索结果第一个通常是"中文（简体）"，发布者为某大型软件公司开发工具部门，名称带Simplified字样。点击"安装"按钮后，扩展右下角会出现"重新加载"按钮，点击后编辑器会重启，重启后界面变成中文。

这里有个容易混淆的点：扩展市场里有多款"Chinese"相关扩展，有社区做的繁体转换插件、有代码注释翻译工具，实际需要的是官方标识的那一个，认准扩展描述里带"Language Pack"和"简体中文"关键词的版本。安装语言包不需要重启电脑，也不需要重新安装 VS Code，这是很多初学者的误区，以为必须要卸载重装才能换语言，其实扩展市场里点几下就完成了。

3.2 安装开发必备扩展：JavaScript、HTML 的选型思路

原教程中提到了安装 JavaScript 扩展、Open 扩展和 HTML 扩展，实际操作时建议按项目类型选，不要一把梭装十几个。以下是新手阶段的推荐组合：

安装方式统一：扩展市场搜索关键词，点"安装"，装完后 VS Code 会提示重新加载，点一下即可生效。注意不要看到"推荐"就全部安装，扩展装多了会让编辑器启动明显变慢。新手阶段装上述五个就够用，后面需要用到特定框架时再按需补充。

3.3 工作区概念与操作：添加文件夹到工作区

VS Code 的工作区不是一个抽象概念，它就是一个文件夹入口。主界面左侧的"资源管理器"面板上方有一行按钮，第一个是"资源管理器"，第二个是"搜索"，在资源管理器面板空白处点击"打开文件夹"按钮，或者通过菜单栏的"文件 → 将文件夹添加到工作区"来添加项目目录。这一步对应原教程中的"将文件夹添加到工作区"操作。

添加文件夹后，左侧面板会显示该目录下的所有文件和子文件夹。这里有一个新手常见疑问：直接"文件 → 打开文件夹"和"将文件夹添加到工作区"有什么区别？前者会关闭当前工作区并打开新文件夹，后者可以在已有工作区基础上追加多个文件夹，适合同时维护多个相关项目。教程里的操作路径是在工作区空白处右键 →"新建文件夹"，然后在新建的文件夹内再建子文件夹，形成层级结构。

3.4 创建 HTML 文件：语言模式、保存与运行

在工作区里新建文件的正确方式是：在左侧资源管理器中选择目标文件夹（比如 css-image-js 文件夹），点击面板顶部的"新建文件"图标（或右键 → 新建文件），输入文件名时要带扩展名，比如index.html，这样 VS Code 才能自动识别语言模式。如果新建的文件没有语法高亮，检查编辑器右下角语言模式是否显示为"HTML"，如果不是，点击语言模式标签然后在搜索框里选择"HTML"。

原教程最后强调"需保存输入好的代码，否则运行不成功"，这确实是初学者最容易踩的坑。VS Code 里打开 HTML 文件后，右键选择"Open with Live Server"或"在默认浏览器中打开"，浏览器打开的是磁盘上的文件内容，如果代码没保存（未保存的文件标签页会显示一个圆点），浏览器加载的是旧版本，看起来就像"代码没生效"。

实操常用到Ctrl+S保存，保存后浏览器手动刷新即可看到更新。如果用了 Live Server 扩展，保存后页面会自动刷新，连 F5 都不用按，这个体验在写页面样式时特别舒服，配合 CSS 修改能实现实时预览。

4. 避坑：VS Code 安装与首次运行中的 5 个高频问题

4.1 右键菜单里没有 "Open with Code" 选项

现象：安装过程完全正常，但文件夹右键菜单里找不到"使用 Code 打开"入口。

原因：安装时漏勾了"将'使用 Code 打开'操作添加到 Windows 资源管理器目录上下文菜单"选项，导致右键菜单注册项没写入系统。

解决：两种办法任选。第一种是重新运行安装程序（可以在"控制面板 → 卸载程序"里找到 VS Code 选择"修改"，或者直接重新下载安装包覆盖安装），在附加任务界面勾选缺失的选项。第二种是在默认设置里手动添加注册表项，但操作繁琐且容易写错，不推荐新手使用。覆盖安装不会影响已有的扩展和用户配置，放心操作。

4.2 终端输入code .提示找不到命令

现象：在 CMD 或 PowerShell 里输入code .回车，系统提示"不是内部或外部命令"或"无法识别'code' 术语"。

原因：安装时没有勾选"添加到 PATH"选项，或者勾选了但安装后没有重启终端。PATH 环境变量的修改需要在新开的终端窗口里才生效，已经打开的老窗口不会加载新变量。

解决：先关掉所有终端窗口重新打开一个，再次输入code -v检查。如果仍然提示找不到命令，说明安装时根本没勾选 PATH 选项，需要重新运行安装程序，在"选择附加任务"界面勾选对应选项后完成安装。验证成功的标准是code -v能输出版本号信息。

4.3 中文语言包安装后界面仍是英文

现象：安装了"中文（简体）"扩展并点击重新加载，但菜单栏、侧边栏依然是英文。

原因：扩展安装成功但语言设置没有切换。VS Code 的语言选择默认跟随操作系统的 UI 语言，部分精简版系统、英文系统环境变量会导致系统本身不报告中文区域。

解决：按下Ctrl+Shift+P打开命令面板，输入Configure Display Language并回车，列表里选择zh-cn，然后点击重启按钮。如果列表里没有zh-cn，说明语言包扩展没安装成功，回到扩展市场重新搜索安装，安装完成后重复上述步骤即可。

4.4 新建 HTML 文件没有代码提示和语法高亮

现象：新建的.html文件看起来像纯文本，标签没有任何颜色区分，输入<div也没有自动补全。

原因：文件没有扩展名，或者 VS Code 未能自动识别语言模式。另一种可能是用户安装了多款互相冲突的 HTML 扩展，导致提示服务出错。

解决：确认文件名以.html结尾。如果文件名正常但高亮缺失，点击编辑器右下角的语言模式标签（显示为"纯文本"或"Plain Text"），搜索html并选择"HTML"。高亮恢复后按Ctrl+Shift+P打开命令面板输入Developer: Reload Window重载编辑器。如果问题依旧，在扩展市场禁用所有非官方 HTML 扩展，然后逐个启用排查冲突源。

4.5 浏览器打开 HTML 页面显示旧内容

现象：修改并保存了代码，浏览器刷新后页面没有任何变化，或者显示的还是上一次的内容。

原因：一是保存没有真正成功（文件标签页上的圆点图标没有消失），二是浏览器缓存了旧文件，三是打开方式有问题——比如用 Live Server 打开了但服务器没有正确映射到当前工作区。

解决：按Ctrl+S保存并确认标签页上的圆点消失，然后在浏览器中强制刷新（Windows 下按Ctrl+Shift+R强制绕过缓存）。使用 Live Server 时，要确认启动入口是当前项目文件夹而不是单个文件，浏览器访问的地址应该是127.0.0.1:5500开头的本地服务器地址，而不是file://开头的本地文件路径。验证方式很简单：编辑器打开 HTML 文件，右键选择"Open with Live Server"，浏览器地址栏若显示file:///则是普通方式打开，需要用服务器方式打开才能实现实时刷新。

5. 安装完成后的验证清单与顺手配置：让编辑器符合个人习惯

装完 VS Code 并配好语言包、扩展和基础工作区之后，最后一步是验证整条链路是否通畅，同时把一些高频设置改到你顺手的状态。这套验证流程我在给同事装机时几乎每次都执行，用时大约 5 分钟，但能省下后面一星期的反复调试。

验证清单按顺序执行：第一步，打开 VS Code 后在任意文件夹内右键，确认能看到"通过 Code 打开"选项；第二步，在新建终端（Ctrl+\``）里输入code -v，确认命令能被识别；第三步，新建一个test.html` 文件并输入简单标签，确认语法高亮和标签补全正常；第四步，右键选择"打开实时预览"或"在浏览器中打开"，确认浏览器能加载文件；第五步，修改内容、保存、刷新，确认修改能正常响应用。五步全部通过，说明这个编辑器已经从"装好了"进入了"能干活"的状态。

顺手设置方面，我一般会在"文件 → 首选项 → 设置"里改动几个默认值。第一项是"Editor: Font Size"，文本编辑器默认字体偏小，高分辨率屏幕上建议调到 16 或 17；第二项是"Editor: Word Wrap"，代码换行默认关闭，看长代码要拖动横向滚动条很别扭，设为on后超长行自动换行；第三项是"Files: Auto Save"，我习惯选afterDelay并设置延迟 1000 毫秒，这样写完内容自动保存，就再也不会出现"改了代码忘保存导致浏览器显示旧内容"的情况。这三项设置都对应原教程中反复强调"要保存"的场景，自动保存打开后，那个坑基本不会再踩到。

还有两个设置值得额外记录。如果你希望资源管理器面板不显示.git、node_modules等目录，打开设置搜索files.exclude，把常用目录加进列表；如果你像我一样用五笔或拼音输入法，在输入中文时发现编辑器光标跟随异常，可能需要将兼容性设置里 "Editor: Suggest" 的preview选项关闭，这个属于小众问题，遇到再处理也可以。

一个更省事的做法是把常用配置写进settings.json，通过命令面板输入Preferences: Open Settings (JSON)打开，把下面的片段粘进去保存，编辑器会自动应用：

{ "editor.fontSize": 16, "editor.wordWrap": "on", "editor.tabSize": 2, "files.autoSave": "afterDelay", "files.autoSaveDelay": 1000, "files.exclude": { "**/.git": true, "**/node_modules": true }, "window.zoomLevel": 0 }

参数说明：editor.tabSize控制缩进宽度，设为 2 符合大多数前端项目的编码规范；window.zoomLevel控制整个界面的缩放比例，改成 1 等于整体放大 10%，如果觉得界面文字还是偏小可以调到这里；files.exclude里的**代表任意层级的目录，加进这个列表的文件夹不会出现在左侧资源管理器中，但文件仍然存在于磁盘上，不会误删数据。

配置完成后再走一遍前面说的五步验证清单，整个过程大约 10 分钟。从那以后我每次给新电脑配环境，都强制自己走一遍"右键菜单确认 → PATH 验证 → 新建文件 → 保存 → 浏览器刷新"这套完整流程，检查到哪一步卡住就当场解决，不把问题拖到写代码时再后悔。写代码时最怕的不是不会写，而是环境在关键时刻掉链子，这套验证加顺手配置的习惯帮我排掉了至少九成的低级故障，希望帮到你。

本文还有配套的精品资源，点击获取