Sublime Text安装Emmet语法插件_Sublime Text前端代码提速利器【必备】-sublime-PHP中文网

emmet在sublime text中需确认package settings中存在且可编辑emmet.sublime-settings，否则缩写不展开；验证须测ul>li*3能否转为html结构、右下角显示html语法、命令面板可执行emmet: expand abbreviation。

sublime text安装emmet语法插件_sublime text前端代码提速利器【必备】

Emmet 在 Sublime Text 里不是“装上就自动好使”的插件，必须确认 Preferences > Package Settings > Emmet 已存在且 emmet.sublime-settings 可编辑，否则缩写根本不会展开。

如何验证 Emmet 是否真正生效

别只看插件列表里有没有“Emmet”，得测缩写是否能转成 HTML 结构：

新建一个 .html 文件，输入 ul>li*3，然后按 Tab —— 如果没变成带 3 个 <li> 的 <ul></ul>，说明没生效
检查状态栏右下角：文件类型必须显示为 HTML（不是 Plain text 或 Text），否则 Emmet 不触发
打开命令面板（Ctrl+Shift+P / Cmd+Shift+P），搜 Emmet: Expand Abbreviation，手动执行一次，看是否有反应

Package Control 安装后仍不工作？重点查这三处

常见失效原因和对应动作：

前端美化

使用此技能可创建独具特色、具备生产级质量的前端界面，设计品质高。当用户要求构建网页组件、页面、产物、海报或应用程序时（例如：网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任意 Web UI 进行样式优化与视觉美化），请启用该能力。输出需为富有创意、精雕细琢的代码与 UI 设计，避免千篇一律的 AI 风格。

下载

Preferences > Settings – Syntax Specific 里误加了 "auto_complete": false 或 "emmet_enabled": false，删掉这两行
用户设置 Preferences > Settings – User 中写了 "tab_completion": false，Emmet 依赖 Tab 补全，必须设为 true（默认就是 true，除非你改过）
插件被其他插件干扰，比如 SublimeCodeIntel 或旧版 HTML-CSS-JS Prettify，临时禁用它们再测试

缩写在 CSS 文件里不展开？要改语法作用域

Emmet 默认只在 HTML、XML、JSX 等上下文中启用缩写展开。CSS 文件需手动开启：

打开 Preferences > Package Settings > Emmet > Settings – User

加入这段配置：

{
    "syntax_scopes": {
        "css": "source.css",
        "scss": "source.scss",
        "less": "source.less"
    }
}

保存后，在 .css 文件中输入 m10 按 Tab，应展开为 margin: 10px;

为什么 `!+Tab` 生成的 HTML5 模板没有 `<meta charset>`？

这是 Emmet 2.x 的默认行为变更，不是 bug。新版模板精简了冗余标签，但你可以自定义：

打开 Preferences > Package Settings > Emmet > Settings – User

覆盖 snippets 配置，补全 charset：

{
    "snippets": {
        "html": {
            "abbreviations": {
                "!": "html5"
            },
            "snippets": {
                "html5": "<meta charset="UTF-8"><title>${1:Document}</title>${2: }"
            }
        }
    }
}