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

云强酱_4681

云强酱_4681

2026-04-04

144人浏览

原创

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:

Zapier Agents
Zapier Agents

Zapier Agents是一款用于构建和运行自动化 AI 代理的工作流工具。

下载
"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 试 → 看控制台有没有报错。漏掉任一环,都会让你以为代码错了。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

sublime

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

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

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

2023.08.07

2035

5

json是什么
json是什么

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

2023.08.23

2982

1

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

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

2023.10.13

1016

3

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

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

2025.09.10

3379

7

bootstrap框架介绍
bootstrap框架介绍

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

2026.03.18

645

21

bootstrap安装教程
bootstrap安装教程

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

2026.03.18

199

9

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

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

2023.11.20

2808

5

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

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

2024.04.01

4284

5

xml怎么变成word
xml怎么变成word

步骤:1. 导入 xml 文件;2. 选择 xml 结构;3. 映射 xml 元素到 word 元素;4. 生成 word 文档。提示:确保 xml 文件结构良好,并预览 word 文档以验证转换是否成功。想了解更多xml的相关内容,可以阅读本专题下面的文章。

2024.08.01

5537

7

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程