前端神器Sublime text全程指南-网页设计师必备

设计师你用过哪些工具开进行网站编码？简单的 Dreamweaver，还是Notepad ++、Webstorm或者其他？

我喜欢sublime的理由很简单，轻便、高效、丰富的订制化插件，让我们写代码的效率飞速提升，而且有良好的结构，不至于几个月后看自己写的代码都忍不来了~ 2333~

  写这篇文章的理由很简单，我经常用到sublime,每次换系统得重新安装插件(后来发现其实不用的)，每次都得找自己搜集的几篇文章，一个一个的看过去效率很不高，就想能不能有自己的备忘录。

----------------------

好了，进入正题……

（一）安装、注册

(1)选择版本

官方版本：http://www.sublimetext.com/3下载3.x版本；

第三方版：挺多的优化版本，我是在zdfans下载的；

(2)注册（第三方的不需要）

菜单-帮助-Enter License

百度就有了，这里发不好~

（二）个人配置

点击 首选项 ---- 设置-用户，复制如下内容到"Preferences.sublime-settings"文件里

{

    // html和xml下突出显示光标所在标签的两端，影响HTML、XML、CSS等

    "match_tags": true,    

    // 是否显示代码折叠按钮

    "fold_buttons": true,

    // 代码提示

    "auto_complete": true,

    // 默认编码格式

    "default_encoding": "UTF-8",

    // 左边边栏文件夹动画

    "tree_animation_enabled": true,

   // 使光标闪动更加柔和,

   "caret_style": "phase",

   // 高亮当前行"

   highlight_line": true,

   // 高亮有修改的标签"

   highlight_modified_tabs": true,

   //显示当前文件的编码

  "show_encoding": true,  

   //------以下是提升代码规范的----

   // 保存时自动去除行末空白

   "trim_trailing_white_space_on_save": true,

   // 保存时自动增加文件末尾换行"

   ensure_newline_at_eof_on_save": true,

    //删除你想要忽略的插件

    "ignored_packages":

    [

        "Vintage",

        "YUI Compressor"

    ]

}

嘿嘿，格式不对不要紧，看我上传的附件就有……

（三）主题

用sublime也蛮久了的，发现还是喜欢默认的主题，无他看着舒服点，长时间盯着看，其他炫酷的主题受不住……

首选项 —— 主题方案 —— Color Scheme -Default ——Monokai，如下图配色效果及步骤，我怕哪天我忘记默认主题是哪个了，哈哈哈

（四）插件

不得不说，没有插件就不会体现sublime写代码的高效之处。

(一)安装方式

插件的安装方法有两个：直接安装和插件管理安装。

　　1 直接安装，将下载的安装包解压缩到Packages目录（菜单->preferences->packages）；

　   2 Package Control组件安装。用Package Control安装插件的方法：

　　　按下Ctrl+Shift+P调出命令面板，输入install， 调出 Install Package 选项并回车(可以直接输入PCIP)，然后在列表中选中要安装的插件。

　　　需要注意的是，有的网络环境可能会不允许访问陌生的网络环境从而设置防火墙，而Sublime Text 貌似无法设置代理，可能就获取不到安装包列表了。

(二)插件列表

（1）Emmet  下载：https://github.com/sergeche/emmet-sublime

       注:有些默认已安装有，若无则需下载。

　　使用仿CSS选择器的语法来快速开发HTML和CSS，Emmet 由两个核心组件组成：一个缩写扩展器(缩写为像CSS一样的选择器)和上下文无关的HTML标签对匹配器。

简单说两个用法：

a.输入这么一行

div.container>div.row>div.col-sm-10+div.col-sm-2

然后行末按一下Tab键，奇幻的一幕出现了，是不是很神奇！高效、而且带了缩进，结构很清晰

b.再输入一行： div.ul.myNav>li.myNav-item*3>a{导航栏}

就可以得到：

为了增强标签的语言性，应该减少DIV的使用，如下：

切入正题 ，使用Emmet遵循遵循一定的缩写规则：

E元素名（div、p）；

E#id带Id的元素（div#content、p#intro、span#error）；

E.class带class的的元素（div.header、p.error）,id和class可以连着写，div#content.column

E>N子元素（div>p、div#footer>p>span）

E*N多项元素（ul#nav>li*5>a）

E+N多项元素

E$*N带序号的元素

更多emmt的用法请参考快捷键手册 http://docs.emmet.io/cheat-sheet/

（二）SublimeTmpl（自定义新建文件）　下载：https://github.com/kairyou/SublimeTmpl

安装方法:Ctrl+Shift+P → Package Control: Install Package (或者PCIP) → SublimeTmpl

默认已经添加了html、css、js等常见类型的面板，按ctrl+alt+h/ctrl+alt+c/ctrl+alt+j可新建这 3钟类型的文件，快捷键在这里\Packages\SublimeTmpl\Default (Windows).sublime-keymap, 模板文件在这里\Packages\SublimeTmpl\templates，可修改。

（三）Bootstrap 3 for sublime 下载https://github.com/JasonMortonNZ/bs3-sublime-plugin

安装方法:Ctrl+Shift+P → Package Control: Install Package (或者PCIP) →b3-snippet