Sublime text3 014 emmet 配置
Sublime text3 014 emmet 配置
------------------------------------------------------------------------------
如果有什么不明白的，加QQ群：186970878
经常会有错字 或 语句不通的，欢迎联系本人，方便快速修正，也方便后来者阅读。
联系本人QQ： 2071551682
------------------------------------------------------------------------------
===============================================
HTML5. 一个不存在的插件，安装了 Emmet 插件就有这具功能了。
使用方法：
新建一个 html 文件 ，输入 ! , html:5 , <html 前面三种代码任意一个， 按Tab 键 ，自动补全。
------------- 默认生成代码 --------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
-------------------- Emmet 插件的相关配置 -----------------------
emmet自定义模板
首先要找到 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>
<body>
<div class="wrap"></div>
</body>
修改后要重启 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 + / 即可
-----------------------------------
------------------------------------------------------------------------------
如果有什么不明白的，加QQ群：186970878
经常会有错字 或 语句不通的，欢迎联系本人，方便快速修正，也方便后来者阅读。
联系本人QQ： 2071551682
------------------------------------------------------------------------------
