前一篇用记事本也能写出 HTML，但真写起页面来要一个趁手的编辑器。这篇讲课程的开发工具 VS Code：它是什么、装在哪、装完还要做什么，以及课程配套的另外两个小软件。

VS Code 是什么

Visual Studio Code（简称 VS Code）是 Microsoft 于 2015 年 4 月发布的一款代码编辑器。

课程给它的三个特点：

• VS Code 对前端代码有非常强大的支持，同时也支持其他编程语言（例如：C++、Java、Python、PHP、Go 等）；
• VS Code 提供了非常强大的插件库，大大提高了开发效率；
• 官网：https://code.visualstudio.com

NOTE

它是"代码编辑器"而不是"IDE"。课程统一用它写前端页面，后面写 Java 后端时会换成 IDEA——所以这页 PPT 特意提了快捷键要和 IDEA 对齐，两边的手感保持一致。

安装：装在没有中文、不带空格的目录下

课程资料里给的安装包是 资料/2. VsCode/VSCodeUserSetup-x64-1.89.1.exe（1.89.1 版，Windows 64 位），PPT 上演示的也是这个文件名。官网下最新版同样可以。

安装时有两条必须注意的事：

1. 安装在一个没有中文、不带空格的目录下（例如 D:\develop\VSCode，不要用 D:\我的软件\Visual Studio Code）；
2. 不仅要安装软件，还得安装插件——这句话是对 VS Code 说的，装完不装插件等于只装了一半。

WARNING

为什么路径不能带中文和空格？因为后续课程里的 Maven、Node、命令行工具在解析路径时，遇到中文或空格容易解析失败（有的工具会把空格后的部分当成另一个参数）。**"开发相关的所有软件、工程都放在纯英文、无空格的路径下"**是一条通用习惯，从装 VS Code 这次就开始养成。

装完还要装插件

PPT 没有展开列插件清单（清单在课程视频里演示），但它明确提到安装了 IDEA 快捷键映射插件：

插件	作用	来源
IntelliJ IDEA Keybindings	把 VS Code 的快捷键映射成 IDEA 的键位	PPT 明确提到（"由于安装了 IDEA 快捷键映射插件，VS Code 快捷键与 IDEA 一致"）
Chinese (Simplified) 语言包	界面汉化，菜单变成中文	补充建议（PPT 未点名）
Live Server	右键 Open with Live Server 起本地服务，改完保存页面自动刷新	补充建议（PPT 未点名）

TIP

插件怎么装：左侧活动栏点"扩展"图标（或按 Ctrl+Shift+X）→ 搜索插件名 → Install。上面表里第一个是课程明确装了的，另外两个是前端开发里最常用的两个（汉化 + 实时预览），装上不亏。

快捷键与 IDEA 一致

因为装了IDEA 快捷键映射插件，VS Code 的快捷键与 IDEA 一致——对已经学过 IDEA 的人，等于不用重新背一套键位。

常见的几个（以插件实际映射为准）：

操作	键位（IDEA 习惯）
复制当前行	Ctrl+D
注释 / 取消注释	Ctrl+/
格式化代码	Ctrl+Alt+L
保存文件	Ctrl+S

WARNING

装了映射插件之后，VS Code 原生的默认键位会被改掉（比如 VS Code 原生 Ctrl+D 是"选中下一个相同的词"）。如果你看到的是别人的原生教程，键位对不上是正常的——想看当前实际绑定了哪些键，去"键盘快捷方式"设置里搜索功能名即可。

配套工具：Snipaste 与 Sublime Text

课程的 资料/4. 其他软件/ 里还准备了两个小工具，都是前端开发阶段的常用辅助：

工具	资料里的版本	用途
Snipaste	Snipaste-2.7（64bit）	截图 + 贴图工具：截图后能把图钉在屏幕上，对着原型图/效果图写页面时特别方便，也能取色
Sublime Text	Sublime Text Build3207（64bit）	轻量文本编辑器：打开大文件、临时改一段文本比 IDE 快

TIP

这三个工具的分工：VS Code 写代码、浏览器看效果（后面配 Live Server 自动刷新）、Snipaste 对照原型图。做页面时通常是"原型图钉在屏幕一边、VS Code 在另一边"。

用 VS Code 写出第一个页面

把前面学的 HTML 骨架和 VS Code 串起来，完整流程是：

