自定義Emmet程式碼塊

阿新 • • 發佈：2019-01-13

簡單介紹

Emmet寫html的時候，在新建的檔案內輸入！（感嘆號）然後按 TAB鍵（有的是Ctrl+E），就能生成如下片段：

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

</body>
</html>

可是內容太少，想要更偷懶就必須先麻煩自己自定義一下。
*本文以window下的sublime為例。

開始

1.找到要修改的檔案

在編輯器外掛目錄下找到相應json檔案:snippets.json
（不想看，想直接用的點這裡。）

X:…\Sublime\Data\Packages\Emmet\emmet\snippets.json

開啟後可以在672行看到如下程式碼（按理來說位置都一樣，不排除可能有偏差）

    "html": {                 //snippets.json內第672行
        "filters": "html",    //snippets.json內第673行
        "profile": "html",
        "snippets 
": {        //這裡的內容會按原樣輸出
        "!!!":    "<!DOCTYPE html>",
        "!!!4t":  "<!DOCTYPE HTML PUBLI...",//太長省略..
        "!!!4s":  "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4...

已知輸入相應的鍵名！！！4s會輸出< !DOCTYPE HTML PUBLIC \”-//W3C//DTD HTML 4…

2.新增自己的程式碼片段

在”snippets”這個鍵名下的值，您可以輸入任何內容，並按原樣輸出。

注意：

1.鍵名不要重複
2.冒號需要轉義（加反斜槓\）
3.輸出的內容換行輸入\n
4.空格會直接輸出
5.別忘了在最後加個,（逗號）

栗子：

"!!": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\n  <meta name=\"viewport\" content=\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\">\n  <meta name=\"keywords\" content=\"your keywords\">\n<meta name=\"description\" content=\"your description\">\n  <title>Document</title>\n  </head>\n<body>\n</body>\n</html>",

輸入兩個感嘆號（！！）按TAB鍵得到如下內容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta name="keywords" content="your keywords">
  <meta name="description" content="your description">
  <title>Document</title>
  </head>
<body>
</body>
</html>

注意：這種寫法比較雜亂，看著不爽，寫起來也煩人，如無不適這麼寫也夠了，更規整的可以往下看。

3.縮略寫法”abbreviations”

就在之前的位置向下一點就可以看到如下鍵值對：

"abbreviations": {
            "!": "html:5",
            "a": "<a href=\"\">",
            "a:link": "<a href=\"http://|\">",
            "a:mail": "<a href=\"mailto:|\">",
            "abbr": "<abbr title=\"\">",
            "acr|acronym": "<acronym title=\"\">",
            "base": "<base href=\"\" />",
            .....

在“abbreviations”這個鍵名下進行鍵值對的自定義。
栗子：

"abbreviations": {
            "!!":"!!!+html[lang=zh-CN]>(head>meta[charset=${charset}]+meta:vp+title)+body",

解釋	程式碼
已經被定義的鍵名，會返回鍵值，所以得到< !DOCTYPE html>	!!!
加號用來連線，會另起一行	+
方括號代表定義屬性，得到< html lang=”zh-CN”>	html[lang=zh-CN]
大於號左邊會作為父節點包住右邊的	>
括號內的內容會作為一個組	( )
表示引用charset這個鍵名的鍵值	${charset}
預設定義的鍵名，返回預設的鍵值內容< meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0”>	meta:vp
就是title和body	+title+body

鍵名是!!兩個感嘆號，後面的是自定義的內容，輸入雙感嘆號按TAB後得到以下內容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title></title>
</head>
<body>

</body>
</html>

在“abbreviations”這個鍵名下進行鍵值的定義，就是對已定義的鍵名用+、（）、${}等進行拼接，得到鍵值的拼接和各種排列。

"meta": "<meta/>",
"meta:utf": "<meta http-equiv=\"Content-Type\" content=\"text/html;charset=UTF-8\" />",
"meta:win": "<meta http-equiv=\"Content-Type\" content=\"text/html;charset=windows-1251\" />",
"meta:vp": "<meta name=\"viewport\" content=\"width=${1:device-width}, user-scalable=${2:no}, initial-scale=${3:1.0}, maximum-scale=${4:1.0}, minimum-scale=${5:1.0}\" />",
"meta:compat": "<meta http-equiv=\"X-UA-Compatible\" content=\"${1:IE=7}\" />"

上面是外掛內所有Meta標籤的內容，並沒有keywords或description，因此需要自己寫。

結束，給個現成的

在”abbreviations”內插入如下程式碼（第689行）：

"!!": "!!!+html[lang=zh-CN]>(head>meta[charset=${charset}]+title{${1:Document}}+meta:vp+meta[http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"]+meta[name=\"keywords\" content=\"your keywords\"]+meta[name=\"description\" content=\"your description\"]+link:favicon+link:css)+body",
//偷懶直接寫了keywords和description

儲存後重啟，輸入兩個感嘆號或TAB或Ctrl+E

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="keywords" content="your keywords">
    <meta name="description" content="your description">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>

Emmet官網的一些連結

自定義Emmet程式碼塊

簡單介紹 Emmet寫html的時候，在新建的檔案內輸入！（感嘆號）然後按 TAB鍵（有的是Ctrl+E），就能生成如下片段： <!DOCTYPE html> <html lang="en"> <head&g

VS Code中自定義Emmet程式碼片段

vscode中內建了Emmet的擴充套件，這讓我們在寫網頁程式碼時方便了很多，但是有時我們也需要自定義一些Emmet的程式碼片段來實現一些特殊程式碼的生成，比如：自動匯入一些來自CDN的js或css樣式（Bootstrap、jQuery等）檔案。那麼在vscode中如何來

eclipse自定義代碼塊折疊

defined 選擇 pre 技術分享 .com cnblogs star 5% 安裝下載插件 com.cb.eclipse.folding_1.0.6.jar　下載地址：http://files.cnblogs.com/haiq/代碼折疊插件_com.cb.eclip

自定義python模塊路徑

python自定義python模塊路徑：如下載好的python模塊scons $ tar zxfv scons-3.0.0.tar.gz$ cd scons-3.0.0$ mkdir ~/scons$ python setup.py install --home ~/scons/ $ vi ~/.bash

openERP筆記，自定義開發模塊

客戶自己作者開發模式 desc 模塊開發 encoding 自動安裝 ##目標 OpenERP模塊基本結構使用模塊添加額外的字段(Date Required和Rush Order) 擴展視圖, 讓OpenERP能夠顯示新的字段修改用於OpenERP工作流的可用

Android原生繪圖進度條+簡單自定義屬性程式碼生成器

零、前言 1.感覺切拼字串是個很有意思的事，好的拼接方式可以自動生成一些很實用的東西 2.本文自定義控制元件並不是很高大上的東西，目的在於計錄自定義控制元件的書寫規範與行文流程 3.建議大家自定義控制元件時自定義屬性有自己專屬字首，有利無害,何樂不為 4.本文是根據鴻洋在慕課網上的教程敲的：詳見，自己

IDEA常用模板程式碼快捷鍵及自定義模板程式碼

1. 常用模板程式碼快捷鍵（1）main方法在類體中輸入 psvm ，回車。生成如下程式碼。 public static void main(String[] args) { } （2）列印輸出在方法體中輸入 sout ，回車。生成如下程式碼。 Syst

8.4.2 時間序列預測——使用TFLearn自定義模型——程式碼執行錯誤及解決方法

《TensorFlow》：實戰Google深度學習框架中第八章的——8.4.2 時間序列預測——使用TFLearn自定義模型下的原始碼執行報錯：原因分析： score=metrics.accuracy_score(y_test,y_predicted)該句程式碼中y_predi

SublimeText自定義小程式碼段

<snippet> <content><![CDATA[ <?php /** * @version 1.0 * @author elnui * @date */ ]]></content&

VS自定義代碼塊Code Snippet

程序 schema com script left 就會其中存儲 sha 一、簡述　　我們在開發當中，避免不了一些重復的開發工作，在你漫長的開發以及學習當中，你會發現有這麽一部分代碼是你時常會使用到的。我想這個工具也是針對這個原因出來的吧，它就是預先把你需要的這部

在Spring Boot中整合Spring Security並自定義驗證程式碼

最終效果 1、實現頁面訪問許可權限制 2、使用者角色區分，並按照角色區分頁面許可權 3、實現在資料庫中儲存使用者資訊以及角色資訊 4、自定義驗證程式碼效果如下： 1、免驗證頁面 2、登陸頁面在使用者未登入時，訪問任意有

1. nginx添加自定義http模塊(簡單)

訪問 quest cmd return 頭部 true card char* 內存步驟 1. 新建模塊目錄2. 添加模塊配置文件3. 編寫模塊源碼文件4. 在主配置文件中配置訪問location5. 編譯加入模塊文件6. 測試新建模塊目錄 mkdir /opt/

使用highlightjs自定義markdown程式碼高亮

概述 Mou在mac上的 markdown 編輯器，很簡約，可惜Mou好像只支援標準的 markdown 語法，不支援 markdown Extra ,比如[toc]生成目錄和程式碼高亮等，所以才有了本文。 highlight.js是一個github上的程式

獻給初學iOS的小盆友們——微博app專案開發之十二自定義cell程式碼補全

上節課我們主要講解了我們是怎麼一步一步把自定義cell打通的，主要方法就是引入了MVVM檢視模型，這樣我們就可以利用檢視模型就提前把各個子控制元件的frame都計算好了。今天我們就是講如何計運算元控制元件frame，以及補全原創微博和轉發微博的設計。本節內容

【Unity】Unity自定義熱鍵程式碼

其實程式碼特別特別簡單，只是可能沒人來用而已把程式碼隨意新增到一個場景中的物體上就可以 using UnityEngine; using System.Collections; public c

Cordova應用的JavaScript程式碼和自定義外掛程式碼的除錯

我之前寫過三篇Cordova相關的技術文章。當我們使用Cordova將自己開發的前端應用打包安裝到手機上後，可能會遇到需要除錯Cordova應用的時候。本文就介紹Cordova應用的除錯步驟。如果大家讀過之前我寫的文章，就知道Cordova應用在移動平臺

VS code自定義使用者程式碼片段snippet

我的模板： 1. 為什麼要自定義程式碼片段？在使用Dreamweaver、Webstorm等HTML頁面編輯器時，其自帶的自動補全功能（我更樂意稱之為模板）往往可以減少我們寫程式碼時的工作量，但IDE開啟速度慢、佔用記憶體高的缺點不斷蠶食我的耐心。當發

Excel--使用VBA Code 動態建立、修改和刪除自定義窗體程式碼摘抄

Sub CreateUserform()'PURPOSE: Create & Modify a Userform with VBA Code'AUTHOR: John Walkenbach (www.SpreadsheetPage.com)'SOURCE: www.

Kettle變數和自定義java程式碼的例項應用

1 kettle.properties引數配置資料來源連線和FTP連線由於測試環境和生產環境中資料庫連線FTP等配置會在部署過程中變更，所以預先定義成配置項，在配置檔案中修改，這樣測試和釋出將會變得簡單，下面以資料庫為例說明這類配置的使用。（1）首先

phonegap(cordova) 自定義外掛程式碼篇（四）----讀取本地圖片

有時候確實知道本地圖片地址，要獲取到base64 /** * 獲取本地圖片，包含路徑和壓縮後的 base64 */ (function (cordova) { var define = cordova.define; define("cordo

自定義Emmet程式碼塊

簡單介紹

開始

1.找到要修改的檔案

2.新增自己的程式碼片段

3.縮略寫法”abbreviations”

結束，給個現成的

Emmet官網的一些連結

相關推薦