怎么用VSCode快速生成HTML骨架-Emmet语法快捷输入秘籍

怎么用VSCode快速生成HTML骨架？Emmet语法快捷输入秘籍

想快速搭建一个标准的HTML5页面骨架？其实秘诀就一个：在VSCode里，输入一个简单的感叹号 !，然后按下 Tab 键。

没错，就这么简单。但先别急，这个操作要成功，必须同时满足三个硬性条件：你的文件必须是 .html 或 .htm 后缀、编辑器的语言模式得是 HTML，并且光标得在空行或行首。这三个条件，缺了任何一个，! 都不会有任何反应。

为什么敲了 ! 没反应？三个硬性条件缺一不可

Emmet 可不是“按了就出”的魔法，它只在特定的上下文环境中才会响应。我们来逐一拆解这三个条件：

• 文件后缀要对：文件必须已经保存为 .html 或 .htm。如果你新建了一个文件还没保存（比如那个默认的 Untitled-1），Emmet 是不会理你的。
• 语言模式要准：看看VSCode窗口右下角的状态栏，那里必须显示为 HTML。如果是 Plain Text（纯文本）或者 Ja vaScript，那肯定不行。最直接的办法就是点一下状态栏上的语言标识，手动切换到 HTML。
• 光标位置要对：光标必须在一个空行的开头，或者整个文件是空的。如果你把 ! 写在了一个
  标签里面，或者一行里已经有其他文字了，那么 ! 只会被当作一个普通的字符输入进去。

! 和 html:5 有啥区别？现在只用 ! 就够了

可能你以前还见过 html:5 这种写法。这里明确一下：html:5 是旧的写法，VSCode 现在已经将其标记为废弃了。而 ! 是官方推荐的快捷别名，语义更清晰，触发也更稳定。

• 两者最终生成的HTML结构是完全一样的：都包含 、、 和 这些基本骨架。
• ! 更短，更不容易误输入空格。要知道，html:5 如果中间不小心多打了一个空格（比如打成 html :5），就会直接失效。
• 所以，不建议混用。团队协作时，统一使用 ! 这个指令，能避免新人查阅不同资料时产生困惑。

生成后发现 lang="en" 或 不合需求？别改源码，用用户代码片段

用 ! 生成骨架后，你可能会发现默认的 lang="en"（英语）不适合你的中文项目，或者那个千篇一律的 标题需要每次都手动修改。

这时候，千万别去动VSCode的默认设置或者插件源码，那既不可靠又难以维护。正确的做法是使用“用户代码片段”功能来覆盖它。具体怎么做呢？

这里有个小提示：你可以立即学习“前端免费学习笔记（深入）”来获取更系统的知识。操作上，大致是这几个步骤：

• 打开VSCode的命令面板（快捷键是 Ctrl+Shift+P 或 Cmd+Shift+P），搜索 Configure User Snippets，然后选择 html。
• 在弹出的配置文件中，替换默认的内容。比如，把 "lang": "en" 改成 "lang": "zh-CN"，把 换成 （这里的 $1 表示生成后光标初始停留的位置）。
• 你还可以趁机加入一些团队规范项，比如自动添加一行移动端视口标签：。这样配置一次，以后每次生成就都生效了。

在 .vue 或 .jsx 里想用 !？得配置 emmet.includeLanguages

VSCode 默认只在纯 .html 文件里启用 Emmet 的骨架生成功能。如果你在Vue单文件组件的