VSCode内置Emmet但需正确配置：先确认语言模式为HTML，再注意缩写语法（如ul>li*5）、作用域限制及多语言支持设置。
VSCode 内置 Emmet，不需要额外安装插件就能用——但默认配置和常见误操作会让缩写“不生效”或“输出错乱”，关键在触发方式、语法细节和作用域判断。
Emmet 缩写为什么敲完 div 按 Tab 没反应？
最常见原因是当前文件没被识别为 HTML（或支持 Emmet 的语言）。VSCode 不是靠文件后缀决定，而是靠「语言模式」（Language Mode）。
- 按
Ctrl+K M（Windows/Linux）或Cmd+K M（macOS），确认右下角状态栏显示的是HTML，不是Plain Text或JavaScript - 如果打开的是无后缀文件或
.txt，手动切换语言模式为HTML - 在非
<body>区域（比如<script>标签内）输入缩写，Emmet 默认不激活 —— 可通过设置启用："emmet.includeLanguages": { "javascript": "html" }
ul>li*5 这类嵌套缩写怎么确保生成结构正确？
Emmet 解析依赖空格与符号优先级。空格是“后代”关系，> 是“子元素”，+ 是“兄弟”，写错一个字符结果就不同。
ul>li*5 // 正确：ul 下 5 个 li ul>li*5>a // 正确：每个 li 内一个 a ul>li*5+a // 错误：5 个 li + 1 个 a（同级），不是嵌套
-
*必须紧跟在标签名后，中间不能有空格：li *5不生效 - 属性用
[]，多个属性不加逗号：div[title="x"][id="y"] - 文本内容用
{}，且必须紧贴标签或表达式：h1{Hello}✅，h1 {Hello}❌（空格导致解析失败）
如何让 Emmet 在 JSX / Vue / Markdown 中也工作？
Emmet 默认只对 HTML、XML、CSS 等启用。JSX 和 Vue 单文件组件中的模板区域需要显式映射语言模式。
立即学习“前端免费学习笔记（深入）”；
- 在
settings.json中添加：
"emmet.includeLanguages": {
"javascript": "html",
"typescript": "html",
"vue-html": "html",
"markdown": "html"
}
- Vue 文件中，只有
<template>区域会响应 Emmet；<script>里需配合上面的javascript: html才能用（例如写div→Tab出<div></div>） - Markdown 中缩写仅在代码块外生效（即普通段落），且生成的是纯 HTML 标签，不会转义
常用但容易忽略的快捷键和行为
很多人只记得 Tab，其实 Enter 和 Ctrl+E 在特定场景更高效。
-
Tab：默认触发，但若光标在行中（非行尾），可能只补全单词而非展开缩写 —— 确保光标在缩写末尾再按 -
Enter：在多行缩写中换行后继续写（如ul>li*3回车后接着写a），比反复Tab更顺滑 -
Ctrl+E（Windows/Linux）或Cmd+E（macOS）：强制展开当前光标处的缩写，无视上下文限制 - 输入
!再按Tab，直接生成 HTML5 文档骨架（<!DOCTYPE html>...</html>）
真正卡住的往往不是语法记不住，而是语言模式没切对、空格多打了一个、或者在 <style> 里硬试 div 缩写——Emmet 不是万能补全器，它只在明确支持的上下文中工作。
