工欲善利其事必先利其器，sublime作为一款轻量、便捷的编译工具，集成了很多插件，功能强大，深受大家的喜爱。掌握好sublime的具体用法，必会为你的工作带来极大的便利！好了，闲话不多说了，下面开始具体的教程吧：
一、安装sublime（这好像是多余的，地球人都知道。。。0.0）
本教程是基于sublimeText3所编写的，若想了解sublime2，本文可作参考，具体请自行百度。
sublime3 下载地址：https://download.sublimetext.com/Sublime%20Text%20Build%203114%20x64%20Setup.exe
安装后需要激活，这步可以直接跳过，sublime不用激活也可以使用，完全不影响他的功能。
注册码（个人使用）
----- BEGIN LICENSE ------ Alexander Single User License EA7E-814345 51F47F09 4EAB1285 7827EFF0 8B1207DC A76A6EA3 E1A1CA7A DC1F2703 14,897,784 8EDC1C82 3F2A58B9 1C0C8B24 67686432 281245B3 6233DE5C ADC5C2F9 61FB8A04 171B63EF 86BA423F 6AC884FD 3273A7AA 5F50A6DB CE7859AE D62D2B37 AEEDD8C2 078A8A20 70EEA791 84F48C1E 8ABA7DEB 0B3907C0 C9A3523B 0091A045 6F67AED8 ------ END LICENSE ------
----- BEGIN LICENSE ----- Andrew Weber Single User License EA7E-855605 813A03DD 5E4AD9E6 6C0EEB94 BC99798F 942194A6 02396E98 E62C9979 4BB979FE 91424C9D A45400BF F6747D88 2FB88078 90F5CC94 1CDC92DC 8457107A F151657B 1D22E383 A997F016 42397640 33F41CFC E1D0AE85 A0BBD039 0E9C8D55 E1B89D5D 5CDB7036 E56DE1C0 EFCC0840 650CD3A6 B98FC99C 8FAC73EE D2B95564 DF450523 ------ END LICENSE ------
二、安装插件
sublime之所以功能强大，是因为它集成了各种各样的插件。
首要安装package control。当然，网上有很多破解的版本，下载下来就可以直接使用。但我不建议使用那种版本的sublime，那会产生各种各样的问题，插件汉化支持度不可能做到完全支持。
装这个插件，我试过从菜单 View - Show Console 或者 ctrl + ~ 快捷键，调出 console窗口，将以下 Python 代码粘贴进去并 enter 执行安装，但由于国内的网络墙的厉害，无法安装成功。
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())
所以现在介绍一下我所试验成功的方法。
(1)、点击Preferences > Browse Packages菜单
(2)、进入打开的目录的上层目录，然后再进入Installed Packages/目录
(3)、下载 Package Control.sublime-package 并复制到Installed Packages/目录
(4)、重启Sublime Text。
有了package control 其他的插件的安装就变得很容易了，下面介绍我所推荐的前端所需的功能插件的安装及使用方法。这些插件我都是通过package control来安装的，其他途径的安装方法我就不作额外的介绍了。
安装方法：Ctrl+shift+P 调出package control的命令窗口，输入Package Control: Install Package (可以直接输入pci),搜索你想要安装的插件【就是这么简单！】。
1、emmet emmet的功能非常的强大，可以快速的生成html代码，补全css。由于其过于强大，我一句两句也介绍不了它的强大之处，具体教程，请百度sublime的emmet使用方法，你绝对会大吃一惊的！
2、SideBarEnhance，这是一个侧边栏增强工具，用它我们可以通过配置快捷键，便捷的实现在浏览器、Photoshop等其他工具中中打开我们的html、图片等文件
下面是其的配置。
1 [ 2 {"id": "side-bar-files-open-with", 3 "children": 4 [ 5 //application 1 6 { 7 "caption": "Photoshop", 8 "id": "side-bar-files-open-with-photoshop", 9 10 "command": "side_bar_files_open_with", 11 "args": { 12 "paths": [], 13 "application": "C:\Program Files (x86)\Adobe Photoshop CS5\Photoshop.exe", // Photoshop的路径 14 "extensions":"psd|png|jpg|jpeg", //any file with these extensions 15 "args":[] 16 }, 17 "open_automatically" : false // will close the view/tab and launch the application 18 }, 19 20 //separator 21 {"caption":"-"}, 22 //application n 23 { 24 "caption": "Chrome", 25 "id": "side-bar-files-open-with-chrome", 26 27 "command": "side_bar_files_open_with", 28 "args": { 29 "paths": [], 30 "application": "",//谷歌浏览器路径 31 "extensions":".*", //any file with extension 32 "args":[] 33 }, 34 "open_automatically" : false // will close the view/tab and launch the application 35 }, 36 37 {"caption":"-"}, 38 //application firefox 39 { 40 "caption": "firefox", 41 "id": "side-bar-files-open-with-firefox", 42 43 "command": "side_bar_files_open_with", 44 "args": { 45 "paths": [], 46 "application": "C:\Program Files (x86)\Mozilla Firefox\firefox.exe",//火狐浏览器路径 47 "extensions":".*" //any file with extension 48 } 49 }, 50 51 {"caption":"-"}, 52 { 53 "caption": "ie", 54 "id": "side-bar-files-open-with-ie", 55 56 "command": "side_bar_files_open_with", 57 "args": { 58 "paths": [], 59 "application": "C:\Program Files (x86)\Internet Explorer\iexplore.exe",//ie浏览器路径 60 "extensions":".*" //any file with extension 61 } 62 } 63 ] 64 } 65 ]
3、AutoFileName 帮你在写代码的过程中快速补全路径
4、color Highlighter 显示css代码中的颜色数值，方便你查找和更改
5、sublimeLinter 代码纠错工具，快速查找出你代码中的错误，这个插件需要安装后续的插件来支持其功能，且需要运行在node.js环境下。需要先全局安装node.js。
具体方法：
(1)、css代码检查 SublimeLinter-csslint,它依赖node.js中的csslint。 node.js中需要全局安装csslint。命令：npm(cnpm) install csslint -g
(2)、js代码检查 SublimeLinter-jshint,它依赖node.js中的jshint。 node.js中需要全局安装jshint。命令：npm(cnpm) install jshint -g
(3)、html代码检查 SublimeLinter-html-tidy
上诉（1）（2）插件需要具体配置才好使用，否则你会痛不欲生的。
配置文件是单独卸载.csslintrc .jshintrc文件中的。在sublime的安装路径下找个地方建两个文件，以.csslintrc 和.jshintrc命名
文件中的键值对具体如下，看个人喜好。
官方介绍：
css:
js :http://www.jshint.com/docs/#options
.csslintrc的数据
1 "adjoining-classes": false, 2 "box-sizing": false, 3 "box-model": false, 4 "compatible-vendor-prefixes": false, 5 "floats": false, 6 "font-sizes": false, 7 "gradients": false, 8 "important": false, 9 "known-properties": false, 10 "outline-none": false, 11 "qualified-headings": false, 12 "regex-selectors": false, 13 "shorthand": false, 14 "text-indent": false, 15 "unique-headings": false, 16 "universal-selector": false, 17 "unqualified-attributes": false
.jshintrc的数据
1 "bitwise": true,//不能使用位运算符& 2 "curly": true,//不能省略循环和条件语句的大括号 3 "forin":true,//for in需要hasOwnProperty检查 4 "latedef":"nofunc",//先定义变量,函数声明除外 5 "undef":true,//变量未定义 6 "unused":"strict",//检查未使用的变量与函数参数，跳过函数 7 "noarg":true,//禁止使用 arguments.caller 和 arguments.callee 8 "maxparams": 4,//最多参数个数 9 "browser":true,//允许与浏览器相关的关键字,如document、history、clearIntreval等 10 "devel":true,//允许与开发相关的关键字,像alert,console等 11 "indent": 2,//缩进2空格 12 "maxerr":50,//超过50个错误,jslint停止工作 13 "newcap":true,//允许构造器函数首字母非大写 14 "nomen": true,//不允许在两边(最前或最后)悬挂下划线符号(_) 15 "plusplus": false,//允许++和-- 16 "eqeqeq": true,//使用===做判断 17 "maxlen": 120,//行最大长度 18 "strict":true,//函数级别必须有"use strict"指令 19 //"maxstatements": 5,//限制函数内声明语句的个数 20 "node": true,//node环境 21 "jquery":true//jquery环境
sublimeLinter的配置 这是我的配置，大家参考就可以了，不需要完全一样
特别注意：要使上述的.csslintrc和.jshintrc文件生效，特别留意csslint和jshint中的配置
1 { 2 "user": { 3 "debug": false, 4 "delay": 0.25, 5 "error_color": "D02000", 6 "gutter_theme": "Packages/SublimeLinter/gutter-themes/Hands/Hands.gutter-theme", 7 "gutter_theme_excludes": [], 8 "lint_mode": "background", 9 "linters": { 10 "au3check": { 11 "@disable": false, 12 "args": [], 13 "excludes": [] 14 }, 15 "csslint": { 16 "@disable": false, 17 "args": [ 18 "--config", 19 "C:\Users\Administrator.PC-20160625PNPP\AppData\Roaming\Sublime Text 3\Packages\User\.csslintrc" 20 ], 21 "errors": "", 22 "excludes": [], 23 "ignore": "", 24 "warnings": "" 25 }, 26 "htmltidy": { 27 "@disable": false, 28 "args": [], 29 "excludes": [] 30 }, 31 "jshint": { 32 "@disable": false, 33 "args": [ 34 "--config", 35 "C:\Users\Administrator.PC-20160625PNPP\AppData\Roaming\Sublime Text 3\Packages\User\.jshintrc" 36 ], 37 "excludes": [] 38 }, 39 "json": { 40 "@disable": false, 41 "args": [], 42 "excludes": [], 43 "strict": true 44 }, 45 "php": { 46 "@disable": false, 47 "args": [], 48 "excludes": [] 49 } 50 }, 51 "mark_style": "outline", 52 "no_column_highlights_line": false, 53 "passive_warnings": true, 54 "paths": { 55 "linux": [], 56 "osx": [], 57 "windows": [] 58 }, 59 "python_paths": { 60 "linux": [], 61 "osx": [], 62 "windows": [] 63 }, 64 "rc_search_limit": 3, 65 "shell_timeout": 10, 66 "show_errors_on_save": true, 67 "show_marks_in_minimap": true, 68 "syntax_map": { 69 "html (django)": "html", 70 "html (rails)": "html", 71 "html 5": "html", 72 "javascript (babel)": "javascript", 73 "magicpython": "python", 74 "php": "html", 75 "python django": "python", 76 "pythonimproved": "python" 77 }, 78 "warning_color": "DDB700", 79 "wrap_find": true 80 } 81 }
注册码补充
—– BEGIN LICENSE —– Michael Barnes Single User License EA7E-821385 8A353C41 872A0D5C DF9B2950 AFF6F667 C458EA6D 8EA3C286 98D1D650 131A97AB AA919AEC EF20E143 B361B1E7 4C8B7F04 B085E65E 2F5F5360 8489D422 FB8FC1AA 93F6323C FD7F7544 3F39C318 D95E6480 FCCC7561 8A4A1741 68FA4223 ADCEDE07 200C25BE DBBC4855 C4CFB774 C5EC138C 0FEC1CEF D9DCECEC D3A5DAD1 01316C36 —— END LICENSE —— —– BEGIN LICENSE —– Alexey Plutalov Single User License EA7E-860776 3DC19CC1 134CDF23 504DC871 2DE5CE55 585DC8A6 253BB0D9 637C87A2 D8D0BA85 AAE574AD BA7D6DA9 2B9773F2 324C5DEF 17830A4E FBCF9D1D 182406E9 F883EA87 E585BBA1 2538C270 E2E857C2 194283CA 7234FF9E D0392F93 1D16E021 F1914917 63909E12 203C0169 3F08FFC8 86D06EA8 73DDAEF0 AC559F30 A6A67947 B60104C6 —— END LICENSE —— —– BEGIN LICENSE —– Andrew Weber Single User License EA7E-855605 813A03DD 5E4AD9E6 6C0EEB94 BC99798F 942194A6 02396E98 E62C9979 4BB979FE 91424C9D A45400BF F6747D88 2FB88078 90F5CC94 1CDC92DC 8457107A F151657B 1D22E383 A997F016 42397640 33F41CFC E1D0AE85 A0BBD039 0E9C8D55 E1B89D5D 5CDB7036 E56DE1C0 EFCC0840 650CD3A6 B98FC99C 8FAC73EE D2B95564 DF450523 —— END LICENSE —— —– BEGIN LICENSE —– K-20 Single User License EA7E-940129 3A099EC1 C0B5C7C5 33EBF0CF BE82FE3B EAC2164A 4F8EC954 4E87F1E5 7E4E85D6 C5605DE6 DAB003B4 D60CA4D0 77CB1533 3C47F579 FB3E8476 EB3AA9A7 68C43CD9 8C60B563 80FE367D 8CAD14B3 54FB7A9F 4123FFC4 D63312BA 141AF702 F6BBA254 B094B9C0 FAA4B04C 06CC9AFC FD412671 82E3AEE0 0F0FAAA7 8FA773C9 383A9E18 —— END LICENSE —— —– BEGIN LICENSE —– J2TeaM 2 User License EA7E-940282 45CB0D8F 09100037 7D1056EB A1DDC1A2 39C102C5 DF8D0BF0 FC3B1A94 4F2892B4 0AEE61BA 65758D3B 2EED551F A3E3478C C1C0E04E CA4E4541 1FC1A2C1 3F5FB6DB CFDA1551 51B05B5D 2D3C8CFE FA8B4285 051750E3 22D1422A 7AE3A8A1 3B4188AC 346372DA 37AA8ABA 6EB30E41 781BC81F B5CA66E3 A09DBD3A 3FE85BBD 69893DBD —— END LICENSE ——