1. 建一个纯英文名的文件夹，比如 HTML-CSS（放在没有中文的路径下）；
2. VS Code 菜单 文件 → 打开文件夹，打开这个文件夹（左侧资源管理器就会显示文件夹里的文件）；
3. 在文件夹里新建文件，文件名写成 01. 快速入门.html（后缀必须是 .html）；
4. 在里面写 HTML 基本骨架，把 title 和内容补上；
5. Ctrl+S 保存（VS Code 里没保存的文件标签上有个小圆点）；
6. 双击这个 .html 文件用浏览器打开看效果（装了 Live Server 的话，右键 → Open with Live Server，改完保存会自动刷新）。

TIP

小技巧（PPT 没讲，属补充）：在 .html 文件里输入一个 ! 再按 Tab，VS Code 自带的 Emmet 会直接生成完整骨架（<!DOCTYPE html> + <meta charset> + <title> + <body>），比手敲快。

小结（开发工具回顾）

问题	答案
VS Code 是什么？	Microsoft 在 2015 年 4 月发布的代码编辑器；对前端支持强，也支持 C++/Java/Python/PHP/Go，有强大的插件库
官网在哪？	https://code.visualstudio.com
安装有什么硬性要求？	装到没有中文、不带空格的目录下；装完还要装插件
快捷键为什么和 IDEA 一样？	因为装了 IDEA 快捷键映射插件，VS Code 快捷键与 IDEA 一致
课程另外配了哪两个工具？	Snipaste（截图 + 贴图）、Sublime Text（轻量文本编辑器）
课程资料里的安装包版本？	VSCodeUserSetup-x64-1.89.1.exe（1.89.1，64 位）

相关

• HTML快速入门
• Web前端初识

练习题

一、知识回顾（读完直接做下面的实践题）

1. VS Code（Visual Studio Code）是 Microsoft 于 2015 年 4 月发布的代码编辑器；它对前端代码支持很强，也支持 C++、Java、Python、PHP、Go 等语言；官网是 https://code.visualstudio.com
2. 安装 VS Code 的两条注意事项：装到没有中文、不带空格的目录下；不仅要装软件，还得装插件
3. 课程资料里的安装包是 资料/2. VsCode/VSCodeUserSetup-x64-1.89.1.exe，版本 1.89.1（64 位）
4. 因为安装了 IDEA 快捷键映射插件，VS Code 的快捷键与 IDEA 一致（装了映射插件后 VS Code 原生默认键位会被改掉）
5. 课程 资料/4. 其他软件/ 里的两个配套工具：Snipaste 2.7（截图 + 贴图）、Sublime Text Build 3207（轻量文本编辑器）
6. 插件安装入口：左侧扩展图标（或 Ctrl+Shift+X），搜索插件名后 Install；课程明确装的是 IDEA 快捷键映射插件
7. 用 VS Code 写页面的流程：建英文名文件夹 → 文件 → 打开文件夹 → 新建 xxx.html 文件 → 写骨架 → Ctrl+S 保存 → 双击文件用浏览器打开
8. 路径不能带中文和空格的原因：后续 Maven、Node 等命令行工具解析路径时，遇到中文或空格容易解析失败（开发相关的软件和工程都放纯英文、无空格路径）

二、裸写题

• 2-1 装好 VS Code 并检查环境（在电脑上操作，不需要练习文件） 要求：把 VS Code 装到一个没有中文、不带空格的目录下 → 装好插件（至少装 IDEA 快捷键映射）→ 确认版本号和安装位置 → 确认快捷键映射生效。

  - 提示（先自己想，实在想不出再点开）

  一级 · 思路：安装 → 装插件 → 验证（版本 + 位置 + 键位）三步，每步都要能看到"证据" 二级 · 方法：安装时手动选目录（如 D:\develop\VSCode）；插件在扩展面板装；版本在"关于"里看；键位在"键盘快捷方式"里搜 三级 · 骨架：把看到的版本号、安装目录、插件列表截图（用 Snipaste 正好练一下），贴到自己的笔记里

  - 参考答案（做完再点开）

  2-1 检查清单： ① 安装目录：形如 D:\develop\VSCode，路径里没有中文、没有空格（用资源管理器地址栏复制路径核对）； ② 版本：菜单"帮助 → 关于"（或"文件 → 关于"）里应看到 1.89.1（跟课程一致）或你下载的版本号； ③ 插件：扩展面板的"已安装"里能看到 IDEA 快捷键映射插件（以及按需装的汉化、Live Server）； ④ 键位生效："键盘快捷方式"设置里搜索"复制行"，看到它绑在 Ctrl+D 上说明映射插件生效了。

