输入是用户向系统提供数据或指令的行为，用于触发处理、获取响应或执行任务，常见形式包括键盘录入、语音识别、图像上传等。
为什么输入
不是 Emmet 失效，而是 HTML 属性值补全（比如 class 里自动列出项目中已定义的类）根本不由 Emmet 控制，它依赖的是 CSS 语言服务联动。VSCode 默认只提供基础 HTML 标签和属性名提示，class 值、src 路径、href 链接这些都需要额外条件才能触发。
- 项目根目录下必须存在
.css 或 .scss 文件，且未被 files.exclude 隐藏
-
css.validate 必须为 true（默认开启，但某些工作区配置可能覆盖）
- 如果用 Tailwind，仅靠内置功能不行，必须装
tailwindcss-intellisense 插件，并确认 tailwindCSS.experimental.classRegex 配置正确
-
html.suggest.paths 决定是否补全相对路径——设为 true 才能在 src 或 href 中弹出文件选择
如何让 img[src=] 这类 Emmet 缩写直接展开带属性？
Emmet 支持在缩写里直接写属性和文本，但格式非常严格：等号前后不能有空格，属性值必须用双引号或单引号包裹（或不加引号仅限简单值），否则无法识别。
- ✅ 正确：
img[src=logo.png alt=Logo] → <img src="logo.png" alt="Logo">
- ✅ 正确：
a[href=#]{Click me} → @#@#@#@#@#@#@#@#@#@0
- ❌ 错误：
img[src = logo.png]（等号两边有空格）
- ❌ 错误：
img[src=logo.png alt=My Logo]（空格出现在值内且未引起来）
- ⚠️ 注意：
img[src=logo.png] 能展开，但 alt 不会被识别；想带多个属性，必须全部写在一对方括号里，用空格分隔
Vue / JSX 文件里 div.class 按 Tab 不展开？
VSCode 默认只在 html 语言模式下启用 Emmet 缩写展开。在 .vue 或 .jsx 文件中，即使写的是模板片段，语言模式也是 vue 或 javascriptreact，Emmet 不会自动响应。
- 最稳妥做法：右下角点击语言标识 → 选
Configure File Association for '.vue' → 设为 HTML（仅临时切换，不影响语法校验）
- 若需长期支持，改
settings.json："emmet.includeLanguages": { "vue-html": "html", "vue": "html", "javascriptreact": "html" }
- 但注意：这样会让 Emmet 在 JS/TS 代码块里也尝试展开（如
const x = div.container），容易误触——建议仅对模板区域手动切语言模式
- Volar 插件已接管 Vue 模板智能提示，部分用户反馈开启 Volar 后反而要关掉
emmet.includeLanguages 避免冲突
emmet.showExpandedAbbreviation 设成什么才最实用？
这个配置控制“缩写展开提示”是否显示，是影响你能否看到 div.container 对应生成什么标签的关键开关。设错会导致输入一半就卡住，连 div 都不提示。
-
"never"：完全不显示任何缩写预览——这是最常被误设的值，直接导致“输入没反应”
-
"inMarkupAndStylesheetFiles"（推荐）：只在 .html、.vue 模板、.css 等标记类文件中显示，兼顾准确性和干扰最小
-
"always"：所有文件都提示，包括 .js 里——容易在变量名里误触发，比如输 data 就弹出 <data></data> 标签
- 务必同时确认
"emmet.triggerExpansionOnTab": true，否则按 Tab 也不展开
真正麻烦的不是不会配，而是改了设置没重启编辑器，或改了用户设置却忘了检查工作区设置是否覆盖了它。
不是 Emmet 失效，而是 HTML 属性值补全（比如 class 里自动列出项目中已定义的类）根本不由 Emmet 控制，它依赖的是 CSS 语言服务联动。VSCode 默认只提供基础 HTML 标签和属性名提示，class 值、src 路径、href 链接这些都需要额外条件才能触发。
- 项目根目录下必须存在
.css或.scss文件，且未被files.exclude隐藏 -
css.validate必须为true（默认开启，但某些工作区配置可能覆盖） - 如果用 Tailwind，仅靠内置功能不行，必须装
tailwindcss-intellisense插件，并确认tailwindCSS.experimental.classRegex配置正确 -
html.suggest.paths决定是否补全相对路径——设为true才能在src或href中弹出文件选择
如何让 img[src=] 这类 Emmet 缩写直接展开带属性？
Emmet 支持在缩写里直接写属性和文本，但格式非常严格：等号前后不能有空格，属性值必须用双引号或单引号包裹（或不加引号仅限简单值），否则无法识别。
- ✅ 正确：
img[src=logo.png alt=Logo]→<img src="logo.png" alt="Logo"> - ✅ 正确：
a[href=#]{Click me}→@#@#@#@#@#@#@#@#@#@0 - ❌ 错误：
img[src = logo.png]（等号两边有空格） - ❌ 错误：
img[src=logo.png alt=My Logo]（空格出现在值内且未引起来） - ⚠️ 注意：
img[src=logo.png]能展开，但alt不会被识别；想带多个属性，必须全部写在一对方括号里，用空格分隔
Vue / JSX 文件里 div.class 按 Tab 不展开？
VSCode 默认只在 html 语言模式下启用 Emmet 缩写展开。在 .vue 或 .jsx 文件中，即使写的是模板片段，语言模式也是 vue 或 javascriptreact，Emmet 不会自动响应。
- 最稳妥做法：右下角点击语言标识 → 选
Configure File Association for '.vue'→ 设为HTML（仅临时切换，不影响语法校验） - 若需长期支持，改
settings.json："emmet.includeLanguages": { "vue-html": "html", "vue": "html", "javascriptreact": "html" } - 但注意：这样会让 Emmet 在 JS/TS 代码块里也尝试展开（如
const x = div.container），容易误触——建议仅对模板区域手动切语言模式 - Volar 插件已接管 Vue 模板智能提示，部分用户反馈开启 Volar 后反而要关掉
emmet.includeLanguages避免冲突
emmet.showExpandedAbbreviation 设成什么才最实用？
这个配置控制“缩写展开提示”是否显示，是影响你能否看到 div.container 对应生成什么标签的关键开关。设错会导致输入一半就卡住，连 div 都不提示。
-
"never"：完全不显示任何缩写预览——这是最常被误设的值，直接导致“输入没反应” -
"inMarkupAndStylesheetFiles"（推荐）：只在.html、.vue模板、.css等标记类文件中显示，兼顾准确性和干扰最小 -
"always"：所有文件都提示，包括.js里——容易在变量名里误触发，比如输data就弹出<data></data>标签 - 务必同时确认
"emmet.triggerExpansionOnTab": true，否则按 Tab 也不展开
真正麻烦的不是不会配，而是改了设置没重启编辑器，或改了用户设置却忘了检查工作区设置是否覆盖了它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
