Sublime Text插件安装与配置方法

HTML5学堂：本文当中，主要针对Sublime的汉化方法、相关插件-Emmet的安装以及基本配置方法进行介绍。最后则针对初学者，提到了如何对待这些工具类的插件。

刘国利：正好今天HTML5-7班的讲师讲到Sublime的插件-Emmet，想来貌似自己之前从来没写过插件的使用和安装方法，于是，写一下喽~~~想吐槽的就是，给我那么短的时间内写完这篇文章；还想吐槽的是，孩纸们啊，你们一直用英文的Sublime，舒服么~~~为啥不下载一个中文汉化包啊？很简单的三步操作就能汉化的说……唉，做一个勤于思考的人吧~~~

Sublime Text2 软件汉化

三个基本步骤

1、点击此处下载Sublime汉化包

2、解压，将default中的8个文件取出

3、打开Sublime，找到菜单中的“Preferences”——>“Browse Packages”（含义为浏览程序包）。打开文件夹之后，找到default文件夹，然后将刚才取出的8个文件替换掉原来的文件即可。

下载Emmet插件

个人很喜欢emmet插件（该插件原来的名字是Zen Coding）

Emmet插件下载地址

点击此处进入链接：http://emmet.io/download/

进入页面之后，点击下图download，下载压缩包，之后将压缩包解压。

文件加载完毕之后，调整文件位置

依旧是“Preferences”——>“Browse Packages”（汉化后则是“偏好”——>“浏览程序包”），然后把解压后的文件夹“emmet-sublime-master”放置于其中即可。

重启Sublime编辑器，稍等片刻之后即可使用。

检测是否安装成功

首先新建一个文件，存储为.html为后缀的网页文件，之后在编辑器中输入英文叹号（!），之后按下Tab键，如果能够生成出基本的html文件结构（包含doctype、head和body），则说明安装成功

关于Emmet插件的相关配置

依旧是“Preferences”——>“Browse Packages”（汉化后则是“偏好”——>“浏览程序包”），找到文件夹“emmet-sublime-master”，再在里面找到“emmet”文件夹，之后将其中的snippets.json，拖拽到Sublime当中。

按下Ctrl+G，输入822，通过行号快速定位。

在此处，我将该行修改为如下内容：（这一行可以由各位根据情况去修改）

1. "doc": "html>(head>meta[charset=UTF-8]+title{HTML5学堂 - H5course}+link[rel=stylesheet][href=../css/reset.css]+link[rel=stylesheet][href=../css/index.css])+body>.wrap",

定位行号835，将"html:5": "!!!+doc[lang]"修改为"html:5": "!!!+doc"

最后，重启Sublime。

此时，当我们再新建一个文件，存储为.html为后缀的网页文件，之后在编辑器中输入英文叹号（!），之后按下Tab键，就会呈现如下效果：

为何刚开始不建议使用插件

记得自己在使用插件之前，应该是用手敲了3年左右吧，后来教学生时也是特意注意了这个问题。作为一个编写代码的工程师，必须要了解基本的代码书写规范，并能够在书写过程中记忆清晰。另外一些单词也是必须要记下来的。因此在课程的操作当中，通常是在大家学习1个月左右的时间，再让大家逐渐的使用插件，提升代码速度。换句话说，代码质量和代码速度其实都是开发者应当追求的东西，希望各位使用插件的时候不要忘记基本的语法和规范，同时能够让插件充分发挥它的作用，将自己的代码速度提升一个档次~

欢迎沟通交流~HTML5学堂