Gvim+Emmet.vim 那些事。

時間 2019-11-12

標籤 gvim+emmet.vim gvim emmet vim 那些欄目 Unix 简体版

原文原文鏈接

轉自:http://www.jianshu.com/p/67fa1e2114c5

背景

HTML和CSS的寫法相對固定，並且重複的工做特別多，特別是尖括號實在是很煩。使用Emmet至少能幫你節省一半的前期開發工做量，因此花點時間學習Emmet是很值得的。Emmet不是編程語言，而只是編輯器的插件，也能夠自定義規則。css

安裝

Emmet支持多種編輯器，參見列表。因爲我使用vim，這裏只介紹vim的插件。html

下載地址： https://github.com/mattn/emmet-vimgit
安裝方法：上面的頁面介紹的很清楚github
配置Emmet編程
- 只在html和css文件中起做用
```
let g:user_emmet_install_global = 0 autocmd FileType html,css EmmetInstal
```
- 修改Emmet的觸發鍵
  let g:user_emmet_leader_key='<C-Z>'
教程：vim

教程裏已經介紹的很清楚，我主要羅列經常使用寫法。api

用法

快捷鍵

注：<c-y>, 指先按ctrl+y，再按,，後面再也不說明bash

快捷鍵	介紹
`<c-y>,`	emmet觸發鍵，tips:輸完命令後最好在後面多寫一個空格，如：`html:5_`
`v` `<c-y>,`	先進入可視模式，選擇目標文本，按快捷鍵，狀態欄彈出Tags:，輸入命令便可
`<c-y>n`	跳轉到下一個編輯點
`<c-y>N`	跳轉到上一個編輯點
`<c-y>i`	移動到img標籤，按快捷鍵，自動爲圖片添加大小
`<c-y>m`	合併多行爲一行
`<c-y>k`	刪除當前tag
`<c-y>/`	切換添加、去除註釋
`<c-y>a`	自動將網址轉換爲連接標籤

簡寫注意事項

簡寫	編譯
.wrap>.content	div.wrap>div.content
em>.info	em>span.info
ul>.item*3	ul>li.item*3
table>#row$*4>[colspan=2]	table>tr#row$*4>td[colspan=2]

基本html用法

! (生成基本html結構，效果同html:5)
示例： !
效果：框架

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>

html:5 (效果同!，另外還有html:xt, html:4s)編程語言
# (生成id)
示例： div#main 或者直接寫 #main
效果：
```
<div id="main"> </div>
```
. (生成class)
示例： div.list
效果：
```
<div class="list"> </div>
```
> (生成後代元素)
示例： div.list>ul>li
效果：
```
<div class="list"> <ul> <li></li> </ul> </div>
```
+ (生成兄弟元素)
示例： h1+h2+p
效果：
```
<h1></h1> <h2></h2> <p></p>
```

{} (文本)
示例： a{Click me}+ul>li{item$}*3
效果：

<a href="">Click me</a> <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul>

示例2：p>{Click }+a{here}+{ to continue}
效果：

<p>Click <a href="">here</a>to continue</p>

^ (生成上級元素)
示例： div.list>ul>li^span
效果：

<div class="list"> <ul> <li></li> </ul> <span></span> </div>

* (重複生成元素)
示例： ul>li*5
效果：

<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>

() (生成分組)
示例： div.list>ul>li
效果：

<div id="main"> <div id="header"> <ul> <li></li> <li></li> </ul> </div> <div id="footer"></div> </div>

示例2：(div>dl>(dt+dd)*3)+footer>p
效果：

<div> <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> </div> <footer> <p></p> </footer>

$[N] (生成編號，單個編號默認從1開始，也支持多位編號，須要幾位就寫幾個，默認從0開始,N爲起始編號)
示例： div>(ul>li.item$*2)+(ul>li.item$$@5*2)
效果：
```
<div> <ul> <li class="item1"></li> <li class="item2"></li> </ul> <ul> <li class="item05"></li> <li class="item06"></li> </ul> </div>
```

$@[-][N] (編號排序-爲倒序，N爲起始編號)
示例： ul>li.item$$@-*2
效果：

<ul> <li class="item02"></li> <li class="item01"></li> </ul>

示例： ul>li.item$$@5*3
效果：

<ul> <li class="item05"></li> <li class="item06"></li> </ul>

lorem[N] (生成隨機內容，N爲單詞數量)
示例： lorem
效果：

Elit neque iste aspernatur repellat ducimus alias incidunt nam nemo ducimus, id consequatur illo blanditiis! Necessitatibus minima repellat dignissimos eaque quo obcaecati quasi. Voluptatum nostrum harum corporis optio molestias nihil.

示例： h2*3>lorem5 或者 (h2>lorem5)*3
效果：

<h2> Consectetur esse recusandae sapiente magnam. </h2> <h2> Lorem odio unde magni molestias! </h2> <h2> Amet perferendis praesentium facilis maxime. </h2>

實用html組合

生成一個基本網站框架
示例： #main_page>(div.header>div.logo+div.menu)+div.context+div.footer
效果：

<div id="main_page"> <div class="header"> <div class="logo"></div> <div class="menu"></div> </div> <div class="context"></div> <div class="footer"></div> </div>

生成內容
示例：.context>((span.title>lorem2)+(span.text>lorem10))*3
效果：

<div class="context"> <span class="title">Elit quod?</span> <span class="text">Amet cumque perferendis a quasi dolor voluptatem repellat nihil lorem.</span> <span class="title">Adipisicing atque.</span> <span class="text">Consectetur deleniti quasi ea iste atque dolores rem nihil. Dolor.</span> <span class="title">Adipisicing laborum?</span> <span class="text">Sit nam sapiente eius dolorem accusamus, beatae impedit molestias expedita?</span> </div>

生成菜單
示例： div.menu>ul#navigation>li*5>a{Item $}
效果：

<div class="menu"> <ul id="navigation"> <li><a href="">Item 1</a></li> <li><a href="">Item 2</a></li> <li><a href="">Item 3</a></li> <li><a href="">Item 4</a></li> <li><a href="">Item 5</a></li> </ul> </div>

可視化模式下生成菜單
示例文本：

首頁
新聞
方案
關於

按v進入可視模式，選中文本，再按<c-y>,，輸入：
nav>ul.nav>li.page$*>a
效果：

<nav> <ul class="nav"> <li class="page1"><a href="">首頁</a></li> <li class="page2"><a href="">新聞</a></li> <li class="page3"><a href="">方案</a></li> <li class="page4"><a href="">關於</a></li> </ul> </nav>

再進一步，取消上面的操做：輸入：
ul.nav>li.page$*>img[alt=$#]+a[href='#']
效果

<ul class="nav"> <li class="page1"> <img src="" alt="首頁"> <a href="#">首頁</a> </li> <li class="page2"> <img src="" alt="新聞"> <a href="#">新聞</a> </li> <li class="page3"> <img src="" alt="方案"> <a href="#">方案</a> </li> <li class="page4"> <img src="" alt="關於"> <a href="#">關於 </a> </li> </ul>

自動添加圖片尺寸
<img src="test.jpg" alt="首頁">
光標移動到img標籤內，按<c-y>i再按Enter便可
效果：
<img src="test.jpg" alt="首頁" width="500" height="375">

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。