Sublime Text实现代码自动生成，快速编写HTML/CSS代码 - 爱笔记

安装emmet插件
刚安装的sublime text是不会自动生成html/css代码的，需要安装插件。
同时按ctrl+shift+p键，或到菜单中点击Perferences->package control，输入install，看下图箭头指向提示点击安装Install Package功能。

同时按ctrl+shift+p键，输入emmet，看下图箭头指向提示点击安装emmet插件。

常用自动生成HTML代码实例
使用自动生成插件之前，得让sublime text先知道文件类型，两种方式：
方式一：新建文件后保存为*.html文件
方式二：软件右下角选择语言类型

初始化页面
输入 ! 或 html:5 ，然后按tab键，自动生成html页面框架代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

自动补全标签配对
输入任意成对的标签，如div，按tab键，自动生成一对html标签

<div></div>

自动添加类名和id名
输入div.myclass#div1，按tab键，生成如下代码

<div class="myclass" id="div1"></div>

自动填充文本内容
输入span{hello}和a[href=here]，按tab键，生成如下代码

<span>hello</span>
<a href="here"></a>

自动生成同级标签
标签之间用+号，输入div+span+p，按tab键，生成如下代码

<div></div>
<span></span>
<p></p>

自动生成嵌套标签
标签之间用>号，输入table>tr>td，按tab键，生成如下代码

<table>
    <tr>
    <td></td>
    </tr>
</table>

自动生成提级标签
使用符号，可以上子标签往上提一级，输入div+div>p>span+embq，按tab键，自动生成代码如下

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

输入div+div>p>span+em^^bq，按tab键，自动生成代码如下

<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

自动生成分组标签
输入(div.class1>span)+(div.class2>span)，按tab键，生成如下代码

<div class="class1"><span></span></div>
<div class="class2"><span></span></div>

自动生成多个元素
输入ul>li*6，按tab键，生成如下代码

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

上面这种感觉是最爽的，也是效率最高的。再比如输入table.table>tr>td*5，按tab键，生成如下代码

    <table class="table">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

自动生成带多个属性的元素
输入ul>li.class$*4，按tab键，生成如下代码

    <ul>
        <li class="class1"></li>
        <li class="class2"></li>
        <li class="class3"></li>
        <li class="class4"></li>
    </ul>

自动生成隐式标签
不输入标签名，直接输入.class1，按tab键，会根据父标签判断生成什么，如在body中，生成如下代码

<div class="class1"></div>

如在ul中，生成如下代码

<li class="class"></li>

下面是所有的隐式标签名称：
li：用于ul和ol中
tr：用于table、tbody、thead和tfoot中
td：用于tr中
option：用于select和optgroup中

常用自动生成CSS代码实例
与html文件类似，要想使用css自动生成，新建文件后保存成*.css文件，或在软件右下角选择css代码类型。

自动生成值
在一个样式内，输入h20，按tab键，自动生成代码如下

height: 20px;

输入w50，按tab键，自动生成代码如下

width: 50px;

单位别名列表
p 表示%
e 表示 em
x 表示 ex
如输入w100p，按tab键，自动生成代码如下

width: 100%;

混合输入
输入h10p+m5e，按tab键，自动生成代码如下

    height: 10%;
    margin: 5em;

常用缩写

oh : overflow: hidden;
bg　: background: #000;
bgi : background-image: url();
mg : margin:
mgl5 : margin-left:5px;
pd : padding:
pdr4 : padding-right:4px;

常用插件
Emmet（原名 Zen Coding）——快速编写html/css的方法
ConvertToUTF-8 ——解决乱码问题
Alignment——代码对齐插件
AutoPrefixer ——css3前缀自动添加插件
JS Fromat —— 格式化JS
Minifier——JS压缩插件
Sublime CodeIntel——代码自动提示
SideBarEnhancements——侧边栏插件
Keymaps ——快捷键查找等
CSScomb——CSS属性排序
常用快捷键
Ctrl+L 选择整行（按住-继续选择下行）
Ctrl+K+K 从光标处删除至行尾
Ctrl+Shift+K 删除整行
Ctrl+Shift+D 复制光标所在整行，插入在该行之前
Ctrl+J 合并行（已选择需要合并的多行时）
Ctrl+K+U 改为大写
Ctrl+KL 改为小写
Ctrl+D 选词（按住-继续选择下个相同的字符串）
Ctrl+M 光标移动至括号内开始或结束的位置
Ctrl+Shift+M 选择括号内的内容（按住-继续选择父括号）
Ctrl+/ 注释整行（如已选择内容，同“Ctrl+Shift+/”效果）
Ctrl+Shift+/ 注释已选择内容
Ctrl+Z 撤销
Ctrl+Y 恢复撤销
Ctrl+M 光标跳至对应的括号
Alt+. 闭合当前标签
Ctrl+Shift+A 选择光标位置父标签对儿
Ctrl+Shift+[ 折叠代码
Ctrl+Shift+] 展开代码
Ctrl+KT 折叠属性
Ctrl+K+0 展开所有
Ctrl+U 软撤销
Ctrl+T 词互换
Tab 缩进自动完成
Shift+Tab 去除缩进
Ctrl+Shift+↑ 与上行互换
Ctrl+Shift+↓ 与下行互换
Ctrl+K Backspace 从光标处删除至行首
Ctrl+Enter 光标后插入行
Ctrl+Shift+Enter 光标前插入行
Ctrl+F2 设置书签
F2 下一个书签
Shift+F2 上一个书签

安装Package Control
Package Control是Sublime基础的、必备的包管理，以后所有插件都是通过它来安装的。

打开Sublime，点击菜单 View > Show Console（快捷键 Ctrl+`）打开命令控制台，输入下面的内容：

作为PHP开发者，一般我会安装下面的插件：

ConvertToUTF8：支持Sublime打开 GBK, BIG5, EUC-KR, EUC-JP, Shift_JIS 等编码文件的插件
Bracket Highlighter：用于匹配括号，引号和html标签。对于很长的代码很有用
SideBar Enhancements：这个插件改进了侧边栏，增加了许多侧边栏的右键功能
sublimelinter + sublimelinter-php：PHP代码语法检测，在写的时候就可以知道是否符合PHP语法，及时修改
SublimeCodeIntel：PHP代码自动补全工具，Sublime自带的补全功能无法满足PHP开发要求，加上这个插件效率就极快了
Xdebug Client：调试插件，可以对PHP代码设置断点、单步、步入、步出、步进等调试，以及查看实时变量值
DocBlockr：可以自动生成PHPDoc风格的注释。
Emmet：快速生成HTML代码段的插件，强大到无与伦比，不知道的请自行google
Themr：主题管理，切换主题的时候，不用自己修改配置文件了，用这个可以方便的切换主题
要删除插件，按Ctrl+Shift+P，输入remove package，选择（或输入再选择）要删除的package，回车。

原文
https://blog.csdn.net/daobaqin/article/details/123778090
https://blog.csdn.net/weixin_46561196/article/details/115361272
https://www.jianshu.com/p/543e999ef670
https://blog.csdn.net/jin_jie/article/details/120339352

相关推荐