讲师中心 微信公众号
AI工具推荐 视频效率加速

Sublime Text怎么做Emmet自定义缩写_Sublime Text Emmet自定义教程【进阶】

云强酱_4681

云强酱_4681

发布时间:2026-04-04 14:57:57

|

144人浏览过

|

来源于php中文网

原创

Emmet自定义缩写必须修改snippets.json文件而非.sublime-snippet XML文件,因二者属不同系统;正确路径为Emmet插件目录下的emmet/snippets.json,修改后需新建HTML文件验证,且须确保语法模式为HTML。

sublime text怎么做emmet自定义缩写_sublime text emmet自定义教程【进阶】

Emmet自定义缩写必须改 snippets.json,别碰用户 Snippet XML 文件

很多人想加个 myhtml5 缩写,就去 Tools → Developer → New Snippet… 写 XML,结果死活不生效。这是因为 Emmet 的 HTML/CSS 缩写逻辑完全走 snippets.json,和 Sublime 原生的 .sublime-snippet 是两套系统,混用等于白配。

正确路径是找到 Emmet 插件目录下的 emmet/snippets.json —— Windows 通常在 C:\Users\{user}\AppData\Roaming\Sublime Text 3\Packages\Emmet\emmet\snippets.json,macOS 在 ~/Library/Application Support/Sublime Text 3/Packages/Emmet/emmet/snippets.json。直接编辑这个文件才有效。

  • 修改前先备份原文件,避免 JSON 格式错误导致 Emmet 整体失效
  • 只改 "html": { "abbreviations": { ... } } 里头的内容,不要动外层结构
  • 新增项必须用英文双引号包裹键名和字符串值,'!!': '!!!+html[lang=zh-CN]...' 这种单引号会解析失败
  • 改完保存,不用重启 Sublime,但要新建一个 HTML 文件再试,旧文件可能缓存了旧规则

html:5 和 ! 不是硬编码,它们都来自 snippets.json 的 abbreviations

你输入 html:5 能展开,不是因为 Emmet “内置了这个指令”,而是它在 snippets.json 里对应着一条配置:"html:5": "!!!+html[lang=${lang}]>(head>meta[charset=${charset}]+meta:compat+meta:vp+title{${1:Document}})+body"。同理,! 只是另一条映射,值一样或略有简化。

这意味着你可以安全覆盖默认行为:比如把 html:5 改成自动带 Bootstrap CDN 和 id="app" 的 div:

"html:5": "!!!+html[lang=zh-CN]>(head>meta[charset=UTF-8]+meta:compat+meta:vp+title{${1:Document}}+link[href=https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css rel=stylesheet])+body>div#app"
  • ${charset}、${lang} 这类变量,实际取值来自 snippets.json 同级的 variables 字段,可统一维护
  • 如果删掉 html:5 这一项,再输 html:5 就真没反应了——它不是“保留字”,只是预设缩写
  • 别试图用 html:5 触发 JS 注入之类操作,Emmet 不执行脚本,只做纯文本替换

自定义缩写后 Tab 不生效?先确认语法模式和触发方式

改完 snippets.json 发现新缩写(比如你加的 myheader)按 Tab 没反应,90% 是卡在两个地方:当前文件没识别成 HTML,或者 Tab 被别的插件劫持了。

右下角显示 Plain Text 或 Text 就直接无效,必须是 HTML(注意大小写,Html 或 html 都不行)。快捷修复:Ctrl + Shift + P → 输入 Set Syntax: HTML → 回车。

  • 验证是否真生效:输入 html:5,按 Tab 看是否还能展开,能说明 Emmet 整体正常
  • 如果 html:5 行、你的 myheader 不行,大概率是 snippets.json 格式错了一处逗号或括号,打开 JSONLint 粘贴检查
  • 坚持用 Ctrl + E 替代 Tab 触发,它绕过所有补全冲突,是调试自定义缩写的首选方式
  • 别在已有内容的行中间输缩写,Emmet 要求光标在空行或紧跟在空白符后,否则可能被当作普通文本忽略

变量和嵌套语法在自定义缩写里照常可用,但别滥用 $ 序号

${charset}、${1:Document}、ul>li*3 这些语法在自定义缩写里完全支持,不是只有官方缩写才特供。但要注意边界:

比如你想写 "nav:main": "nav.nav-main>ul>li*${count:3}>a[href=#]{Item $1}",本意是让用户输 nav:main 后按 Tab,再输数字覆盖 ${count:3}。但 Emmet 不支持运行时交互式变量赋值——${count:3} 会被直接替换成 3,$1 也只会生成 Item 1,不会弹出编号输入框。

  • ${1:xxx} 只控制光标初始位置和占位文本,不能动态改数量
  • 真正可控的序号只有 * 后面的数字,如 li*5 固定生成 5 个,li*${count} 中的 ${count} 必须是 variables 里预设的静态值
  • 嵌套符号 >、+、^ 全部可用,但别嵌太深,超过 4 层容易读错且难调试
  • 加 CSS 类或 ID 时,div.container#app 比 div[class=container][id=app] 更稳,后者在某些 Emmet 版本里解析异常
自定义缩写真正的难点不在写法,而在验证链路:改了 JSON → 新建 HTML 文件 → 切对语法 → 用 Ctrl + E 试 → 看控制台有没有报错。漏掉任一环,都会让你以为代码错了。

热门AI工具

更多
蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

LibLibAI
LibLibAI Hot

一款AI视频创作工具,主要用于国内领先的AI创意平台,以海量模型、低门槛操作与“创作-分享-商业化”生态,让小白与专业创作者都能高效实现图文乃至视频创意表达,适合需要提升相关任务效率的用户。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2055

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

3002

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

1016

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

3419

2025.09.10

bootstrap框架介绍
bootstrap框架介绍

本专题整合了bootstrap框架相关介绍,阅读专题下面的文章了解更多详细内容。

645

2026.03.18

bootstrap安装教程
bootstrap安装教程

本专题整合了bootstrap安装相关教程,阅读专题下面的文章了解更多详细操作教程。

199

2026.03.18

counta和count的区别
counta和count的区别

Count函数用于计算指定范围内数字的个数,而CountA函数用于计算指定范围内非空单元格的个数。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2828

2023.11.20

pdf怎么转换成xml格式
pdf怎么转换成xml格式

将 pdf 转换为 xml 的方法:1. 使用在线转换器;2. 使用桌面软件(如 adobe acrobat、itext);3. 使用命令行工具(如 pdftoxml)。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

4304

2024.04.01

C++运算符基础入门
C++运算符基础入门

本专题详细讲解了C++运算符的类型、语法与使用方法,涵盖算术运算符、关系运算符、逻辑运算符、位运算符、赋值运算符、条件运算符及其他特殊运算符,并通过代码示例解析优先级与结合性。

0

2026.10.09

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn