Sublime text3 014 emmet 配置

時間 2019-11-26

標籤 sublime text3 text emmet 配置欄目 HTML 简体版

原文原文鏈接

Sublime text3 014 emmet 配置
------------------------------------------------------------------------------
若是有什麼不明白的，加QQ羣：186970878css

常常會有錯字或語句不通的，歡迎聯繫本人，方便快速修正，也方便後來者閱讀。html

聯繫本人QQ： 2071551682
------------------------------------------------------------------------------
===============================================html5

HTML5. 一個不存在的插件，安裝了 Emmet 插件就有這具功能了。git

使用方法：github

新建一個 html 文件，輸入 ! , html:5 , <html 前面三種代碼任意一個，按Tab 鍵，自動補全。json

------------- 默認生成代碼 --------------ui

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

</body>
</html>插件

-------------------- Emmet 插件的相關配置 -----------------------htm

emmet自定義模板ip

首先要找到 snippets.json這個文件，

Menu Preferences 》 Broswe Packages
菜單首選項》瀏覽插件目錄

C:\Users\Administrator\AppData\Roaming\Sublime Text 3\Packages

找到文件夾「Emmet」，
在裏面找到「emmet」文件夾，以後將其中的 snippets.json 打開進行編輯

.../ emmet-sublime-master / emmet / snippets.json

-------------------------snippets.json 找不到用下面的方法解決 ---------------------

若是沒有，多是您沒有安裝 emmet 插件，或者您安裝了但目錄裏沒有這個文件夾，這時候您須要手動安裝，

下載地址：
https://github.com/sergeche/emmet-sublime#readme

Clone or download > Download ZIP

https://github.com/sergeche/emmet-sublime.git
https://github.com/sergeche/emmet-sublime

獲得文件： emmet-sublime-master.zip

再把下載的壓縮包解壓到 packages 文件夾下，便可

插件默認路徑：
C:\Users\Administrator\AppData\Roaming\Sublime Text 3\Packages

emmet-sublime-master 若是無效改爲 emmet-sublime 進行編輯

重啓一下 Sublime Text 。再改爲 emmet 。若是直接改，還沒生效就給回收備份到 Backup 。

找到要編輯的文件
... /Emmet / emmet / snippets.json

--------------------------------------------------------------------

Backup
這個文件夾常常回收插件包，自動回收到日期時間文件夾。
位置：
C:\Users\Administrator\AppData\Roaming\Sublime Text 3\Backup\日期時間

--------------------------------------------------------------------

------------------------ html 代碼生成原理 ------------------------

snippets.json 拖拽到 Sublime 當中。

按下 Ctrl+G，行號快速定位

672 行能夠看到 html 開頭的文件，這個就是編輯 html 文件所用到的一些快捷鍵方式；

690 行處，默認的生成標準 html5 文件的快捷字母是感嘆號 ( ! ) 後面還有一個 html:5 ，這個就是咱們若是直接輸出 html:5 字母的話，也能夠直接生成 html5 文件；

835 行，有個html:5，這個就是咱們所要生成的文件的格式，後面跟着[lang=${lang}]，咱們把這個直接去掉，而後保存；[lang=${lang}]

--------------------------------------------------------------------

snippets.json

修改 1 ：

定位行號835，將""html:5": "!!!+doc[lang=${lang}]",

修改成 "html:5": "!!!+doc"

原來生成的代碼 <html lang="en"> 將變成 <html>

注意：

修改後，要保存，重啓。

若是再無效：emmet-sublime-master 改爲 emmet

-------------------------

在此處，我將該行修改成以下內容：（這一行能夠由各位根據狀況去修改）

修改 2 ：UTF-8

"doc": "html>(head>meta[charset=UTF-8]+title{${1:Document}})+body",

若是第5行有 "charset": "UTF-8", 則不用修改：

"variables": {
  "lang": "en",
  "locale": "en-US",
  "charset": "UTF-8",
  "indentation": "\t",
  "newline": "\n"
},
----------------------------
修改 3

-----------------------------

輸入822，經過行號快速定位。

原來的代碼：

"doc": "html>(head>meta[charset=${charset}]+title{${1:Document}})+body",
"doc4": "html>(head>meta[http-equiv=\"Content-Type\" content=\"text/html;charset=${charset}\"]+title{${1:Document}})+body",

以上代碼包涵在 "abbreviations": { .... } 變量塊中。abbreviations 有兩個這樣的變量

-----------------------------
投名狀 ― 杜魚的但願課堂替換 Document

"doc": "html>(head>meta[charset=${charset}]+title{${1:投名狀 ― 杜魚的但願課堂 }})+body",

{${1:投名狀}} $後加的是變量，這裏 1: 這樣就變成字符串了。

上面代碼能夠是這樣：
"doc": "html>(head>meta[charset=${charset}]+title{投名狀 ― 杜魚的但願課堂})+body",

修改後要重啓 Sublime Text

-----------------------------

-------------------------

修改 4
-------------------------
增長 +link[rel=stylesheet]

分兩次完成 +link[rel=stylesheet][href=../css/reset.css]

"doc": "html>(head>meta[charset=${charset}]+title{${1:投名狀 ― 杜魚的但願課堂 }}+link[rel=stylesheet])+body",

"doc": "html>(head>meta[charset=${charset}]+title{${1:投名狀 ― 杜魚的但願課堂 }}+link[rel=stylesheet][href=../css/reset.css])+body",

+ 號輸出的代碼換行

修改後要重啓 Sublime Text

-------------------------
-------------------------
修改 5 尾部加 >.wrap

-------------------------
"doc": "html>(head>meta[charset=${charset}]+title{${1:投名狀 ― 杜魚的但願課堂 }}+link[rel=stylesheet][href=../css/reset.css])+body>.wrap",

會在 body 代碼塊中生成：<div class="wrap"></div>

修改後要重啓 Sublime Text

-------------------------
-------------------------
上面修改後，生成的代碼以下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>投名狀 ― 杜魚的但願課堂</title>
<link rel="stylesheet" href="../css/reset.css">
</head>
<body>
<div class="wrap"></div>
</body>
</html>
-------------------------

=========================
sublime text 插件 Emmet 生成代碼的 lang 默認值修改成 zh-CN
菜單欄依次展開

Menu Preferences -> Package Settings -> Emmet -> Settings-User

{
"snippets": {
"variables": {
"lang": "zh-CN"
}
}

}
-------------------------

簡單用法
-------------------------

1.xhtml 1.0文檔的建立
將新建的文件保存爲.html文件格式
html:xt + tab

-------------------------

2.html5文檔的建立
pc端可使用xhtml 1.0，也可使用html5，html5是向下兼容的
html:5 + tab 或者 ! + tab ，快捷鍵 Ctrl+E 也能夠

-----------------------------------

3.註釋
選中要註釋的內容

Ctrl + / 便可

-----------------------------------