代碼編輯器Sublime_Text3的使用

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_Text3DataPackagesColor 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，保存路徑爲DataPackagesUser文件夾下。

新建 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[] 中編輯代碼片段。

&dollar; 符號表示的是代碼補全後光標出現的位置和順序，比如 &dollar;{1:this}：意爲光標在此第一次出現，默認值爲 this，且該默認值被選中，如果有多個&dollar;1，則光標同時出現在此處，而默認值只按照第一個設置的值出現。

下面定義了 &dollar;{2:snippet}，所以當修改了 &dollar;1 後，按 tab，則直接跳轉到 &dollar;2 的位置，另外，如果需要顯示 &dollar; 符號，則需要在符號前面加 ‘’ 轉義。

去掉<tabTrigger></tabTrigger> 的註釋，在標籤中間添加“觸發前綴”。

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"]
    }
}