📝 课前小测

下面这道题，涉及今天要学的核心知识点。读完文章后，你一定能答对！

题目：关于VS Code，说法正确的是？

A. VS Code是微软付费购买的软件，需要购买正版才能使用 B. VS Code只能编辑HTML文件，不能编辑Python或JavaScript C. VS Code是免费开源的编辑器，支持安装插件扩展功能 D. 安装VS Code后自带的插件已经足够，不需要再安装其他插件

（答案在文章末尾，先不要偷看哦～）

第1篇：代码编辑器之王——Visual Studio Code

💡 学习目标：安装配置VS Code，学会安装插件，掌握提升效率的快捷键。

一、为什么需要专门的编辑器？

记事本也能写代码，但体验很差——没有代码高亮（关键字不会变色），没有自动补全，写错了也不知道。一个好用的编辑器能让写代码的效率翻倍。

VS Code（Visual Studio Code，简称 VS Code）就是目前最流行的免费代码编辑器，由微软开发，适合从前端到后端各种编程场景。

二、VS Code 四大优势

✅ 完全免费           → 官网直接下载，不用花钱，不用破解
✅ 插件生态丰富       → 需要什么功能，搜一下就能装
✅ 跨平台支持         → Windows / Mac / Linux 都能用
✅ 智能代码提示       → 写代码时自动补全，减少拼写错误

三、安装配置（手把手教学）

🔧 Step 1：下载

打开浏览器，访问官方网站：

https://code.visualstudio.com/

页面会自动检测你的操作系统，点击中央的 「Download for Windows」（Mac 显示对应版本）。

🔧 Step 2：安装

双击安装包，进入安装向导。务必勾选以下两项：

☑ Add to PATH（添加到系统环境变量）
☑ Register Code as an editor for supported file types（注册为代码文件默认编辑器）

其余全部保持默认，一路点”下一步”直到完成。

⚠️ 重要提醒：「Add to PATH」如果不勾选，后面在命令行输入 code 会提示”找不到命令”。这是新手最容易踩的坑。

🔧 Step 3：验证安装

按 Win + R，输入 code，回车。看到 VS Code 界面即安装成功。

四、认识界面布局

VS Code 打开后，界面分三个区域：

┌──────────────────────────────────────────┐
│ 🔵 活动栏  │      编辑器区域（写代码）      │
│            │                               │
│ 📁 文件   │  ← 在这里写代码                 │
│ 🔍 搜索   │                               │
│ 🧩 插件   │                               │
│ 🔀 Git    │                               │
├───────────┴─────────────────────────────┤
│ 🟢 状态栏：UTF-8 │ HTML │ 行:列            │
└──────────────────────────────────────────┘

活动栏图标说明：

五、必装插件一：Live Server

做网页开发必备插件，可以实时预览网页——修改代码保存后，浏览器自动刷新显示最新效果。

🔧 安装步骤：

1. 点击左侧 **🧩 插件图标**

2. 搜索框输入 **Live Server**

3. 找到作者为 **Ritwick Dey** 的那个，点击 **Install**

安装完成后，状态栏右下角会出现 “Go Live” 按钮。点击它，浏览器自动打开当前页面。

📌 实战演示：

1. 用 VS Code 新建文件夹，新建 `index.html` 文件，输入以下内容：

    
    


    
你好，Web开发！
    
修改这行文字，浏览器会自动刷新

2. 保存文件（`Ctrl + S`）

3. 点击右下角 **”Go Live”**

浏览器自动打开页面。以后每次修改 index.html 并保存，浏览器会自动刷新——这就是”热更新”体验。

六、必装插件二：Chinese 语言包

VS Code 默认是英文界面。安装中文语言包可以让上手更轻松：

1. 点击 **🧩 插件图标**

2. 搜索 **Chinese**

3. 找到 **”Chinese (Simplified) Language Pack for VS Code”**，点击 **Install**

4. 重启 VS Code

七、快捷键速查表

快捷键是效率神器，熟练使用可以让编码速度快上一倍：

📝 小技巧：Ctrl + 反引号 中的”反引号”是 Tab 键上方、Esc 键下方的那个符号（ ），不是单引号（”）。

八、设置同步（多设备使用）

如果同时用多台电脑，可以开启设置同步功能，插件和配置自动在多设备间同步：

1. 点击左下角 **👤 账号图标**

2. 选择 **”打开设置同步”**

3. 登录 GitHub 或 Microsoft 账号

开启后，插件、快捷键配置、主题等全部自动同步。换电脑后无需重新配置环境。

九、本篇总结

✅ VS Code：微软开发的免费开源编辑器，跨平台、插件丰富
✅ 安装时务必勾选 "Add to PATH"
✅ 界面三区域：活动栏（左侧） + 编辑器（中间） + 状态栏（底部）
✅ Live Server：点击 "Go Live" 启动实时预览，修改代码自动刷新
✅ Chinese 语言包：将界面切换为中文
✅ 核心快捷键：Ctrl+S保存 / Ctrl+P搜文件 / Ctrl+/注释

*下篇预告：浏览器开发者工具——Chrome DevTools，带你深入了解网页的”内部构造”！*

📝 学完了，来检验一下成果吧！

1. VS Code 安装时如果不勾选”Add to PATH”，会导致什么问题？

A. VS Code 无法正常启动 B. 在命令行输入 code 时会提示找不到命令 C. VS Code 界面变成英文无法切换 D. 插件无法正常安装

2. 想让网页在修改代码后自动刷新显示，最应该安装哪个插件？

A. Chinese Language Pack B. GitLens C. Live Server D. Prettier

3. Ctrl + P 在 VS Code 中的作用是？

A. 保存当前文件 B. 快速搜索并打开项目中的某个文件 C. 关闭当前标签页 D. 打开终端

答案：B, C, B

解析：

1. “Add to PATH” 把 VS Code 添加到系统环境变量。不勾选的话，终端里输入 `code` 计算机会找不到这个程序。需要手动配置环境变量才能解决，比较麻烦。

2. Live Server 的核心功能是启动本地服务器并实时预览网页，修改代码保存后浏览器自动刷新。这在做网页开发时非常有用，不需要每次手动刷新页面。Chinese 是语言包，GitLens 是 Git 可视化工具，Prettier 是代码格式化工具。

3. `Ctrl+P（Quick Open）` 可以快速搜索文件名并直接打开。输入文件名的一部分就能匹配，特别适合项目文件很多时快速定位。`Ctrl+S` 是保存，`Ctrl+W` 是关闭标签页。