工欲善利其事必先利其器，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 ——