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 + / 便可

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

------------------------------------------------------------------------------
若是有什么不明白的，加QQ群：186970878

常常会有错字或语句不通的，欢迎联系本人，方便快速修正，也方便后来者阅读。

联系本人QQ： 2071551682------------------------------------------------------------------------------