https://github.com/t-miracle/zencoding
ZenCoding入门到精通：提高html编码速度
https://github.com/t-miracle/zencoding
Last synced: 3 months ago
JSON representation
ZenCoding入门到精通：提高html编码速度
- Host: GitHub
- URL: https://github.com/t-miracle/zencoding
- Owner: T-miracle
- Created: 2021-05-08T02:54:43.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2021-05-08T02:55:02.000Z (about 4 years ago)
- Last Synced: 2025-01-18T17:57:01.968Z (5 months ago)
- Size: 1.95 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# zenCoding入门到精通：提高html编码速度
## zenCoding是什么
**zenCoding**是一款快速编写HTML,XML,XSL（或其他格式化语言）的编辑器插件，这个插件的实现了用缩写方式完成大量重复的书写工作。
他的核心是一个强大的缩写引擎，掌握这些缩写技巧，给我们的编写代码带来极高的编写效率。
现在主流的IDE（如：IntelliJ IDEA、VSCode、HBuilderX等）都默认支持了zenCoding，即使有一些编辑器（如：sublime Text、Notepad++等）不支持，也可以通过安装插件的方式，使其支持。
## 语法
### E：element，元素
例如：p、ul等标签元素
缩写：
```text
p
```
在html中写入**p**，按下Tab键（vscode中为自动提示），结果为：
```html
```
### *：数量
缩写：
```text
a*3
```
结果为：
### >：后代
缩写：
```text
ul>li
```
结果：
```html
```
### +：兄弟
缩写：
```text
h1+h2+h3
```
结果：
```html
```
### ^：上级
缩写：
```text
div>span^p
```
结果：
```html
```
**p**元素会向上提升一级，与**div**持平，允许多个 `^` ：
缩写：
```text
div>p>span^^bq
```
结果：
```html
```
### ()：分组
缩写：
```text
div>(p>span)*3
```
结果：
```html
```
### #：id属性
缩写：
```text
div#demo
```
结果：
```html
```
### .：class属性
缩写：
```text
div.demo
```
结果：
```html
```
### $：自增符号
缩写：
```text
.demo>#box$*3
```
结果：
```html
```
>允许同时使用多个 `$`
缩写：
```text
ul>li.num$$$*3
```
结果：
```html
```
>可以使用 `@` 定义初始值
缩写：
```text
ul>li.num$@20*3
```
结果：
```html
```
### []：自定义符号
缩写：
```text
a[id='btn' class='qwq' href='github.com']
```
结果：
### {}：文本
缩写：
```text
p{text$}*3
```
结果：
```html
text1
text2
text3
```
### :：引用
缩写：
```text
a:link
```
结果：
引用功能大多不常用，更多方式可自行探索。
### 隐式标签
>E之前无关联元素，E默认为div
缩写：
```text
.qqq#ppp
```
结果：
```html
```
>E之前有关联元素，E默认匹配相应元素
缩写：
```text
ul>.idx$*3
```
结果：
```html
```
缩写：
```text
table>.row*2>.col*3
```
结果：
```html
```
>感叹号
缩写：
```text
!
```
结果：
```html
Document
```
### 模拟文本
缩写：
```text
lorem
```
结果：
```text
Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, voluptate amet. At possimus porro molestiae tenetur dignissimos dolores minima nihil. Enim qui quo similique ratione fugiat assumenda vero aut at?
```
>后面添加数字，代表生成单词的个数
缩写：
```text
p>lorem3
```
结果：
```html
Lorem, ipsum dolor.
```
### 包装文本
vscode中写法如下（其他编辑器自行使用相应快捷键）：
缩写：
```text
text1
text2
text3
```
选中文本，按下`ctrl+shift+p`打开命令窗口输入**ewrap**
选择Emmet：使用缩写包围个别行（Wrap Individual Lines with Abbreviation）选项
输入:
```text
ul>li*
```
结果：
```html
- text1
- text2
- text3
```
### 复杂组合示例
缩写：
```text
.tx>h1#txt+(span{text-$@16})*4
```
结果：
```html
text-16
text-17
text-18
text-19
```
## 官方手册
[点击前往](https://docs.emmet.io/cheat-sheet/)