Sublime Text 是一款全平台的代码编辑工具，界面简洁，搭配合适的插件能使你的效率更上一层楼。

下载安装

从官网下载对应系统的安装文件并安装。

设置中文界面

使用快捷键 Shift+Ctrl+P 调出查找框，输入：

Package Control: Install Package

在弹出的插件列表中输入：

ChineseLocalizations

选中回车安装，重启「Sublime Text」，依次点击顶部菜单栏 Help-Language-简体中文即可。

安装插件

步骤与上文设置中文界面类似，在弹出的插件列表中输入插件名称：

emmet

插件推荐

Sublime 常用快捷操作

选择类

编辑类

显示类

Emmet 插件常用快捷键

! html:5

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

</body>
</html>

p#info p.info a[href='#']

<p id="info"></p>
<p class="info"></p>
<a href="#"></a>

div#warp>ul>li*10

<div id="warp">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

div#warp>p.one+span.two

<div id="warp">
        <p class="one"></p>
        <span class="two"></span>
</div>

p.class>span^div.info ul>li*10^ol>li*6

<p class="class"><span></span></p>
<div class="info"></div>

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

(div.foo>h1>p)+(div.bar>h3>p)

<div class="foo">
    <h1>
        <p></p>
    </h1>
</div>
<div class="bar">
    <h3>
        <p></p>
    </h3>
</div>

ul>li*3

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

ul>li.item$*3

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

@f

@font-face {
  font-family:;
  src:url();
}

lg(left, #fff 50%, #000)

background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -moz-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(left, #fff 50%, #000);

h$[title=item$]{Header $}*3

<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>

ul>li.item$$${item $}*5

<ul>
    <li class="item001">item 1</li>
    <li class="item002">item 2</li>
    <li class="item003">item 3</li>
    <li class="item004">item 4</li>
    <li class="item005">item 5</li>
</ul>

ul>li.item$@-*5

<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
 </ul>  

ul>li.item$@3*5

 <ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

ul>li.item$@-3*5

 <ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>