对于前端开发者来说,Sublime Text是一款非常轻便的代码编辑器,启动速度快,占用内存少,开发者可以根据需要,通过Package Control安装需要的插件,熟练掌握开发过程中用的编辑器或者IDE,特别是快捷键,对高效完成编程任务是很有帮助的。

自动编译

打开:Tools>Build System>New Build System
设置如下:

{
	"cmd":["C:/Program Files (x86)/Google/Chrome/Application/chrome.exe","$file"],
	"selector":["text.html"]
}

在HTML页面中,按F7||ctrl+B,在Chrome中查看页面。

安装Package Control:

自动安装:
1、通过快捷键ctrl+’或者 View > Show Console 菜单打开控制台
2、粘贴对应版本的代码后回车安装
适用于 Sublime Text 3:

import  urllib.request,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler()));open(os.path.join(ipp,pf),'wb').write(urllib.request.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

更多关于Package Control的使用,可参考:Package Control

Emmet插件

Emmet是一款很好的代码补全插件。非常的强大和智能,最大程度上减轻了编程的工作量。

// Emmet的缩写格式
#page>div.logo+ul#navigation>li*5>a{Item $}
// 可自动转换成如下的html语言
<div id="page">
 <div class="logo"></div>
 <ul id="navigation">
 <li><a href="">Item 1</a></li>
 <li><a href="">Item 2</a></li>
 <li><a href="">Item 3</a></li>
 <li><a href="">Item 4</a></li>
 <li><a href="">Item 5</a></li>
 </ul>
</div>