简介VSCode 下载与安装使用教程PDF 版是专为编程初学者和希望快速熟悉 Visual Studio Code 的用户编写的入门资料。教程首先梳理了 VSCode 的核心特点包括跨平台运行、免费开源、语法高亮、代码补全、内置命令行与 Git 管理工具等帮助读者理解为何选择这款编辑器。下载章节给出官方网站入口及 Windows、macOS、Linux 等常见平台的选择建议安装章节则逐步展示了同意协议、自定义安装目录、添加到开始菜单、按需勾选功能等环节保证新手也能独立完成配置。资源包仅 1 个 PDF 文件大小 2.12MB篇幅精简而不失全面。目前已有 1483 人学习浏览颇受入门者认可。教程还进一步介绍如何安装中文语言包并切换界面语言、按需浏览和安装扩展插件、打开项目文件夹以及在没有项目模板的情况下手动创建 HTML 等文件。对于想要快速上手 VSCode 的读者而言这份资料能够显著缩短环境搭建时间减少无谓的试错让学习与开发之旅更加顺畅。1. VSCode下载与安装使用教程这份 PDF 凭什么值得新手先读一遍刚拿到新电脑的 A 同学打开 VSCode第一件事就是找那个和传统 IDE 一样的“新建项目”按钮找了 20 分钟没找到跑来问我这个编辑器根本没法建项目啊。我让他先去把这份《VSCode下载与安装使用教程》PDF 翻到最后一章他才发现 VSCode 的设计思路本身就是“没有新建项目”只有“打开文件夹”。这种反直觉设计恰恰是新手第一阶段最容易翻车的地方。这份 PDF 把下载地址、安装向导、中文语言包、项目文件创建串成一条完整链路适合刚接触编辑器、想用 VSCode 写 HTML/CSS/JS 的前端初学者也适合每次都被安装向导吓回去的纯小白。下面我会沿着这份教程的章节顺序把每一步为什么要这么做、做完之后怎么验证、遇到问题去哪查一次说清楚。2. 下载与安装官方地址、安装器类型与五个安装步骤逐个拆2.1 官方下载地址与版本分支先判断你该下哪一版这份 PDF 一上来就给出了官方地址https://code.visualstudio.com/。很多人打开主页就点 “Download for Windows”然后一路 Next、一路安装最后也能用。但等你真正进入开发状态会发现这个“默认下载”不一定是最适合你的方案。官方主页上的按钮默认下载的是 Windows 用户安装器它不要求管理员权限直接往当前用户的 AppData 目录里装。这在家用电脑上没问题但在公司电脑或学校机房用户安装器反而是最省事的。下载页里还有其他入口可以通过点击 Download 下拉菜单里的版本分支找到。我习惯把当前几个常见分支按使用场景拆开整理成这样一张表安装器类型获取方式权限要求典型安装位置适合谁User Installer官网首页大按钮不需要管理员权限当前用户 AppData\Local\Programs公司电脑、学生机、无管理员权限环境System Installer下载页里明示 System Installer 的链接需要 UAC 提权Program Files 目录长期主力开发机、需要全局 PATH 的场景Portable Zip下载页里的 zip 压缩包无安装过程解压到任意目录包括 U 盘临时环境、多台公共电脑、不愿写注册表的人从这里能看出一个关键点选安装器不只是选路径而是选权限模型。System Installer 会写入系统 PATH所以你在任意终端窗口敲code都能启动编辑器User Installer 也会写入 PATH但它只写入当前用户的环境变量权限要求更低。Portable 版本则完全是绿色形态解压后运行 Code.exe 就能用但少了文件关联、开始菜单快捷方式这些“落地”操作以后每次启动都要手动找到目录。我个人的建议是如果不是有管理员权限洁癖优先用 User Installer。它不会因为你偶尔插拔 U 盘、换登录账号就失效升级也好处理。若你需要在 CI 工具或计划任务里调用code命令再考虑 System Installer或者干脆把安装目录的 bin 子目录写进用户环境变量。这个选择不需要在一开始就纠结但最好在下安装包之前想清楚免得装到一半反悔又要先卸载再重装。2.2 安装向导协议、路径和附加任务的三个习惯PDF 把安装过程拆成了五个步骤同意协议、选择安装路径、添加开始菜单、勾选附加任务、确认安装。这些步骤本身不难但每一页都藏着后续使用体验的差异。同意协议页没有可选项直接下一步即可。真正值得停下来看的是安装路径那一页。默认装在 C 盘用户目录下对系统盘容量紧张的人来说长期编译缓存和扩展缓存都会让目录越滚越大。我一般会把路径改到 D 盘根目录下例如D:\VSCode尽量用纯英文路径不带空格。虽然 VSCode 对中文目录支持得不错但后续如果你要用第三方编译器、Python 虚拟环境或者 Git 钩子路径里的中文和空格会成为一系列“说不清为什么”的报错来源。添加开始菜单页面默认就会创建一个 “Visual Studio Code” 文件夹。如果机器上装了很多开发工具我建议保留它因为开始菜单负责日常搜索入口。接下来是附加任务页面这里才是真正影响使用习惯的地方。需要重点关注三组选项“将‘通过 Code 打开’操作添加到文件资源管理器目录上下文菜单”这一项我强烈建议勾选。勾选后你在资源管理器里右键任意文件夹就能直接打开 VSCode非常顺手。“将‘通过 Code 打开’操作添加到文件资源管理器文件上下文菜单”这个相对次要因为打开单个文件不如先打开所在目录再看文件树。“添加到 PATH”这一项必须勾选。不勾选的话以后在终端里执行code .会得到“不是内部或外部命令”的提示很多教程都默认你能用code命令但你未必装过这个选项。最后确认信息页会列出安装位置和附加任务确认无误后点安装。安装完成以后建议先不急着看界面打开一个终端窗口验证一把Get-Command code如果返回了一条指向 VSCode 的路径说明 PATH 配置已经生效。如果提示无法识别说明安装时“添加到 PATH”没有勾上。很多人这时候会重装一次没必要直接去系统设置里给用户环境变量追加安装目录下的 bin 子目录就行。我在实际帮人排查时发现这类问题十个里有八个都出在这里。2.3 安装包下载中断与文件损坏先查安装包本身这份 PDF 里没有覆盖故障处理但下载安装类教程最容易翻车的点恰恰在安装包环节。现象通常是双击安装包后弹出一个英文提示说 “The installer was interrupted before VSCode could be installed”或者安装进度条完成 90% 后卡死。遇到这种情况不要第一时间怀疑系统问题先看安装包大小。VSCode 安装包一般在几十 MB 到一百多 MB 之间如果你发现下载下来的文件只有几十 KB那大概率是浏览器断流后留下了一个残缺文件。处理方式很简单删除旧文件换一个网络更稳定的时段重新下载或者换一个浏览器下载。下载工具的断点续传有时也会把文件拼接损坏所以下载完成后比对一下文件大小是否符合页面标注能省掉后面一整段折腾时间。安装完成后第一件事我会先打开“帮助”菜单确认版本号是否和官网当前的稳定版一致。版本号不一致通常是因为机器上以前装过预览版。预览版和稳定版可以共存但它们共享某些用户数据目录有极小概率会让扩展缓存串掉。如果你不需要预览版建议在正式使用前把它卸载干净再重新安装稳定版。3. 启动后的基础设置中文语言包、命令面板和扩展市场3.1 中文语言包安装后为什么必须重启第一次启动 VSCode界面全是英文这是很多新手的第一道门槛。PDF 中写得很简单安装中文语言包安装并重启。但真正操作时有人会困惑为什么装一个语言包还要重启有没有可能像网页一样即时切换答案是VSCode 的界面资源在进程启动时就已经加载进了内存。中文语言包本质上是一份本地化资源文件它需要 UI 渲染进程重新读取这些资源所以必须重启进程才能生效。这不是玄学是进程内资源无法热替换的典型限制。如果你的版本比较新在扩展商店里搜索“Chinese”安装完成后会弹出一个 “Change Language and Restart” 按钮点击后编辑器会自动重启。但我在帮别人配置时见过另一种情况语言包装好了右下角也弹了重启按钮重启后界面还是英文。这时候不要再去扩展商店翻直接按CtrlShiftP打开命令面板输入 “Configure Display Language”选择“中文(简体)”VSCode 会把 locale 写入用户配置文件然后再次重启。命令面板里的这项操作比重新搜索安装语言包更能触及问题本质。也有团队协作场景不需要改界面语言。比如团队文档里全部使用英文界面截图你换成中文界面后截图风格不一致。这种时候可以在终端用命令行启动指定语言code --localezh-cn这行命令的意思是本次启动用中文 locale 覆盖默认语言但不会改动配置文件。它适合临时演示、录屏、截图或者你在别人机器上临时借用时想延续自己的中文习惯。注意它只对当前这次启动生效关掉重新打开 VSCode 还是会回到默认语言。3.2 命令面板一条快捷方式通向所有入口PDF 里那句话“访问所有内容只需要一个快捷方式”很多人没看懂以为 VSCode 把所有功能都塞进了一个按钮。实际上它指的是命令面板默认快捷键是CtrlShiftP。命令面板就像一个全局搜索框VSCode 里的绝大多数操作都可以在这里输入关键词后触发不需要一层层菜单地翻。我刚用 VSCode 时也不习惯命令面板觉得多此一举。后来发现很多菜单深处的选项根本记不住位置比如“切换集成终端”“切换默认终端”“打开键盘快捷键文件”“查看用户设置 JSON”这些功能藏在不同的菜单里位置分散。而命令面板里输入前两三个字母就能定位到对应命令省去大量鼠标移动。想做的事命令面板里输入快捷键安装扩展Extensions: Install ExtensionsCtrlShiftX打开设置Preferences: Open SettingsCtrl,切换主题Preferences: Color ThemeCtrlK然后CtrlT新建集成终端Terminal: Create New Integrated TerminalCtrl打开文件夹File: Open FolderCtrlK然后CtrlO切换显示语言Configure Display Language无默认快捷键这里面最值得养成的习惯是遇到不知道怎么操作的功能先按CtrlShiftP试着输入动词加名词例如 “Open Keyboard Shortcuts”“Toggle Line Comment”。命令面板能搜到的范围很广几乎覆盖了所有内置命令和扩展注册的命令。熟练以后你能在一个动作中完成以前要三步才能完成的操作。比如给当前文件插入当前时间戳很多插件通过命令面板暴露命令用起来比配置快捷键还要快。3.3 浏览语言扩展按需安装别让扩展拖慢启动欢迎页里有一个“点击浏览语言拓展”的入口对应的是扩展市场里按分类浏览语言支持扩展。VSCode 本身是一门轻量编辑器语法高亮和智能提示完全靠扩展加载。但你不需要把所有语言扩展都装上因为每个扩展都会占用内存扩展装得越多启动扫描越慢甚至还会出现扩展之间抢占快捷键的冲突。我一般遵循“一个项目方向只装一套”的原则。比如你只写 HTML/CSS/JS基础语法高亮由 VSCode 内置支持真正需要的是代码格式化、实时预览这一类的辅助扩展。写 Python 时再安装 Python 语言服务扩展。等到你确定当前工作区要用哪种语言再打开扩展视图搜索对应语言支持点安装这种节奏最干净。PDF 里的截图还显示了浏览语言扩展后VSCode 会给出一个推荐列表。这个列表由当前打开文件的语言模式触发。值得注意的是语言扩展只负责编辑体验不负责编译和运行。例如安装 Python 扩展后VSCode 并不会自动知道你的解释器在哪里。所以按需安装扩展只是第一步安装完还要检查这个扩展是否有自己的配置入口。常见做法是安装完扩展后在命令面板输入该扩展名查看它提供的命令再对照文档设置关键路径。遇到扩展不生效时先不要急着卸载检查一下扩展是否被当前工作区禁用或者是否和另一个扩展的配置项冲突。4. 新建项目与第一个 HTML 页面没有“新建项目”按钮怎么落地4.1 手动建文件夹再打开VSCode 的工作区模型PDF 中有一句话写得很直接“由于 vscode 没有新建项目所以只能手动新建文件夹导进去。”这句话被很多人当成缺点其实它是 VSCode 的核心理念项目就是文件夹文件夹就是项目边界。传统的开发软件会有“New Project”向导自动生成项目骨架、编译配置和一堆默认文件。VSCode 选择把这件事交给你自己好处是不管你写 Python、写网页还是写文档结构都保持统一。坏处是新手第一次找不到入口还以为软件坏了。这套路我见过太多次A 同学当时就是卡在这里。实际操作很简单先在文件系统里创建目录再用 VSCode 打开。如果命令行可用最顺手的流程是这样mkdir my-first-project cd my-first-project code .第一行创建一个名为my-first-project的目录第二行进入该目录第三行让 VSCode 以当前目录为工作区启动。这里的.表示当前目录是命令行里最常见的参数。整个过程本质上等价于文件菜单里的“打开文件夹”只是不需要开一个额外的资源管理器窗口。如果终端里的code命令还不可用就直接在 VSCode 里用CtrlK再按CtrlO选择你创建好的文件夹。打开以后左侧的资源管理器会显示这个目录下的所有文件。现在目录是空的不要急项目骨架本来就应该在创建文件和目录的过程中长出来而不是由一个向导替你拍板。4.2 用 Emmet 生成 HTML5 模板少手敲一堆样板PDF 中下一步是“然后创建文件例如HTML”。在资源管理器面板里找到当前文件夹根目录点击面板上方的新建文件图标输入index.html回车确认。VSCode 会立刻把它识别为一个 HTML 文件之后输入代码就有语法高亮了。这里有一个内置效率工具容易被忽略Emmet。在index.html文件中输入html:5然后按Tab编辑器会自动展开成一个完整的 HTML5 基础模板。展开后可能是这样的!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body /body /html这段模板里的关键点有两个langen最好改成langzh-CN因为你的页面内容是中文把语言属性改成中文有利于浏览器和搜索引擎正确识别charsetUTF-8负责告诉浏览器按 UTF-8 编码解析文件如果少了这一行中文内容很可能在浏览器里显示成乱码。viewport 标签是移动端适配的标配保留默认即可。Emmet 展开模板的逻辑是编辑器会根据当前文件的语法模式把简写符号转换成完整结构。这里有个大坑新手经常遇到输入html:5后按 Tab 没反应。原因九成是文件还没有保存成.html或者新建文件时默认被识别成了纯文本。解决办法就是先保存文件并确认右下角状态栏显示的语言模式是 “HTML”再试一次。4.3 在浏览器中预览Live Server 是最快的验证路径有了 HTML 文件下一步就是在浏览器里看效果。VSCode 没有内置浏览器预览它只负责编辑不负责渲染。最简单的做法是直接双击文件在浏览器里打开但这样做不支持热更新你每改一次代码就要手动刷新一次页面。我更推荐安装一个 Live Server 扩展。安装后在index.html文件上方右键选择 “Open with Live Server”VSCode 会启动一个本地静态服务器并自动用默认浏览器打开页面。这个本地服务器的默认地址一般是127.0.0.1:5500端口号可以在设置里调整。{ liveServer.settings.port: 5502 }上面是改端口的一个片段。为什么要改端口因为 5500 可能被其他工具占用或者团队项目里约定了一个固定端口。放到用户设置里所有项目都用这个端口放到工作区设置.vscode/settings.json里只有当前项目生效。这个区分在后续项目协作时特别重要推荐你从第一次使用就养成这个意识。4.4 调整我的设置欢迎页里的两个入口不要跳过PDF 中提到的“优化设置点击调整我的设置”和“充电学习点击观看教程”都来自欢迎页。很多人会直接跳过这两块内容直接开始写代码。其实“调整我的设置”打开的是一套可视化设置编辑器它把配置文件里的键值对翻译成了中文界面适合不熟悉 JSON 的人。我一般会改动这样几个设置字体调大到 16 或 17长时间看代码不疲劳打开自动保存减少手滑丢文件的概率开启自动换行避免横向滚动缩进统一成两个空格和团队现有代码风格保持一致。对应到settings.json是这样的{ editor.fontSize: 16, editor.wordWrap: on, files.autoSave: afterDelay, files.autoSaveDelay: 1000, editor.tabSize: 2, editor.renderWhitespace: boundary }files.autoSave有afterDelay和onFocusChange两种常用取值前者是延迟固定时间后保存后者是当你把焦点从编辑器切走时保存。我更喜欢onFocusChange因为它不会在输入过程频繁写盘也不会丢失最后一步修改。editor.renderWhitespace设为boundary只会在缩进边界处显示调试点不至于满屏都是小白点。这些设置放到用户设置里会作用于所有项目。如果你希望某个项目统一用另一种缩进或编码规则就把对应项放到项目目录下的.vscode/settings.json中。用户设置和项目设置冲突时项目设置会覆盖用户设置这是 VSCode 设置优先级的一个常见误区值得提前了解。5. 避坑排查安装与新建 HTML 过程中最常见的 5 个翻车点5.1 下载与安装阶段的坑第一个高频翻车点是安装包下载一半失败。现象是双击安装包时提示文件损坏甚至安装界面根本弹不出来。原因大多是浏览器下载中断、下载工具多线程拼接导致的文件不完整。解决方式是先查看安装包大小通常官方安装包会显示一个明确体积如果你下载的文件明显偏小就删除重下。不要在一个极不稳定的网络环境里反复断点续传那不叫省时间叫赌运气。第二个高频翻车点是安装完成后code命令不可用。现象是在终端输入code .系统提示该命令不是内部或外部命令。原因基本就是安装向导里“添加到 PATH”那一项没勾选。解决方式有两种最简单的是重装一遍记得勾选不想重装的话手动修改系统环境变量把 VSCode 安装目录下的bin子目录追加到 PATH 末尾。追加后记得重新打开终端窗口才会生效因为环境变量是在进程启动时读取的旧窗口不会感知到新的 PATH 内容。第三个翻车点是安装时明明勾选了“添加到开始菜单”但在开始菜单里找不到 VSCode。原因是安装器会在开始菜单目录下创建快捷方式但有些精简工具或者系统清理工具会把快捷方式当成垃圾清理掉或者因为当前账号是新用户开始菜单索引还没有刷新。解决方式是在安装目录下找到Code.exe右键把它发送到桌面快捷方式然后拖一份到开始菜单目录里。这不是 VSCode 的 bug是系统层面的干扰见多了就习惯了。5.2 使用与项目阶段的坑第四个高频翻车点是中文语言包装了界面却还是英文。现象是扩展市场里能搜到中文语言包安装后也点了重启但重启后标题栏和菜单仍然是英文。原因是只安装了语言包但当前显示语言并没有被切换成中文部分早期版本还会出现 locale 配置文件被旧设置覆盖的情况。解决方式是在命令面板里输入 “Configure Display Language”确认显示的 locale 是zh-cn然后再重启。如果你之前在终端里用code --localeen启动过编辑器那只是临时覆盖不会影响配置文件所以核心还是在命令面板里把默认语言改过来。第五个高频翻车点是 Emmet 按 Tab 不起作用模板无法展开。现象是输入html:5后按 Tab光标只是跳了个位置没有任何 HTML 结构出现。原因是当前文件没有被识别为 HTML 语言模式最常见的情况是新文件还没保存成.html后缀。解决方式是把文件先保存为index.html看右下角语言模式是否变成 “HTML”如果已经是 HTML但还是不生效就去设置里确认emmet.triggerExpansionOnTab是否为true。这个设置默认是打开的但某些扩展包会把它改掉。这些坑的背后其实都有一个共同点VSCode 把大量行为交给“文件上下文”决定。语言包靠 locale 配置决定代码展开靠语言模式决定命令可用性靠 PATH 环境变量决定。所以排查的顺序应该先是环境再是设置最后才是重装。我处理求助时一般先问一句“终端里code --version能不能跑”能跑就说明核心环境没问题问题大概率出在语言模式或配置文件上不用动刀重装。6. 一个进阶技巧设置同步与扩展清单重装换个环境也不用从零配6.1 登录账号同步设置和扩展最省事的环境“后悔药”如果你已经安装了一大堆设置和扩展最怕的就是重装系统或换新电脑。VSCode 内置了一个设置同步功能路径在左下角齿轮菜单里点击“打开设置同步”登录账号后选择要同步的类别包括设置、键盘快捷键、扩展和用户片段。这个功能会把你的配置推到云端新机器上登录同一个账号几分钟内就能还原成旧机器的形态。这一步看起来简单但对刚接触编辑器的人来说最大的障碍是只同步不校验。我见过有人同步完后界面中文回来了但写 Python 时提示不跳出检查后发现扩展列表中少了两三个组件。因为设置同步是按账号维度同步“启用的扩展”但扩展的版本号、依赖项并不保证完全一致。所以同步完以后一定要再走一遍下面的命令行校验。6.2 用扩展清单文件做硬备份设置同步适合日常使用但如果你想更可控地备份我推荐把当前扩展列表导出成一个文本文件当作一份清单保存在项目目录或网盘里。在终端里执行code --list-extensions extensions.txt这条命令会把当前已安装的全部扩展 ID 写入extensions.txt。以后换到新环境用循环逐个安装while read -r ext; do code --install-extension $ext done extensions.txt这个片段的意思是循环读取extensions.txt里的每一行把每个扩展 ID 作为参数传给code --install-extension安装。用这种方式比重新打开扩展市场一个一个搜要省事得多而且文件可以放进 Git 仓库团队成员一看就知道这个项目依赖哪些扩展。新成员拉下代码后先跑一遍这个脚本编辑器环境就对齐了。从那以后我每次帮人检查新电脑上的 VSCode都会强制走一遍code --list-extensions先确认扩展清单和文档对得上再去看设置和代码。这个习惯帮我避掉了很多“明明装了插件却不生效”的伪故障。如果你也正在从零开始配自己的开发环境不妨把这个命令记下来它比任何截图教程都更能说明你手头这台机器实际装了什么。希望帮到你。本文还有配套的精品资源点击获取
