VSCode下载安装使用教程：中文包、扩展与HTML工作区配置

简介这份PDF面向零基础编程学习者与刚接触前端开发的新手围绕VSCode的获取与上手展开重点解决编辑器从下载、安装到能正常写代码之间的入门门槛问题。包内仅1个PDF文件约2.12MB篇幅精简、步骤配图清晰适合边看边在电脑上对照操作。内容涵盖软件定位与功能概述、官方下载地址与版本选择安装环节的协议确认、路径设置、开始菜单添加、附加任务勾选与安装确认以及中文语言包的安装和界面切换、语言类插件的按需扩展、项目文件夹导入、设置优化与基础学习资源指引末尾还说明VSCode没有内置新建项目功能需手动创建文件夹导入并新建HTML文件的实际做法。已有1496人学习可作为课程配套讲义或自学参考帮助读者一次完成环境搭建减少安装配置中的反复试错。1. 从一份安装清单开始VSCode下载与安装使用教程到底解决什么问题第一次装 VSCode 的人最容易把《VSCode下载与安装使用教程》当成一份普通说明书点下一步、装完、打开结束。真到用的时候才发现安装路径、中文语言包、扩展、打开文件夹这几步只要错一个后面写 HTML 就会反复返工。这份教程的价值不在“会点安装按钮”而在于把下载入口、安装向导、中文界面、扩展、文件夹工作区和新建文件串成一条能走通的路。它适合三类人刚接触编辑器、需要一份按步骤走的安装清单装过但界面仍是英文、扩展乱装、终端命令找不到的人以及想用 VSCode 写静态页面、却卡在“没有新建项目”这一步的人。教程没有把 VSCode 讲成大而全的 IDE而是围绕“装好、调顺、能写第一个文件”展开这个定位很务实。2. 下载与安装安装包类型、路径和勾选项怎么定安装向导走完并不等于能顺手写代码。下载页面上给的是主下载按钮安装向导里还有路径、开始菜单、附加任务等选项这些选项在安装当天看起来只是勾选框过几天就会变成“命令行找不到 code”“右键没有打开方式”“卸载重装还是旧配置”的源头。先把安装这一层做对后面中文包和扩展才有稳定的底座。2.1 先分清安装包与下载入口下载页通常会识别当前系统给出一个主下载按钮旁边还有下拉入口用于选择其他平台版本。对大多数桌面用户来说主按钮就是合适的选择如果机器是 64 位还是 ARM 架构拿不准先在系统信息里确认再回到下载页选择对应安装包。这里不建议在第三方下载站拿“高速版”“绿色版”安装路径和后续更新都容易出玄学问题。常见做法是先确认系统架构再进官网下载页点主下载按钮如果主按钮给出的版本和当前系统不匹配再用下拉入口手动选。下载完成后不要急着双击先看文件名里是否带系统标识和架构标识避免把 ARM 包装到普通机器上或者把压缩包当成安装包。安装包类型上常见有“用户级安装”和“系统级安装”两类。用户级安装不需要管理员权限配置落在当前用户目录适合个人开发机系统级安装会写系统目录适合多人共用机器或需要统一管理的环境。教程没有展开这两类安装包的差异但实际选择时个人机器优先用户级减少权限和后续更新问题。选择项常见取值适用场景注意点安装范围当前用户 / 所有用户个人机 / 共用机共用机改系统级前确认权限安装路径默认路径 / 自定义路径默认省事 / 磁盘分区管理路径避免中文、空格和特殊符号开始菜单创建 / 不创建需要快速启动不创建时用桌面快捷方式或命令启动附加任务桌面图标、右键菜单、PATH按需勾选PATH 影响命令行能否直接启动文件关联按需选择想双击文本文件进入编辑器不要抢走系统默认打开方式安装路径这一项值得单独说。默认路径通常在当前用户目录下权限问题少自定义路径最好放在纯英文目录例如D:\devtools\vscode不要放在“新建文件夹”“软件”这类带中文或空格的路径里。扩展、终端、调试器偶尔会对路径中的空格和中文敏感这类问题不是每次必现但一旦出现排查成本很高。注意安装路径不要选在临时目录、下载目录或同步盘根目录。临时目录可能被清理同步盘会在安装和更新时锁文件后续扩展加载失败很难定位。2.2 安装向导每一步的参数与后果安装向导的页面不多但每一步都有后果。第一页是许可协议确认后进入路径选择路径页可以浏览目录也可以直接输入开始菜单页决定是否在开始菜单生成快捷方式附加任务页是一组勾选框决定桌面图标、右键菜单、PATH 等行为最后一页确认信息后开始安装。教程按“点击我同意—选择路径—添加到开始菜单—按需勾选—确认安装”的顺序走这个顺序没有问题关键是勾选前想清楚用途。附加任务里的“添加到 PATH”最容易被忽略。勾选后可以在终端里直接输入code打开编辑器或者在项目目录里输入code .把当前文件夹作为工作区打开。不勾选也能用但每次都要从开始菜单启动再手动打开文件夹日常效率会低一截。如果安装时没勾后面也可以手动把安装目录下的可执行文件路径加入环境变量只是多一步操作。下面这段命令用来验证命令行入口是否可用安装完成后在终端里执行# 查看 code 命令是否在 PATH 中以及指向哪个安装位置 code --version code --helpcode --version会输出编辑器版本和当前使用的命令行入口如果提示“不是内部或外部命令”说明 PATH 没配好或者安装时没有勾选命令行入口。code --help用来确认命令本身可用输出里能看到打开文件、打开文件夹、安装扩展等参数。两个命令都不需要管理员权限普通终端即可。安装向导里的“创建桌面快捷方式”按个人习惯勾选。桌面图标多的人可以不勾改用开始菜单或命令行启动经常给别人演示的人可以勾上减少找入口的时间。右键菜单里的“在文件夹中打开”适合经常从资源管理器进入项目的人但也有人觉得右键菜单太长这时不勾即可后面用code .代替。安装进度条走完后不要立刻开始装扩展。先启动一次确认能正常打开窗口再关闭。第一次启动会创建用户配置目录如果这一步就报错后面装中文包和扩展都会受影响。安装完成后立刻装一堆插件是把安装问题和扩展问题混在一起排查时很难分清是谁的问题。2.3 安装后的首次启动检查首次启动后先看三个地方窗口能否正常出现、左下角是否有账户或设置入口、命令面板能否打开。命令面板是 VSCode 的中枢按CtrlShiftP能拉出输入框输入“设置”“扩展”“终端”等关键词都能找到对应命令。命令面板打不开说明快捷键被其他软件占用或者安装包不完整先解决这个再继续。接着检查终端。按Ctrl打开集成终端看终端类型和当前路径。默认终端可能是系统自带终端路径通常是用户目录或当前工作区目录。如果终端启动失败常见原因是默认终端配置被改过或者系统终端本身不可用。教程没有展开终端配置但首次启动时确认终端能打开后面跑本地静态服务器会省很多事。再检查扩展面板能否加载。左侧活动栏点击扩展图标搜索一个常见关键词看列表能否正常返回。扩展面板加载失败通常是网络或代理配置问题但这里不展开网络配置只确认面板本身能用。如果扩展面板空白、一直转圈先重启编辑器再检查系统时间和网络设置不要一开始就重装。首次启动检查可以按下面这张表走一遍检查项操作正常表现异常处理窗口启动双击快捷方式主窗口正常出现看安装路径权限、杀毒拦截记录命令面板CtrlShiftP出现命令输入框检查快捷键冲突集成终端Ctrl终端面板打开检查默认终端配置扩展面板点击扩展图标列表能加载重启、检查网络和时间命令行入口终端执行code --version输出版本信息补 PATH 或重新勾选安装项这张表不是走形式。安装当天多花三分钟后面少花半小时找“为什么 code 命令不能用”。尤其是 PATH 这一项很多人装完能用重启终端后失效原因就是安装时没勾选或者勾选后没有新开终端。环境变量在旧终端里不会自动刷新新开一个终端再试是最省事的验证方式。3. 中文界面与扩展语言包、插件和配置文件的落地顺序安装完成后第一件影响体验的事不是装多少插件而是界面语言。英文界面不是不能用但对刚上手的人菜单和设置项全是英文找“自动保存”“格式化”“终端”会多花时间。中文语言包安装本身不复杂复杂的是装完没生效、重启后仍是英文、扩展面板里搜到多个相似条目。把语言包和扩展的顺序理顺后面写代码才不会被界面问题打断。3.1 中文语言包的安装与重启验证中文语言包的入口在扩展面板。打开扩展面板搜索“中文”或“Chinese”列表里会出现语言包类扩展选择下载量高、标识清晰的那个点击安装。安装完成后编辑器通常会提示重启或更改显示语言按提示操作。重启后界面变成中文说明语言包生效如果仍是英文先不要重复安装按下面的顺序排查。第一步看扩展是否真的安装到了当前用户。扩展面板里已安装列表能找到语言包说明文件已下载找不到说明安装没有完成。第二步看是否点了“更改显示语言并重启”。有些语言包安装后只下载文件不会自动切换需要手动执行“配置显示语言”命令。第三步看是否被其他配置覆盖。用户设置或工作区设置里如果写死了语言项语言包会被绕过。常见做法是安装语言包后按CtrlShiftP打开命令面板输入“显示语言”或“Configure Display Language”选择中文再重启。这个步骤比单纯点“安装并重启”更稳因为它明确告诉编辑器用哪种语言。重启后如果界面仍是英文打开命令面板看当前显示语言配置确认没有被工作区设置覆盖。注意不要在多个工作区里分别装不同语言包。语言包是用户级扩展工作区级安装容易造成“这个项目中文、那个项目英文”的错觉实际是扩展作用域没理清。语言包生效后不建议立刻装十几款插件。先把界面语言固定再按当前要写的语言栈装扩展。写 HTML 就先装 HTML 相关支持写 Python 就先装 Python 相关支持写 Markdown 就先装 Markdown 预览。按语言栈装扩展比按“热门榜单”装更不容易冲突。热门榜单里的插件很多是主题、图标、辅助工具装多了会拖慢启动还会让右键菜单变长。3.2 扩展安装的取舍按语言栈而不是按热度扩展面板的搜索结果是按关键词和热度排序的热度高不代表适合当前项目。比如同样是格式化工具有的只支持一种语言有的会接管所有文件的保存动作同样是预览工具有的会启动本地服务器有的只是静态预览。装之前看三件事支持的语言、最近更新情况、是否需要额外配置。教程里提到“点击浏览语言拓展可以按需安装语言插件”这个“按需”是关键。我一般会分三层装扩展第一层是语言支持当前写什么语言就装什么第二层是效率工具比如代码格式化、括号配色、路径补全第三层是项目相关比如特定框架的片段提示。第一层必须装第二层按习惯装第三层等项目真正用到再装。三层混在一起装启动慢、冲突多卸载时也不知道该卸谁。扩展类型什么时候装典型作用常见误装后果语言支持确定当前语言栈后语法高亮、补全、跳转装多个同语言扩展补全重复格式化工具需要统一缩进和保存格式保存时自动格式化多格式化器争抢保存动作预览工具写页面需要实时看效果本地预览、热更新端口冲突、预览不刷新主题图标界面需要可读性调整配色、文件图标装太多拖慢启动项目辅助项目确实用到时片段、框架提示工作区变重右键菜单膨胀扩展装完后打开扩展面板的“已安装”列表把不认识的、重复功能的、很久没更新的扩展禁用或卸载。禁用比卸载更适合排查先禁用重启看问题是否消失确认是它的问题再卸载。直接卸载会丢失该扩展的配置有些配置写在用户设置里卸载后残留项还会影响其他扩展。3.3 settings.json 的最小可用配置图形化设置页可以点选但有些项在设置页里藏得深直接改settings.json更快。打开命令面板输入“打开设置(JSON)”或“Open Settings (JSON)”进入用户设置文件。第一次打开可能是一个空对象{}把下面这组最小配置放进去保存后立即生效。{ // 编辑器基础显示 editor.fontSize: 14, editor.tabSize: 2, editor.formatOnSave: true, // 文件保存策略延迟自动保存减少手动 CtrlS files.autoSave: afterDelay, files.autoSaveDelay: 1000, // 启动时不自动打开上次的编辑器减少冷启动负担 workbench.startupEditor: none, // 关闭匿名使用数据上报按个人偏好选择 telemetry.telemetryLevel: off }editor.fontSize控制编辑器字号14 是常见起点屏幕小可以降到 13外接显示器可以升到 15。editor.tabSize控制一个制表符显示为几个空格前端项目常用 2后端项目常用 4按团队规范改。editor.formatOnSave打开保存时格式化前提是已经装了对应语言的格式化扩展否则不会生效。files.autoSave设为afterDelay表示停止输入一段时间后自动保存files.autoSaveDelay设为 1000 毫秒。这个组合适合写小页面和脚本不适合需要精确控制保存时机的场景如果项目要求手动保存把files.autoSave改成off。workbench.startupEditor设为none表示启动时不自动恢复上次的编辑器冷启动更快但会失去“上次没关的文件”的便利按习惯取舍。telemetry.telemetryLevel是使用数据上报开关设为off关闭。这个项不影响代码功能按个人偏好设置即可。改完保存如果某项下面出现黄色波浪线说明配置项名称或取值不被当前编辑器识别先删掉那一项再查对应版本的设置名称不要带着错误配置继续装扩展。提示改settings.json前先复制一份原文件或者用版本控制管理用户配置目录。配置项写错不会导致编辑器打不开但会让某些功能静默失效排查时容易误判成扩展问题。4. 打开文件夹而不是新建项目工作区、文件与HTML起步教程里有一句很关键的话VSCode 没有“新建项目”只能手动新建文件夹导进去然后创建文件例如 HTML。这句话对新手不太友好但它是理解 VSCode 工作方式的关键。VSCode 不是那种一打开就让你选“新建 Web 项目”的 IDE它把“项目”拆成了文件夹和工作区。理解这一点后面打开项目、切换项目、配置项目级设置都不会拧巴。4.1 为什么VSCode没有“新建项目”VSCode 的定位是编辑器不是项目脚手架。它不预设项目类型也不强制目录结构所以没有“新建项目”按钮。你给它一个文件夹它把这个文件夹当作工作区文件夹里的文件、子目录、配置文件共同构成项目。这个设计的好处是轻坏处是新手不知道从哪里开始。教程让用户手动新建文件夹再导入就是在补这个认知差。常见做法是先在文件系统里建一个纯英文、无空格的目录例如D:\work\html-demo再用 VSCode 的“打开文件夹”打开它。不要用“新建文件”然后随便保存到桌面那样文件没有工作区终端路径、扩展作用域、设置作用域都会乱。打开文件夹后左侧资源管理器显示的是这个目录的树终端默认也在这个目录下启动后续相对路径才成立。工作区还有一个好处项目级设置可以写在.vscode/settings.json里和用户设置分开。比如某个项目要求 4 空格缩进另一个项目要求 2 空格就可以在工作区设置里覆盖不影响全局。教程没有展开工作区设置但实际使用时项目级配置比全局配置更稳尤其是多人协作或同一台机器上跑多个项目。注意不要直接打开单个 HTML 文件就开始写项目。单文件模式下终端路径可能停在用户目录相对路径引用图片、CSS、JS 都会出问题。先打开文件夹再在文件夹里建文件。4.2 用文件夹组织工作区从空目录到可运行页面从空目录开始步骤不复杂但每一步都要落在正确的位置。先建项目根目录再在根目录下建index.html需要样式就建css目录需要脚本就建js目录需要图片就建images目录。目录名用英文小写避免空格和特殊符号。这个结构不是强制规范但能让相对路径清晰后面加文件不用重新理目录。在 VSCode 里打开文件夹后左侧资源管理器空白是正常的因为目录里还没有文件。点击资源管理器顶部的新建文件图标输入index.html回车。文件会建在当前选中的目录下如果选中的是子目录文件就建在子目录里。建完后在编辑区输入基础 HTML 结构保存。此时文件已经落在项目目录里终端路径也应该是项目根目录。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title第一个页面/title link relstylesheet href./css/style.css /head body h1Hello VSCode/h1 script src./js/main.js/script /body /html这段 HTML 里langzh-CN声明页面语言meta charsetUTF-8避免中文乱码viewport让移动端按设备宽度渲染。link和script使用相对路径./css/style.css、./js/main.js前提是项目根目录下确实有这两个目录和文件没有就先建空文件否则浏览器控制台会报 404。路径前面的./表示当前目录删掉也能用但保留更直观。建完index.html后在资源管理器里右键项目根目录选择“在集成终端中打开”终端路径应该显示项目根目录。执行pwdmacOS/Linux或cdWindows确认当前位置。如果终端路径不对说明打开的是单文件而不是文件夹或者终端默认目录被改过。路径不对时相对路径引用会全部错位这是新手最常见的翻车点之一。4.3 用任务与预览把HTML跑起来静态 HTML 可以直接双击用浏览器打开但更稳的方式是起一个本地静态服务器。直接用file://打开时某些浏览器的跨域策略、模块加载、相对路径行为会和服务器环境不一致。起本地服务器后页面通过http://localhost:端口访问路径行为和真实部署更接近排查问题时少一层干扰。如果机器上有 Python可以在项目根目录执行# 在项目根目录启动静态服务器端口 8000 python -m http.server 8000 # 如果 8000 被占用换一个端口 python -m http.server 8080python -m http.server会把当前目录作为网站根目录8000是端口号。执行后在浏览器地址栏输入http://localhost:8000就能看到index.html。终端里会打印请求日志刷新页面时能看到对应记录如果页面 404先看终端日志里的请求路径再检查文件名大小写和目录层级。停止服务器按CtrlC。没有 Python 也可以用编辑器里的预览扩展。装一个支持本地预览的扩展右键 HTML 文件选择“Open with Live Server”或类似入口扩展会自动起服务器并打开浏览器。不同扩展的入口名称不一样装之前看说明不要同时装多个预览扩展否则端口和右键菜单会打架。预览扩展的热更新很方便但端口冲突时要会换端口或者关掉占用端口的进程。预览方式启动成本适合场景注意点浏览器直接打开文件最低单文件、无模块加载file://路径行为可能不同Python 静态服务器低静态页面、相对路径验证端口占用时换端口编辑器预览扩展中需要热更新、频繁改页面避免多个预览扩展同时启用项目构建工具高框架项目、需要编译按项目文档配置不硬套本地服务器跑起来后改 HTML 保存刷新浏览器就能看到变化。如果用了热更新扩展保存后浏览器自动刷新没有热更新就手动刷新。这个阶段不要急着装框架和构建工具先把“文件夹—文件—相对路径—本地服务器”这条链路走通。链路通了后面换任何框架都只是换工具不会卡在“为什么我的 CSS 不生效”。5. 避坑与排查安装、中文包、扩展和路径的五个高频翻车点安装和基础使用的问题大多不是编辑器本身坏了而是安装选项、扩展作用域、终端路径、配置文件残留这几类原因。下面五条是实际使用中最容易遇到的翻车点每条按“现象—原因—解决”拆开。遇到问题时先按顺序排查不要一上来就卸载重装卸载重装不一定清配置反而可能把问题保留下来。5.1 安装后命令找不到现象终端里输入code .提示“不是内部或外部命令”但编辑器本身能正常打开。原因通常有两个安装时没有勾选“添加到 PATH”或者勾选了但没有新开终端旧终端的环境变量没有刷新。还有一种情况是装了两个版本命令行指向了已被删除的旧路径。解决先关掉所有终端窗口重新打开一个终端再执行code --version。仍然找不到就打开安装目录确认可执行文件存在再手动把该目录加入用户环境变量。加入后重新登录或重启终端。不要直接把安装目录复制到系统目录也不要把多个版本的可执行文件混在同一路径下。5.2 中文包装了但界面没变现象扩展面板显示中文语言包已安装重启后菜单仍是英文。原因可能是安装后没有执行“更改显示语言并重启”或者用户设置、工作区设置里写死了语言项覆盖了语言包。还有一种情况是装到了工作区作用域换一个文件夹打开就失效。解决打开命令面板执行“配置显示语言”选择中文再重启。检查用户设置里是否有locale相关配置如果有确认取值正确检查工作区.vscode/settings.json是否覆盖了语言设置。语言包是用户级扩展尽量装在用户作用域不要装在工作区。5.3 扩展冲突与性能下降现象编辑器启动变慢保存时格式化结果不符合预期右键菜单里出现多个相似入口。原因通常是同类扩展装了多个比如两个格式化工具、两个预览工具、多个同语言补全扩展。它们会争抢保存动作、右键菜单和补全结果表现出来就是“时好时坏”的玄学问题。解决打开扩展面板的已安装列表按功能分组同类只保留一个。先禁用可疑扩展重启验证确认问题消失后再卸载。格式化冲突重点看“默认格式化器”设置明确指定一个格式化工具不要让编辑器自动猜。预览冲突重点看端口占用和右键菜单入口保留一个常用的即可。5.4 打开文件夹后终端路径不对现象明明打开了项目文件夹终端启动后却在用户目录执行相对路径命令找不到文件。原因可能是打开的是单个文件而不是文件夹或者终端配置里设置了固定启动目录或者工作区设置覆盖了终端默认路径。解决看窗口标题栏和资源管理器根节点确认打开的是文件夹。在资源管理器里右键项目根目录选择“在集成终端中打开”看路径是否切换。检查用户设置里的终端默认目录配置如果有固定路径改成项目需要的行为或删掉。工作区设置里的终端路径优先级更高也要一起看。5.5 卸载重装仍保留旧配置现象卸载后重新安装界面语言、扩展、快捷键、打开方式仍然是旧的甚至问题依旧。原因是没有清理用户配置目录和扩展目录。卸载程序通常只移除安装目录用户数据目录会保留重装后继续读取旧配置。解决重装前先备份settings.json、keybindings.json和扩展列表再把用户配置目录改名或移走确认新安装能正常启动后再逐项恢复。不要直接删整个目录先改名保留后悔药。扩展列表可以用命令面板里的“显示已安装扩展”导出或者手动记录常用扩展重装后按需装回。现象优先排查不要先做code 命令找不到PATH、终端是否新开重装编辑器中文包不生效显示语言配置、作用域反复安装语言包保存时格式化异常同类格式化扩展、默认格式化器关闭所有扩展终端路径不对打开的是文件还是文件夹改系统环境变量重装后旧配置还在用户配置目录、扩展目录直接删安装目录6. 把教程变成日常效率快捷键、设置迁移与最小验证清单安装和中文包只是起点。真正拉开效率差距的是命令面板、快捷键、设置迁移和一套最小验证流程。教程里提到“优化设置”和“观看教程”这两件事可以落到具体动作把常用命令绑成肌肉记忆把用户配置备份成可迁移的文件每次换机器或重装后用一张清单验证。这样再遇到安装问题不用从头翻教程按清单跑一遍就能定位。6.1 快捷键与命令面板的肌肉记忆命令面板是第一入口CtrlShiftP打开后输入关键词几乎所有功能都能找到。快速打开文件用CtrlP输入文件名片段即可跳转打开终端用Ctrl切换侧栏用CtrlB保存用CtrlS查找和替换分别用CtrlF、CtrlH。这些快捷键不需要一次记全先记命令面板和快速打开其他用到再查。快捷键作用使用场景CtrlShiftP打开命令面板找设置、扩展、任务命令CtrlP快速打开文件项目内按文件名跳转Ctrl打开/关闭集成终端跑本地服务器、执行命令CtrlB切换侧栏扩大编辑区CtrlS保存手动保存场景CtrlF/CtrlH查找 / 替换单文件内容修改Alt↑/↓移动当前行调整代码顺序ShiftAlt↓复制当前行快速写重复结构Ctrl/注释/取消注释调试代码块快捷键冲突时不要硬改系统快捷键先在命令面板里搜索对应命令看是否有备用入口。比如终端打不开可能是Ctrl被输入法或其他软件占用可以在键盘快捷方式设置里改绑。改绑后记录到keybindings.json换机器时一起迁移。6.2 设置迁移与配置备份用户配置目录里最重要的是settings.json和keybindings.json扩展列表可以重新装但配置项和快捷键是长期积累。常见做法是把这两个文件放到一个固定目录用版本控制或同步盘备份换机器时先装编辑器再把配置文件放回用户配置目录重启生效。不要直接覆盖整个用户目录只恢复这两个文件避免把旧缓存一起带过去。扩展列表可以用命令面板里的“显示已安装扩展”查看手动记录常用项或者用导出命令生成列表文件。重装后先恢复语言包和当前语言栈的扩展其他扩展按项目需要再装。一次性装回所有扩展启动慢冲突排查也麻烦。配置备份的频率不用很高改完快捷键或重要设置后备份一次即可。提示备份配置文件时不要带上机器相关的绝对路径。settings.json里如果写了某个磁盘的固定路径换机器后会失效恢复前先检查路径项。6.3 一次最小验证从空文件夹到可预览页面换机器、重装或帮别人装完后我一般会走一遍最小验证新建空文件夹用编辑器打开文件夹建index.html写一段基础结构起本地服务器浏览器访问localhost端口确认页面能显示。再执行code --version确认命令行入口打开命令面板确认中文界面装一个当前语言栈的扩展确认扩展面板可用。四步都通过才算装好。这套验证不复杂但能提前暴露 PATH、文件夹模式、中文包、扩展加载四类问题。尤其是“打开文件夹”这一步很多人跳过直接打开单文件后面终端路径和相对路径全错。把那一步固定成习惯后面写页面少很多返工。配置迁移也一样先恢复settings.json再装扩展最后跑一遍验证顺序不要反。从那以后我每次装完 VSCode 都强制走一遍code --version、中文界面确认、空文件夹打开、HTML 预览这四步再开始装插件这份《VSCode下载与安装使用教程》适合留在手边当安装对照清单需要对照原始步骤的可以按文末方式获取。希望帮到你。本文还有配套的精品资源点击获取