Sublime text3 014 emmet 配置

Posted qy123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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:UsersAdministratorAppDataRoamingSublime Text 3Packages

找到文件夹“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:UsersAdministratorAppDataRoamingSublime Text 3Packages

emmet-sublime-master 如果无效改成 emmet-sublime 进行编辑

重启一下 Sublime Text 。 再改成 emmet 。如果直接改,还没生效就给回收备份 到 Backup 。

找到要编辑的文件
... /Emmet / emmet / snippets.json

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

Backup
这个文件夹经常回收 插件包,自动回收到日期时间文件夹。
位置:
C:UsersAdministratorAppDataRoamingSublime Text 3Backup日期时间

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

------------------------  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": " ",
  "newline": " "
 },
----------------------------
修改 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
------------------------------------------------------------------------------

























以上是关于Sublime text3 014 emmet 配置的主要内容,如果未能解决你的问题,请参考以下文章

sublime text3安装emmet插件

Sublime text3 015 emmet 快捷输入

Sublime Text3开发工具安装emmet插件

在Sublime Text3中安装Emmet插件

sublime text3 emmet 插件 安装方法,,快捷键

sublime text3 emmet 插件 安装方法,快捷键