简介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 CodeSystem 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 默认只有英文界面装完第一件事不是写代码而是把界面切到中文。打开左侧边栏的扩展图标或者直接按快捷键CtrlShiftX呼出扩展面板在搜索框输入Chinese搜索结果里排在最前面的通常是“中文简体语言包”名字自带“中文简体”字样发布方标识为官方身份。点击“安装”按钮装完后 VS Code 一般会弹窗提示重启以应用语言包。重启之后如果界面还是英文可以按CtrlShiftP打开命令面板输入Configure Display Language回车后选择zh-cnVS Code 会立即切换到中文界面。语言包只影响菜单、设置项、提示信息这些界面文字不影响 JavaScript、HTML 的代码补全和语法高亮这两套机制是分开的。语言包本身占用的磁盘空间很小大概几 MB不需要担心影响性能。很多教程会推荐装多个语言包我个人的习惯是只装中文一个。英文界面配合中文语言包来回切换没有意义代码提示本身是英文的界面语言反而是最不重要的一层。真正影响开发效率的是下面要说的代码类扩展。3.2 JavaScript 与 HTML 相关扩展搜索词和安装取舍输入里提到了安装 JavaScript、open、html 相关扩展对应的实际操作是到扩展面板搜索关键词然后选择高评价的扩展安装。这里有个需要澄清的点VS Code 对 JavaScript 和 HTML 的基础语法高亮是内置的不装任何扩展也能识别.js和.html文件。扩展市场上的 JavaScript、HTML 类插件主要补的是代码片段、自动补全和格式化能力。对于刚入门的学习场景我建议装这几个就够不要贪多搜索关键词推荐扩展解决什么问题javascriptJavaScript (ES6) code snippets输入clg直接补全console.log写练习代码效率高htmlHTML CSS Support在 HTML 的 class 属性里补全 css 类名避免手写错openOpen in Browser在当前浏览器打开 HTML 文件预览静态页面liveLive Server启动本地服务器修改代码后浏览器自动刷新Open in Browser 适合只写一个静态页面右键后选择浏览器直接打开Live Server 会更接近实际开发它会起一个本地端口文件保存后页面自动刷新。如果只是跑通安装流程用 Open in Browser 就够如果打算认真写前端建议直接用 Live Server。两者都装也不冲突但日常主力用一个即可。3.3 用命令行安装扩展code --install-extension 的批量方式扩展除了在图形界面点安装也可以使用命令行批量装。VS Code 安装时如果勾选了 PATHcode命令就带了一组扩展管理参数适合重装环境后一次性恢复所有插件# 安装中文语言包 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 relstylesheet hrefcss/style.css引用脚本写成script srcjs/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 语言”就是针对这种情况的补救措施。操作方式是新建文件后按CtrlK再按M打开语言模式列表输入html回车状态栏的语言标识就会变成 HTML。不过语言模式只是让编辑器识别语法真正决定文件能不能被浏览器当网页打开的是文件保存时的扩展名。保存文件用CtrlS这段操作在 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上。解决按CtrlShiftP打开命令面板输入Configure Display Language选择zh-cn确认后 VS Code 会自动重启并切换为中文。如果列表里没有zh-cn回到扩展面板检查语言包是否真的处于“已安装”状态有时安装进度条走完但插件的激活还没完成重新搜索并再点一次安装即可。5.4 右键运行 HTML 没有反应或页面空白现象写好index.html右键选择在浏览器中打开浏览器启动了但页面是空的或者显示的是上一次保存的旧内容。原因文件没有保存VS Code 编辑区显示的代码和磁盘上的文件不一致浏览器读取到的是旧版本。另一种情况是右键菜单里根本没有“Open in Browser”或“Open with Live Server”选项说明相关扩展未安装。解决先按CtrlS保存再重新右键运行。扩展没有安装就去扩展面板搜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 langzh-CN head meta charsetUTF-8 titleVS Code 安装验证/title /head body h1Hello, VS Code/h1 /body /html写完后按CtrlS保存。右键编辑器区域选择“Live Server: Open with Live Server”浏览器会自动打开一个本地地址页面上应该显示Hello, VS Code。如果只用 Open in Browser则右键选择“Open in Browser”浏览器会直接以file://协议打开本地文件。两种方式都能看到标题和标题文字说明从安装到运行整条链路通了。6.3 从安装到日常运行的固定习惯验证跑通后把整个流程固定成一套肌肉记忆先确认安装包类型是 User Installer再确认附加任务里 PATH 和上下文菜单勾上了装完第一件事装中文语言包然后按项目类型装扩展写文件先建目录再建文件保存后再运行。从那以后我每次换新机器或者帮同事排错都强制自己走一遍“安装 → 扩展 → 保存运行”这三步基本没有失手过。这套流程看起来琐碎但每一步对应的都是一类高频报错提前做掉能省下后面排查的半天时间希望帮到你。本文还有配套的精品资源点击获取
