做为前端开发神器Sublime Text(ST),不仅界面优雅清爽,还配备了很多非常有用的插件,可以帮助我们快速开发各种web页,并可使之标准化。
一、ST插件安装/管理
1、安装Package Control插件包管理:
安装插件之前,需先安装Package Control插件包管理组件
a.) 按 Ctrl + ` 调出console;
b.) 粘贴以下代码到底部命令行并回车:
如果是Sublime Text3,代码如下:
c.) 序列号:
2、插件安装方法:
a.) 按下Command + Shift + P(Win: Ctrl + Shift + P)调出命令面板;
b.) 输入install 调出 Install Package 选项并回车,然后输入插件名关键字,在下拉列表中选中要安装的插件。
3、插件卸载/查看已安装插件:
a.) 按下Command + Shift + P(Win: Ctrl + Shift + P)调出命令面板;
b.) 输入remove 调出 Remove Package 选项并回车,然后在列表中选择/查看插件。
二、快速开发HTML
1、快速生成模板文件(安装SublimeTmpl 插件):
SublimeTmpl能新建html、css、javascript、php、python、ruby六种类型的文件模板。
快捷键如下:
2、快速编辑html/CSS(安装Emmet插件,原名Zen Coding):
例如:输入ul#list>li*4>img ,按Tab键即可快速生成下面一段代码:
例如:输入link,按Tab键即可生成<link rel="stylesheet" href="">。
使用Emmet编写代码时,需要遵循一定的缩写规则:
三、代码的标准化
1、编码格式标准化(安装HTML/CSS/JS Prettify插件):
安装后,按Command + Shit + H(Win: Ctrl + Shit + H)键,即可全面优化html、CSS、JS的格式。
2、编码逻辑标准化(安装JSHint插件):
JSHint 是一个 JavaScript 的代码质量检查工具,主要用来检查代码质量以及找出一些潜在的代码缺陷。
a.) sublime text2可直接安装此插件,然后按Command + B
(Win: Crl + B)
来检查 JS 代码。
b.) sublime text3上安装稍复杂点,可见后面附文安装方法,也可直接在线检查:http://www.jshint.com
附:JSHint在ST3上的安装方法
一、安装JSHint及编辑器插件
1. 首选确认安装了Node.js。然后使用如下命令将JSHint安装为Node程序。SublimeLinter依赖的JSHint版本为2.5.0或更新。
JSHint安装成功后可以在终端通过命令行进行验证。
2. 安装SublimeLinter和SublimeLinter-jshint插件
使用Package Control安装SublimeLinter和SublimeLinter-jshint插件,安装步骤详见如何快速开发符合规范的web页,“ST插件安装”一节。安装完成后重启Sublime Text3。
二、使用和配置SublimeLinter
重启编辑器后应该就能看到JSHint的提示了。如果SublimeLinter声称linter可执行文件无法找到,请确保JSHint正确安装,且其路径已经被加到PATH环境变量(OS X在终端启动文件中配置,Windows则添加路径至path系统环境变量)。
上图是JSHint提示一个警告的例子,警告以黄色点在行号左侧标出,相关的变量被高亮提示,点击提示框会在状态栏显示具体信息。光标不在任何提示框时状态栏显示发现的错误和警告数量。SublimeLinter提供了右键菜单(和快捷键)在各错误间跳转,或者列出所有发现的错误。
SublimeLinter有几种监控模式(右键 > SublimeLinter > Lint Mode),分别是Background(实时监测),Load / Save,Save Only和Manual。错误/警告的提示样式也可以更改(右键 > SublimeLinter > Mark Style 和 Choose Gutter Theme)。更多的设置请参考SublimeLinter的配置文件(Sublime Text菜单项 > Perferences > Package Settings > SublimeLinter > Settings User)。
三、配置JSHint
JSHint通过.jshintrc文件配置验证规则,该文件应放置在验证目标文件的某个祖先目录中(常用做法是放置在用户HOME目录)。如果文件不存在请手工创建。一个示例.jshintrc内容如下。
SublimeLinter同时支持指定.jshintrc位置,覆盖“沿着父文件夹查找”的规则。通过在SublimeLinter的配置文件中合并如下内容达到这个目的。