如何快速开发符合规范的web页

做为前端开发神器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、[b]快速生成模板[b]文件（安装SublimeTmpl [b]插件[/b][/b]）：[/b]

SublimeTmpl能新建html、css、javascript、php、python、ruby六种类型的文件模板。

快捷键如下：

2、[b][b]快速编辑[b][b]html/CSS[/b][/b][/b]（安装[b]Emmet插件，[/b]原名Zen Coding）：[/b]

例如：输入ul#list>li*4>img ，按Tab键即可快速生成下面一段代码：

例如：输入link，按Tab键即可生成<link rel="stylesheet" href="">。

使用Emmet编写代码时，需要遵循一定的缩写规则：

三、代码的标准化

1、[b]编码格式标准化[b]（[b][b]安装[b]HTML/CSS/JS Prettify插件[/b][/b][/b][/b]）：[/b]

安装后，按Command + Shit + H（Win: Ctrl + Shit + H）键，即可全面优化html、CSS、JS的格式。

2、编码[b]逻辑标准化[b]（安装JSHint[b]插件[/b][/b]）：[/b]

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的配置文件中合并如下内容达到这个目的。