• 2-2 用 VS Code 写出第一个页面

  要求：不用记事本，全程在 VS Code 里完成——新建文件 01. 快速入门.html，写上 HTML 基本骨架，浏览器标签页显示"HTML快速入门"，页面上显示一行大标题"Hello HTML"；最后双击文件用浏览器打开验证。 （练习文件 test_04_第一个页面.html 里已经给出骨架和写作区。）

  - 提示（先自己想，实在想不出再点开）

  一级 · 思路：先建文件保存成 .html，再写骨架，最后用浏览器验证 二级 · 方法：文件 → 打开文件夹 → 新建文件 → Ctrl+S 保存；骨架用 <html>/<head>/<title>/<body>/<h1>三级 · 骨架：在 .html 文件里输入 ! 按 Tab 可以自动生成骨架，再把 title 和 <h1> 换成自己的内容

  - 参考答案（做完再点开）

  <!-- 告诉浏览器当前文档类型为HTML -->
  <!DOCTYPE html>
  <html lang="zh-CN">
  	<head>
  		<!-- 字符集 -->
  		<meta charset="UTF-8">
  		<title>HTML快速入门</title>
  	</head>
  	<body>
  		<h1>Hello HTML</h1>
  	</body>
  </html>

  验证三个点：① VS Code 标签页上的小圆点消失＝已保存；② 浏览器标签页显示"HTML快速入门"（来自 <title>）；③ 页面正文显示大标题"Hello HTML"（来自 <h1>）。

三、综合题

• 3-1 搭出课程的工程目录，并做一个"环境自检页"

  1. 在没有中文、不带空格的路径下建工程文件夹，例如 E:\Code\HTML-CSS
  2. 在工程文件夹里建子目录 img，随便放一张图片进去（可以自己用 Snipaste 截一张，命名成 1.png）
  3. 用 VS Code 打开这个文件夹，新建 index.html
  4. 页面结构（从上往下）：一级标题"我的前端开发环境" → 一行文字写编辑器名称和版本号 → 一行文字写安装目录 → 一行文字列出已装的插件 → 一张图片（用相对路径引用 img/1.png）
  5. 每一块内容前加一句 HTML 注释说明它是什么
  6. 保存后双击用浏览器打开，逐条核对页面上显示的内容和代码顺序一致 （练习文件 test_04_综合_环境自检页.html 里已经给出骨架和写作区。）

  - 提示（先自己想，实在想不出再点开）

  一级 · 思路：这是"建目录 + 写骨架 + 按顺序填内容 + 引图片"四件事的合体 二级 · 方法：<h1> 一级标题；<img src="img/1.png"> 相对路径引图；<!-- --> 注释；Ctrl+S 保存 三级 · 骨架：<html> → <head>（<meta charset="UTF-8"> + <title>）→ <body>（注释 + <h1> + 三行文字 + <img>）

  - 参考答案（做完再点开）

  目录结构：

  E:\Code\HTML-CSS\          ← 纯英文、无空格
  	├─ index.html
  	└─ img\
  		└─ 1.png

  <!DOCTYPE html>
  <html lang="zh-CN">
  	<head>
  		<meta charset="UTF-8">
  		<title>我的前端开发环境</title>
  	</head>
  	<body>
  		<!-- 一级标题 -->
  		<h1>我的前端开发环境</h1>
  		<!-- 编辑器与版本 -->
  		VS Code 1.89.1
  		<!-- 安装目录（不能有中文和空格） -->
  		安装目录：D:\develop\VSCode
  		<!-- 已安装的插件 -->
  		已装插件：IDEA 快捷键映射、Chinese (Simplified)、Live Server
  		<!-- 截图（相对路径：同级目录下的 img/1.png） -->
  		<img src="img/1.png">
  	</body>
  </html>

  验证要点：① 三行文字在页面上的先后顺序和代码一致（浏览器从上往下渲染）；② 图片能显示，说明 img 相对路径写对了；③ 路径自检——工程路径、VS Code 安装路径里都没有中文和空格。