Sublime Text3 是我比較喜歡的一款程式碼編輯器，它輕量、簡潔、高效、跨平臺，豐富的外掛為開發提供了許多的便利。
它在支援語法高亮、程式碼補全、程式碼片段（Snippet）、程式碼摺疊、行號顯示、自定義皮膚、配色方案等所有其它程式碼編輯器所擁有的功能的同時，又保證了其飛快的速度！還有著自身獨特的功能，比如程式碼地圖、多種介面佈局以及全屏免打擾模式等。
下圖是我已經配置好的 Sublime Text3 介面，包含本篇文章所列出的一些外掛的安裝與配置。
關注微信公眾號“Web前端開發小K”，回覆“sublime”，獲取下載地址與提取碼。
下載成功後解壓檔案，執行資料夾下的 sublime_text.exe 檔案，即可使用 Sublime Text3。（注意：有些外掛依賴於 Node.js，如果你的電腦沒有安裝 Node.js，部分外掛可能無法使用，請先去Node.js 官網下載並安裝 Node.js）。
下面我來介紹一下它的基本使用和一些常用外掛的安裝與配置。
首先去 Sublime Text 官網 下載應用並安裝。
一、基本操作
1. 常用快捷鍵
- 分屏：Shift + Alt + 數字
- 查詢：Ctrl + F
- 替換：Ctrl + H
- 定位到某行：Ctrl + G
2. 修改外掛安裝位置
外掛預設安裝的位置是 C 盤的 AppData 的目錄，例如在我的電腦上：
C:\Users\LIU\AppData\Roaming\Sublime Text 3\Packages
複製程式碼修改位置：關閉 Sublime，找到想要安裝外掛的位置，新建一個 Data 的資料夾，把C盤目錄下的 Packages 資料夾刪除掉，再重新開啟sublime → References → Browser Packages， 就發現開啟的資料夾就是新建的 Data 檔案下的 Packages 了，之後通過 package control 安裝外掛都會存在這個路徑下。
之後如果將 Sublime Text 程式目錄移動到其他電腦上，外掛也會帶著。
3. 設定副檔名預設語法
如果遇到 sublime 開啟的檔案與該檔案實際的語法不符合，比如 .css 檔案被解析成了 .less 檔案（sublime 右下角有當前檔案的語法格式），可以通過以下方式設定：
View → Syntax → Open all with current extension as...
4. 常用快捷鍵設定
Preferences → Key Bindings。
以下是我自己的一些設定（有些配置需要安裝對應外掛），可根據需求自行配置：
[
{"keys": ["ctrl+enter"],"command": "open_in_browser"}, //在瀏覽器中開啟
{"keys": ["ctrl+o"],"command": "prompt_open_file"}, //開啟所在資料夾
{"keys": ["ctrl+alt+h"],"command": "htmlprettify"}, //html 格式化
{"keys": ["ctrl+alt+j"],"command": "js_format"}, // js 格式化
{"keys": ["ctrl+alt+c"],"command": "css_comb"}, // css 整理
{"keys": ["ctrl+alt+shift+c"],"command": "css_format","args": {"action": "compact"}}, // css格式化
{"keys": ["shift+ctrl+enter"], "command":"run_macro_file", "args":{"file":"Packages/User/comma.sublime-macro"} },
{"keys": ["ctrl+alt+shift+j"], "command": "quote_html"}, // html 轉 js
]
複製程式碼5. 主題配色
可以去主題編輯網站 自己搭配主題顏色。
編輯好後下載 .tmTheme 檔案，放到 Sublime_Text3\Data\Packages\Color Scheme - Default 資料夾下。
開啟 sublime，Preferences → Color Scheme，設定對應配色檔案。
6. 關閉更新提示
開啟 References → Settings，新增：
"update_check":false
複製程式碼7. 常用引數設定
Preferences → Settings。
以下是我自己的一些設定，可根據需求自行配置：
{
"always_show_minimap_viewport": true,
"bold_folder_labels": true,
"caret_style": "phase",
"color_scheme": "Packages/Color Scheme - Default/liuzhenghe_color_scheme.tmTheme",
"fade_fold_buttons": false,
"font_face": "Consolas",
"font_size": 8,
"ha_style": "filled",
"highlight_line": true,
"highlight_modified_tabs": true,
"icons": true,
"ignored_packages":
[
"Vintage"
],
"line_padding_bottom": 3,
"line_padding_top": 3,
"open_files_in_new_window": true,
"original_color_scheme": "Packages/User/Color Highlighter/themes/liuzhenghe_color_scheme.tmTheme",
"overlay_scroll_bars": "enabled",
"rulers":
[
],
"save_on_focus_lost": true,
"scroll_past_end": true,
"show_definitions": false,
"show_encoding": true,
"show_full_path": false,
"spell_check": false,
"tab_size": 4,
"theme": "Boxy Solarized Dark.sublime-theme",
"translate_tabs_to_spaces": true,
"trim_trailing_white_space_on_save": false,
"word_wrap": true,
"update_check":false
}
複製程式碼8. 在sublime text3 裡面直接執行 js 指令碼，除錯控制檯（需要安裝 Node.js）
Tools → Build System → New Build System...
新增程式碼：
{
"cmd": ["node", "$file"],
"selector": "source.js"
}
複製程式碼儲存，儲存名為 Node.sublime-build，儲存路徑為Data\Packages\User資料夾下。
新建 js 檔案，直接 ctrl+b，就可以在控制檯輸出結果。
9. 自定義程式碼片段
Tools → Developer → New Snippet。
出現以下程式碼：
<snippet>
<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<!-- <tabTrigger>hello</tabTrigger> -->
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
複製程式碼在 CDATA[] 中編輯程式碼片段。
$ 符號表示的是程式碼補全後游標出現的位置和順序，比如 ${1:this}：意為游標在此第一次出現，預設值為 this，且該預設值被選中，如果有多個$1，則游標同時出現在此處，而預設值只按照第一個設定的值出現。
下面定義了 ${2:snippet}，所以當修改了 $1 後，按 tab，則直接跳轉到 $2 的位置，另外，如果需要顯示 $ 符號，則需要在符號前面加 ‘\’ 轉義。
去掉 的註釋，在標籤中間新增“觸發字首”。
Ctrl + s 儲存，為了方便程式碼片段的管理，最好在當前目錄下新建一個 Snippets 資料夾，將檔案儲存到該目錄下。
tab +“觸發字首”，程式碼段自動補全，例：
<snippet>
<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>hello</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
複製程式碼二、Sublime 外掛推薦
package control 使用方法：
下面外掛推薦中有些外掛通過 package control 可能安裝不了，您可以點選下載我已經配置好的 Sublime Text3 程式目錄，提取碼：uswl ，直接複製外掛出來到對應目錄中去。
也可以去 packagecontrol 官網地址 查詢下載。
部分外掛安裝後無法使用，可能原因：沒有安裝NodeJS。
安裝 package control 元件，Ctrl + `，調出 console，貼上以下程式碼並回車：
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())
複製程式碼重啟sublime。
Ctrl + Shift + P 調出命令皮膚,查詢並選擇外掛進行安裝。
1. emmet
快速生成 html 基本結構。
- 安裝 emment 外掛。
- Ctrl + N 新建一個檔案。
- 右下角有一個 plain text 標誌，選擇檔案型別為 HTML。
- Ctrl + S 儲存檔案。
- 輸入 “!” + tab。
2. terminal
快速在當前資料夾下開啟 cmd 視窗。
快捷鍵： ctrl + shift + t。
3. html5
生成 html5 的頁面結構。
html5 + tab。
4. AdvancedNewFile
快速新建檔案。
5. JSFormat
Javascript 的程式碼格式化外掛。
用法：選中 js 程式碼，ctrl + alt + f （可自定義快捷鍵）。
6. HTML-CSS-JS Prettify
程式碼格式化。
方法：選中程式碼，右鍵，Prettify Code。
7. Minifi
該外掛基於Google Closure compiler，自動壓縮js檔案。
8. jQuery
jQuery程式碼提示。
9. DocBlockr
生成優美註釋。
用法：
輸入 /*、/** + 回車
複製程式碼10. AutoFileName
快捷輸入檔名。
11. FileDiffs
強大的比較程式碼不同工具。
右鍵標籤頁，出現 FileDiffs Menu 或者 Diff with Tab… 選擇對應檔案比較即可。
12. SideBarEnhancements
側欄右鍵功能增強。
13. Autoprefixer
自動補全 css3 屬性字首。
屬性名 + tab：
14. SFTP
直接編輯 FTP 或 SFTP 伺服器上的檔案。
15. Markdown Preview
預覽 Markdown 檔案。
編輯好 Markdown 檔案後，ctrl + b ，生成 html 檔案。
16. cssrem
px 轉換為 rem。
Preferences → Package Settings → cssrem → Settings-Default。
會出現下面程式碼：
{
"px_to_rem": 40,
"max_rem_fraction_length": 6,
"available_file_types": [".css", ".less", ".sass"]
}
複製程式碼-
"px_to_rem": 40, // px 轉 rem 的單位比例，預設為40。
-
"max_rem_fraction_length": 6, // px 轉 rem 的小數部分的最大長度，預設為6。
-
"available_file_types": [".css", ".less", ".sass"] // 啟用此外掛的檔案型別，預設為 [".css", ".less", ".sass"]。
-
一般只需要修改單位比例，單位比例 = 設計稿實際寬 / 10。
17. sublime serve
在本地伺服器開啟 html 檔案。
Tools –> SublimeServer –> Start SublimeServer。
右鍵 –> View in SublimeServer。
18. AllAutocomplete
可以搜尋全部開啟的標籤頁。
19. ColorHighlighter
.css 檔案顯示顏色值的實際顏色。
20. PlainTasks
待辦事項表。
- 新建 .todo 檔案。
- 在標題後加冒號，新建專案。
- ctrl + i 新建待辦事項。
使用手冊：
Preferences → Package Settings → PlainTasks → Tutorial。
21. TrailingSpaces
去除程式碼末尾的空格鍵。
修改空格高亮色/儲存時自動刪除空格：
Preferences → Package Settings → Trailing Spaces → Settings - User ，新增：
{
"trailing_spaces_highlight_color" : "#fff",
"trailing_spaces_trim_on_save": true,
}
複製程式碼22. CSScomb
css 整理。
功能很強大，能夠整理 css 規則的順序，比如把寬高、顏色、邊距規則用空行分隔開，方便修改還能防止樣式重複。
選中 css 程式碼，右鍵 Run CSScomb（也可自行配置快捷鍵）。
23. CSS Format
css 程式碼格式化。
選中 css 程式碼，右鍵 CSS Formate –> Compact （也可自行配置快捷鍵）。
24. SublimeLinter
錯誤提示外掛。
25 CSSLint
能檢查CSS錯誤，提示重複等。
26. Pretty JSON
格式化 json。
自定義快捷鍵：開啟 Preference –> Key Bindings-User，新增格式化程式碼快捷鍵為 ctrl + alt + j。
{"keys": ["ctrl+alt+j"],"command": "pretty_json"}
複製程式碼27. IMESupport
中文輸入法跟隨游標。
28. Alignment
js 等號對齊。
自定義快捷鍵：開啟 Preference –> Key Bindings-User，新增格式化程式碼快捷鍵為 ctrl + alt + t。
{"keys": ["ctrl+alt+t"], "command": "alignment"}
複製程式碼29. QuoteHTML
把 HTML 拼接成 js 插入字串。
自定義快捷鍵：開啟 Preference –> Key Bindings-User，新增格式化程式碼快捷鍵為 ctrl + alt + h。
{"keys": ["ctrl+alt+t"], "command": "quote_html"}
複製程式碼30. Markdown Editing
markdown 編輯外掛。
31. OmniMarkupPreviewer
markdown 實時預覽。
配置：Sublime Text > Preferences > Package Settings > OmniMarkupPreviewer > Settings - User。
快捷鍵：ctrl + alt + o，會自啟一個本地伺服器。
{
"renderer_options-MarkdownRenderer": {
"extensions": ["tables", "fenced_code", "codehilite"]
}
}
複製程式碼32. Table Editor
markdown 自動完成表格並格式化，快捷鍵：tab。
33. ConvertToUTF8
解決 GBK 編碼下的中文亂碼問題。