学习目标
掌握VS Code的安装与基础配置方法
熟悉前端开发必备插件（Live Server、Prettier等）的使用
学会使用Chrome开发者工具调试HTML/CSS代码
概念讲解
开发环境是前端学习的基础工具链，高效的环境配置能显著提升开发效率。本小节将聚焦代码编辑器（VS Code） 和浏览器调试工具（Chrome DevTools） 的搭建与使用，这是前端开发的核心工具组合。
为什么选择VS Code？
轻量高效：启动速度快，内存占用低，支持多平台（Windows/macOS/Linux）
插件生态：拥有丰富的前端开发插件，如实时预览、代码格式化、语法高亮等
内置功能：集成终端、Git版本控制、代码调试等，一站式开发体验
为什么需要Chrome开发者工具？
实时调试：直接在浏览器中修改HTML/CSS，即时查看效果
性能分析：检测页面加载速度、CSS渲染性能等优化点
兼容性测试：模拟不同设备尺寸和浏览器环境
工具安装与配置
1. VS Code安装步骤
1.1 下载与安装
访问VS Code官网，根据操作系统选择对应版本（推荐稳定版Stable）
运行安装程序，勾选以下选项（Windows系统）：
✅ 创建桌面快捷方式
✅ 将"通过Code打开"添加到文件上下文菜单
✅ 将"通过Code打开"添加到目录上下文菜单
✅ 添加到PATH（方便终端启动）
点击"安装"，等待完成后启动VS Code
1.2 界面初识
VS Code主界面分为4个区域：
编辑器区：编写代码的主区域，支持多文件标签页
侧边栏：包含资源管理器、搜索、源代码管理等功能
状态栏：显示当前文件编码、行号、Git分支等信息
终端/输出区：集成终端，可运行命令行工具
2. 必备插件安装
打开VS Code，通过左侧边栏的扩展图标（或快捷键Ctrl+Shift+X）搜索并安装以下插件：
2.1 Live Server（实时预览）
功能：启动本地开发服务器，实时刷新页面，支持HTML/CSS/JS的即时预览
安装后使用：
右键点击HTML文件 → 选择"Open with Live Server"
浏览器自动打开
http://127.0.0.1:5500/文件名.html，修改代码后页面自动刷新
2.2 Prettier（代码格式化）
功能：自动格式化代码，统一代码风格（缩进、换行、空格等）
配置步骤：
安装后打开设置（
Ctrl+,）搜索"Format On Save"，勾选自动保存时格式化
搜索"Default Formatter"，选择"Prettier - Code formatter"
2.3 HTML CSS Support（语法提示）
功能：提供HTML标签自动补全、CSS属性提示、类名智能感知
使用效果：输入
<div class="container">时，自动提示已定义的CSS类名
2.4 vscode-icons（文件图标）
功能：为不同类型文件添加彩色图标，增强目录可读性（如.html文件显示橙色图标，.css文件显示蓝色图标）
3. Chrome开发者工具使用
3.1 打开DevTools
方法1：在Chrome浏览器中右键 → "检查"（或快捷键
F12/Ctrl+Shift+I）方法2：菜单 → 更多工具 → 开发者工具
3.2 核心功能面板
3.3 Elements面板实战
修改HTML结构：
在Elements面板中直接双击标签或文本，即可编辑内容
右键元素 → "Add attribute"添加属性，如
class="active"
调试CSS样式：
在"Styles"子面板中，点击CSS属性值可直接修改（如将
color: black改为color: red）勾选/取消属性前的复选框，实时开关样式效果
使用"Computed"子面板查看元素最终计算后的样式（含继承和覆盖关系）
实战示例：搭建第一个HTML文件
步骤1：创建项目文件夹
在桌面新建文件夹
html-css-practice打开VS Code → "文件" → "打开文件夹" → 选择该文件夹
步骤2：创建HTML文件
在VS Code资源管理器中右键 → "新建文件" → 命名为
index.html输入
!并按Tab键，自动生成HTML5模板代码：<!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> <h1>我的第一个页面</h1> <p>开发环境搭建完成！</p> </body> </html>
步骤3：实时预览与调试
右键
index.html→ "Open with Live Server"，浏览器自动打开页面在VS Code中修改
<h1>文本为"Hello, VS Code!"，保存后浏览器自动刷新在Chrome中打开DevTools（F12）→ Elements面板 → 双击"Hello, VS Code!"，修改为"Hello, World!"，观察页面实时变化
注意事项
1. VS Code插件管理
禁用不必要插件：过多插件会拖慢启动速度，保留常用插件即可
定期更新插件：插件更新可修复bug并添加新功能，通过扩展面板的"更新"按钮操作
2. Chrome DevTools高级技巧
设备模拟：Elements面板左上角点击"Toggle device toolbar"（手机图标），模拟不同屏幕尺寸
快捷键：
Ctrl+Shift+C：快速选择页面元素Ctrl+F：在Elements面板搜索HTML/CSS代码Esc：在任何面板中快速打开/关闭Console
3. 跨平台兼容性
Windows用户：注意文件路径使用反斜杠
\，但HTML中引用资源需用正斜杠/macOS用户：VS Code快捷键可能与系统快捷键冲突，可在"键盘快捷方式"中自定义
自测题
以下哪个VS Code插件可以实现代码实时预览？ A. Prettier B. Live Server C. vscode-icons 答案：B
在Chrome DevTools的哪个面板可以修改元素的CSS样式？ A. Console B. Network C. Elements 答案：C
如何在VS Code中设置保存文件时自动格式化代码？ 答案：安装Prettier插件后，在设置中勾选"Format On Save"，并将默认格式化器设为Prettier
评论