课时04：开发工具与编辑器配置¶

学习目标：掌握 VS Code 编辑器的安装、配置与高效使用方法，理解 Emmet 语法及核心快捷键，建立规范的前端开发工作流。

一、前端开发工具概述¶

1.1 纯文本编辑器的局限性¶

基础文本编辑器（如 Windows 记事本）虽然可编辑 HTML 文件，但存在明显效率瓶颈：

无代码高亮，难以区分标签、属性与内容
无自动缩进与格式化，代码可读性差
无代码补全与提示，编写效率低
无项目管理能力，难以处理多文件工程

1.2 主流前端编辑器对比¶

编辑器	开发商	收费模式	核心优势	适用场景
VS Code	Microsoft	免费开源	插件生态丰富、调试功能完善、微软官方支持	通用首选，适合初学者到专业开发者
Sublime Text	Sublime HQ	付费（可试用）	启动极速、资源占用低、多光标编辑强大	轻量快速编辑
WebStorm	JetBrains	付费订阅	深度 IDE 功能、智能重构、框架级支持	大型项目、专业团队

推荐选择：VS Code 是前端入门的最佳起点——免费、跨平台、社区活跃、插件丰富，且对 Windows 用户有原生优化。

二、VS Code 安装与基础配置¶

2.1 安装流程¶

访问 VS Code 官方网站（https://code.visualstudio.com）
下载对应操作系统版本的安装包（Windows 用户注意选择 x64 或 arm64 架构）
运行安装程序，推荐保持默认安装路径
安装完成后首次启动，界面默认显示为英文

2.2 界面汉化¶

点击左侧活动栏底部的「扩展（Extensions）」图标（或按 Ctrl+Shift+X）
在搜索框输入 Chinese
安装 "Chinese (Simplified) Language Pack"（由 Microsoft 官方提供）
安装完成后点击提示中的「重启」按钮，或手动重启 VS Code

2.3 推荐插件清单¶

插件名称	功能说明	安装阶段
Chinese Language Pack	界面汉化	首次安装必备
Live Server	本地启动热更新服务器，实时预览网页	学习阶段必备
Auto Rename Tag	自动同步修改配对标签名	提升效率
Prettier	代码格式化，统一缩进与换行	规范代码风格
ESLint	JavaScript 语法检查与规范提示	进阶开发

三、项目与文件管理¶

3.1 打开项目文件夹¶

VS Code 以工作区（Workspace）为单位管理项目：

在桌面或任意位置创建项目文件夹（如 html-learning）
将文件夹直接拖拽至 VS Code 窗口中央区域，或点击「文件」→「打开文件夹」
左侧资源管理器将显示完整的目录树结构

3.2 新建 HTML 文件¶

在资源管理器中点击文件夹旁的「新建文件」图标
输入完整文件名，必须包含 .html 后缀（如 index.html）
文件名高亮显示表示 VS Code 已识别为 HTML 文件，自动启用语法高亮

四、HTML 骨架快速生成¶

4.1 Emmet 语法基础¶

Emmet 是内置于 VS Code 的代码缩写引擎，通过简短缩写快速展开完整代码结构。

生成 HTML5 标准骨架：

在空白文件中输入 html:5 或 !
按 Tab 键，自动生成以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

4.2 常用 Emmet 缩写示例¶

缩写	展开结果	说明
`div`	`<div></div>`	单标签生成
`div*5`	5 个 `<div></div>`	批量生成
`h$*6`	`<h1>` 到 `<h6>`	带序号批量生成
`ul>li*3`	`<ul>` 内嵌 3 个 `<li>`	父子嵌套结构
`div+p`	`<div></div><p></p>`	兄弟并列结构
`a[href="#"]`	`<a href="#"></a>`	属性赋值

五、核心快捷键与编辑技巧¶

5.1 高效编辑快捷键¶

快捷键	功能	应用场景
`Ctrl + /`	快速注释/取消注释	临时屏蔽代码或添加说明
`Alt + ↑ / ↓`	上下移动当前行	调整代码顺序
`Shift + Alt + ↑ / ↓`	向上/向下复制当前行	快速复用代码
`Ctrl + D`	选中当前单词，再次按下选中下一个相同单词	批量替换变量名
`Ctrl + Shift + L`	选中所有与当前单词匹配的内容	全局替换
`Ctrl + Shift + Enter`	在当前行上方插入新行	快速添加空行

5.2 多光标编辑¶

鼠标中键拖动：按住鼠标滚轮（中键）并向下拖动，可在多行同时创建光标，实现多行同步输入或删除。

使用场景： - 为多个 <li> 标签同时添加相同类名 - 批量删除多行开头的缩进空格 - 同时修改多个变量的前缀

5.3 浏览器预览方法¶

方法	操作步骤	适用场景
直接双击	在文件资源管理器中双击 `.html` 文件	快速查看单文件
复制路径	在 VS Code 中右键文件标题栏 →「复制路径」→ 粘贴到浏览器地址栏	大项目稳定访问
Live Server	安装插件后右键文件 →「Open with Live Server」	开发调试（推荐）

推荐：使用 Live Server 插件，修改代码后浏览器自动刷新，无需手动切换窗口。