Frontend Academy · 课时

VSCode：扩展、Emmet 与快捷键

Q: 「VSCode：扩展、Emmet 与快捷键」这节课中我会学到什么？

安装必要的扩展，使用 Emmet 缩写快速编写 HTML 和 CSS，并学习能够加快编辑速度的键盘快捷键。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

安装必要的扩展，使用 Emmet 缩写快速编写 HTML 和 CSS，并学习能够加快编辑速度的键盘快捷键。

VSCode：扩展、Emmet 与快捷键 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

为什么选择 VSCode？

Visual Studio Code 是前端开发中最受欢迎的代码编辑器。它免费、开源、运行速度快，并拥有庞大的扩展生态系统。大多数前端团队都以它作为统一标准。

必备扩展

前端开发必备的扩展包括：ESLint（行内代码检查）、Prettier（自动格式化）、GitLens（行内显示 git blame 信息）、Path Intellisense（自动补全文件路径）、Auto Rename Tag（重命名成对的 HTML 标签）。

特定语言扩展

TypeScript：TypeScript 和 JavaScript 语言功能（内置）。React：ES7+ React/Redux 代码片段。Vue：Volar（官方扩展）。Tailwind：Tailwind CSS IntelliSense。

什么是 Emmet？

Emmet 内置于 VSCode 中。输入缩写并按 Tab，即可将其展开为完整的 HTML 或 CSS。这会大幅提升编写标记的速度。

<!-- Type then press Tab: -->
nav>ul>li*3>a{Link $}

<!-- Expands to: -->
<nav>
  <ul>
    <li><a href="">Link 1</a></li>
    <li><a href="">Link 2</a></li>
    <li><a href="">Link 3</a></li>
  </ul>
</nav>

常用 Emmet 缩写

请学习这些 Emmet 快捷方式：! → HTML 基础模板，div.container → 带有 class 的 div，ul>li*5 → 包含 5 个项目的列表，input:email → 电子邮件输入框，form:post → method=post 的表单。

<!-- type: div.card>img+h3{Title}+p{Description} → -->
<div class="card">
  <img src="" alt="">
  <h3>Title</h3>
  <p>Description</p>
</div>

必备键盘快捷方式

最能节省时间的快捷方式：Ctrl/Cmd+P（快速打开文件）、Ctrl/Cmd+Shift+P（命令面板）、Alt+Click（多光标）、Ctrl/Cmd+D（选择下一个匹配项）、Ctrl/Cmd+/（切换注释）。

多光标编辑

Alt+Click 可添加光标。Ctrl+Alt+Up/Down 可在上方或下方添加光标。Ctrl+D 可选择所选内容的下一个匹配项。使用多个光标时，所有编辑都会同时进行，非常适合在较小的作用域中重命名变量。

集成终端

使用 Ctrl+`（反引号）在 VSCode 内打开终端。您可以将终端拆分，在一个面板中运行开发服务器，同时在另一个面板中运行测试，而无需离开编辑器。

工作区设置

在项目中创建 .vscode/settings.json 文件，以设置覆盖用户设置的项目专用设置。请提交此文件，以便所有团队成员获得相同的使用体验：保存时格式化、制表符大小和标尺列。

// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2
}

IntelliSense 与自动导入

VSCode 的 IntelliSense 提供自动补全、参数提示和悬停文档。对于 TypeScript 项目，在您接受补全建议时，它还会自动导入符号，无需手动导入。

转到定义与引用

在任意符号上按 Ctrl+Click（或 F12），即可跳转到其定义。按 Shift+F12 可显示所有引用。按 Ctrl+Shift+F 可搜索所有文件。这些功能对于浏览大型代码库不可或缺。

问题面板

问题面板（Ctrl+Shift+M）会列出打开文件中的所有 ESLint 和 TypeScript 错误与警告。这是提交前快速查看待修复问题的最佳方式。

快速检查

在 VSCode 中，Emmet 缩写 ul>li*3 会展开成什么？

总结：VSCode 工作流

安装 ESLint、Prettier 和特定语言扩展。使用 Emmet 快速编写 HTML/CSS。熟悉键盘快捷方式（Cmd+P、Cmd+Shift+P、Cmd+D）。在 .vscode/settings.json 中设置 formatOnSave。使用多光标编辑处理重复性修改。使用“转到定义”浏览代码。

常见问题解答

「VSCode：扩展、Emmet 与快捷键」课时是免费的吗？

是的 — 「VSCode：扩展、Emmet 与快捷键」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「VSCode：扩展、Emmet 与快捷键」这节课中我会学到什么？

安装必要的扩展，使用 Emmet 缩写快速编写 HTML 和 CSS，并学习能够加快编辑速度的键盘快捷键。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「VSCode：扩展、Emmet 与快捷键」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

Chrome DevTools：Elements、Console、Network
VSCode：扩展、Emmet 与快捷键
Prettier 与 ESLint 设置
浏览器兼容性与 caniuse.com

← 返回 Frontend Academy