Sublime Text 3 全程詳細圖文原創教程

阿新 • • 發佈：2020-11-02

一、前言

使用Sublime Text 也有幾個年頭了，版本也從2升級到3了，但猶如寒天飲冰水，冷暖儘自知。最初也是不知道從何下手，滿世界地查詢資料，但能查閱到的資料，苦於它們的零碎、片面，不夠系統和全面，所以一路走來，耗費了本人大量的時間和精力。所以蒙生了寫這篇《Sublime Text 3 全程詳細指南》，一來對自己的經驗是一個總結，二來可以給初學者做個系統、全面的指引，讓他們少走我當時走過的彎路，從而能快速地掌握Sublime Text這個優秀的編輯器。

目前我正在使用的版本是Sublime Text 3 Build 3083的beta版本，已經相當穩定。所以本文所有講解均以此版本為準，並以windows 7 x64平臺為示例。至於其它的版本也不會有太大的差異。

二、Sublime Text特點

1、Sublime Text 是一款跨平臺程式碼編輯器，在Linux、OS X和Windows下均可使用。

2、Sublime Text 是可擴充套件的，幷包含大量實用外掛，我們可以通過安裝自己領域的外掛來成倍提高工作效率。

3、Sublime Text 分別是命令列環境和圖形介面環境下的最佳選擇，同時使用兩者會大大提高工作效率。

4、Sublime Text 為收費軟體，建議有能力的人付費使用，以支援開發者。不過不購買也可以一直使用。

三、下載與安裝

1、下載：目前官方的正式版本為v2.0.2，我們開啟官網下載連結http://www.sublimetext.com/3

，下載Sublime Text 3 Build 3083。

其中“Windows 64 bit”下載下來為“Sublime Text Build 3083 x64 Setup.exe”的安裝程式；“portable version”下載下來為“Sublime Text Build 3083 x64.zip”編輯器的包，解壓後無需安裝就能執行。

如果你的電腦平臺是windows x86,也就是32位的系統，請點選“Windows”下載32位的安裝程式，如果不想安裝，就點選其後的“portable version”下載它的32位編輯器包。

2、安裝：雙擊上一步下載下來的“Sublime Text Build 3083 x64 Setup.exe”，記得選擇“Add to explorer context menu”，把它加入右鍵快捷選單。其它以預設設定安裝。

3、安裝完畢，雙擊桌面“Sublime Text 3”快捷圖示，開啟程式，就可以見到“Sublime Tex的廬山真面目了。

4、如果你不是把“Sublime Text 3”安裝在預設路徑，比如你把它安裝在D盤，請你新增環境變數。

四、設定字型及字型大小

點選單“Preferences--->Setting - User”，開啟“Preferences.sublime-settings”。

如下圖新增所需程式碼，根據自己的喜好進行設定。設定字型用"font_face":"字型名稱"，設定字型大小用"font_size":"字型大小"，注意它們之間需要用逗號隔開。

五、安裝外掛

學習Sublime Text擴充套件外掛的安裝前，讓我們來先了解一下它的外掛官方網站：https://packagecontrol.io/。

當我們在搜尋框中輸入外掛的關鍵字，相關的外掛就會在下面實時顯示出來，我們就可以選擇自己想要的外掛進行了解。

1、安裝Package Control

Package Control為外掛管理包，所以我們首先要安裝它。有了它，我們就可以很方便的瀏覽、安裝和解除安裝Sublime Text中的外掛。

開啟Package Control的網頁https://packagecontrol.io/，點選右側的“Install Now”按鈕。

進入https://packagecontrol.io/installation#st3頁面，選擇“SUBLIME TEXT 3”選項卡，複製出裡面的程式碼段：

import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

雙擊桌面“Sublime Text 3”開啟程式，快捷鍵Ctrl + `開啟Sublime Text控制檯，將之前複製的程式碼貼上到控制檯裡，按下“Eenter”鍵。

等待其安裝完成後關閉程式，重新啟動“Sublime Text 3”，點開選單“Preferences”可見“Package Control”項，說明外掛管理包已安裝成功。

中文介面

我們下載好的Sublime Text3是英文介面的（版本 V3.0），使用起來不是很方便，調整成中文的吧。

在 “Preferences\Package Control”中我們選擇安裝”install package”，如下圖：

在彈出的視窗中輸入”localization”，如下圖：

然後等待安裝外掛。看變成中文介面了，是不是很神奇啊！

如果你還想調回英文，請在”幫助/Language”中進行調整。

2、ConvertToUTF8外掛安裝

a)功能說明：ConvertToUTF8 能將除UTF8編碼之外的其他編碼檔案在 Sublime Text 中轉換成UTF8編碼，在開啟檔案的時候一開始會顯示亂碼，然後一剎那就自動顯示出正常的字型，當然，在儲存檔案之後原檔案的編碼格式不會改變。

b)安裝方法一：快捷鍵Ctrl+Shift+p，開啟 “Command Palette” 懸浮對話方塊，在頂部輸入 “install”, 然後下選點選 “Package Control:Install Package”。

在出現的懸浮對話方塊中輸入 “convert”, 然後點選下面的 “ConvertToUTF8” 外掛，就會自動開始安裝，請耐心等待。

當外掛安裝成功後，Sublime Text 3 編輯器底端的狀態列會有安裝成功的提示。

c)安裝方法二：你還可以下載完整的外掛包後解壓，放入 C:\Users\userName\AppData\Roaming\Sublime Text 3\Packages 目錄下，以達到安裝外掛的目的。下載地址：https://github.com/seanliang/ConvertToUTF8。

　　如何找到 Packages 目錄？一個快捷的方法是：雙擊開啟你的 “Sublime Text 3”，點選單 “Preferences--->Browse Packages...”。

它會直接開啟外掛包存放的目錄 “Packages”。然後你就可以把下載後解壓好的外掛包複製到這個 Packages 目錄下。

當然，如果你熟悉 git，你還可以用 git 從外掛的GitHub庫直接克隆外掛包到 Packages 目錄下。

備註：以後所有外掛都可以通過以上介紹的兩種方法安裝，將不再贅述，推薦方法一，使用“Package Control”安裝外掛。

3、BracketHighlighter外掛

功能說明：高亮顯示匹配的括號、引號和標籤。

外掛地址：https://github.com/facelessuser/BracketHighlighter/tree/BH2ST3

4、LESS外掛

功能說明：LESS語法高亮顯示。

外掛地址：https://github.com/danro/LESS-sublime

5、sublime-less2css外掛

功能說明：將less檔案編譯成css檔案。

外掛地址：https://github.com/facelessuser/BracketHighlighter/tree/BH2ST3

輔助工具：安裝後從https://github.com/duncansmart/less.js-windows下載 less.js-windows，然後配置 less.js-windows 的環境變數。

6、Emmet外掛

功能說明：Emmet的前身是大名鼎鼎的Zen codin。前端開發必備，HTML、CSS程式碼快速編寫神器。

使用方法：預設快捷鍵Tab

外掛地址：https://github.com/sergeche/emmet-sublime

輔助工具：PyV8 下載地址：https://github.com/emmetio/pyv8-binaries

注意：Emmet 外掛需要 PyV8 外掛的支援，所以在安裝 Emmet 時，會自動安裝 PyV8 外掛，如果安裝後 Emmet 不能正常保用，很有可能是因為 PyV8 沒有安裝完全，Sublime Text 2 和 3 容易出現這個問題。你可以刪除它，然後手動下載，採用方法二安裝 PyV8 外掛。

使用方法示例：書寫程式碼 ul#nav>li.item$*8>a{Item $}

然後把游標定在這行程式碼的最後面，按Tab鍵，就會自動生成：

</ul>

更多更詳細的使用方法，請查閱 Emmet 官網：http://docs.emmet.io/

7、JsFormat外掛

功能說明：JavaScript程式碼格式化。

使用方法：在開啟的JavaScript檔案裡點右鍵，選擇JsFormat。

外掛地址：https://github.com/jdc0589/jsformat

8、ColorHighlighter外掛

功能說明：顯示所選顏色值的顏色，並集成了ColorPicker

外掛地址：https://github.com/Monnoroch/ColorHighlighter

在16進位制的顏色值上點右鍵，選擇“Choose color”,會彈性顏色拾色器，在需要的色塊上單擊。

看看效果，顏色值和顯示顏色都相應做了改變。

9、Compact Expand CSS Command外掛

功能說明：使CSS屬性展開及收縮，格式化CSS程式碼。

使用方法：按Ctrl+Alt+[收縮CSS程式碼為一行顯示，按Ctrl+Alt+]展開CSS程式碼為多行顯示。

外掛地址：https://gist.github.com/vitaLee/2863474或者：https://github.com/TooBug/CompactExpandCss

快捷鍵Ctrl+Alt+[收縮CSS程式碼為效果：

快捷鍵Ctrl+Alt+]展開CSS程式碼為多行顯示效果：

10、SublimeTmpl外掛

功能說明：快速生成檔案模板。

使用方法：SublimeTmpl預設的快捷鍵如下，如果快捷鍵設定衝突可能無效。

Ctrl+Alt+h新建 html 檔案

Ctrl+Alt+j新建 javascript 檔案

Ctrl+Alt+c 新建 css 檔案

Ctrl+Alt+p 新建 php 檔案

Ctrl+Alt+r 新建 ruby 檔案

Ctrl+Alt+Shift+p 新建 python 檔案

外掛地址：https://github.com/kairyou/SublimeTmpl

下圖為按快捷鍵Ctrl+Alt+h新建的一個 html 檔案。

相應的模板為tmpl格式的檔案，它們儲存在C:\Users\ usersName\AppData\Roaming\Sublime Text 3\Packages\SublimeTmpl\templates下。

當然你可以根據自己的喜好來更改模板格式。例如把“html.tmpl”改為早期的html標準格式後儲存。

現在按快捷鍵Ctrl+Alt+H，新建一個 html 檔案，其格式就和更改後模板格式完全一樣了。如下圖：

新增語言：你還可以增加模板資料夾中沒有的檔案模板，並做相應的設定來使用這一功能。具體可以參考它的中文文件：http://www.fantxi.com/blog/archives/sublime-template-engine-sublimetmpl/

11、Alignment外掛

功能說明：使程式碼格式的自動對齊。

使用方法：快捷鍵Ctrl+Alt+A，可能與QQ截圖衝突，二者中的一個要重置快捷鍵。

外掛地址：https://github.com/kevinsperrine/sublime_alignment

12、AutoFileName外掛

功能說明：自動補全檔案(目錄)名。

外掛地址：https://github.com/BoundInCode/AutoFileName

安裝好後就可以來測試如何使用AutoFileName，先以<link>css檔案來示範，當輸入href=””的同時，Sublime Text就會將現在編輯檔案的路徑為中心，判斷該路徑內的所有檔案。

a)以這個檔案為範本它會去抓取跟abc.html在同一層的檔案列表。

像我們這次要link的是在css資料夾內的auto.css，所以我們直接銜接打上css/，就會跑出css資料夾內的檔案，整個用法以此類推

b)像是<img src=””>的部分也是一樣的方式，沒什麼困難了，弄懂一下路徑就好了。

c)再來看看是css檔中要用url，也是用同樣方式，只不過因為要連到上一層的images資料夾內的arrow.png，所以就前面打..(上層)，依序去選擇路徑即可。

13、DocBlockr外掛

功能說明：快速生成JavaScript (including ES6), PHP, ActionScript, Haxe, CoffeeScript, TypeScript, Java, Groovy, Objective C, C, C++ and Rust語言函式註釋。

使用方法：在函式上面輸入/** ,然後按Tab就會自動生成註釋。

外掛地址：https://github.com/spadgos/sublime-jsdocs

在函式上面輸入/** ,然後按Tab 就會自動生成註釋。

14、SublimeCodeIntel外掛

功能說明：智慧提示。

外掛地址：https://github.com/SublimeCodeIntel/SublimeCodeIntel

15、HTML-CSS-JS Prettify外掛

功能說明：HTML、CSS、JS格式化。

外掛地址：https://github.com/victorporof/Sublime-HTMLPrettify

安裝方法：安裝這個套件前必須先安裝node.js,指定 node.exe 的執行檔所在位置。進而安裝HTML-CSS-JS Prettify。

使用方法一：View -> Show console 或者使用快捷鍵(Ctrl + `)，在命令列的地方輸入:view.run_command("htmlprettify")，然後按下Enter。

使用方法二：預設快捷鍵：Ctrl+Shift+H。

你也可以自行設定快捷鍵，選單 “Preferences---> Key Bindings – User” 裡新增：

{ 
    "keys": ["ctrl+shift+o"], 
    "command": "htmlprettify" 
}

完成後儲存，以上程式碼設定執行此外掛的快捷鍵是：Ctrl+Shfit+O，自己設定的話就要測試一下，不要跟其他快捷鍵衝突。

格式化前：

格式化後：

16、SideBarEnhancements外掛

功能說明：側欄選單擴充功能。

外掛地址：https://github.com/titoBouzout/SideBarEnhancements/tree/st3

17、View In Browser外掛

功能說明：Sublime Text儲存後網頁自動同步更新。

外掛地址：https://github.com/adampresley/sublime-view-in-browser

使用方法：在開啟的文件任一處點右鍵，選擇“View In Browser”，就會用預設的瀏覽器自動開啟該檔案。

如果你電腦裝有多個瀏覽器，你想換其它的作為此操作的預設瀏覽器，你可以按以下方法設定：

開啟“View In Browser.sublime-settings”，寫入以下程式碼：

{
    "browser": "chrome64"
}

這樣你就把它預設設定為“Chrome”瀏覽器了，當然你還可以改成“Firefox”、“Safari”等等，前提是你的電腦事先已安裝好了這些瀏覽器。

18、LiveReload外掛

功能說明：除錯網頁實時自動更新。

使用說明：快捷鍵Ctr+Alt+V

外掛地址：https://github.com/dz0ny/LiveReload-sublimetext2

同時Chrome瀏覽器也要安裝LiveReload的擴充套件外掛。

19、TortoiseSVN外掛(win下需要安裝有TortoiseSVN客戶端支援)

功能說明：版本控制工具。

外掛地址：https://github.com/dexbol/sublime-TortoiseSVN

20、Theme-Soda外掛

功能說明：最受歡迎的 Sublime Text 主題之一。

外掛地址：https://github.com/buymeasoda/soda-theme

安裝完成後，點選單 Preferences--->Settings - User，根據需要的主題效果，新增如下程式碼。

Soda亮色主題請新增：

{
 "soda_classic_tabs": true,
    "theme": "Soda Light 3.sublime-theme",
}

Soda暗色主題請新增：

{
    "soda_classic_tabs": true,
    "theme": "Soda Dark 3.sublime-theme",
}

要達到圖中的效果，你還需要下載與之搭配的 color scheme。下載地址：http://buymeasoda.github.com/soda-theme/extras/colour-schemes.zip，如果你喜歡 Soda Dark 和 Monokai，我建議你使用 Monokai Extended。這個 color scheme 是 Monokai Soda 的增強，再配合 Markdown Extended ，將大大改善 Markdown 的語法高亮。

如果加程式碼 "soda_classic_tabs":true，檔案標籤頁形狀會如下顯示：

如果不新增此行程式碼，檔案標籤頁形狀會如下顯示：

21、Theme-Flatland外掛

功能說明：最受歡迎的 Sublime Text 主題之一。

外掛地址：https://github.com/thinkpixellab/flatland

22、Theme-Nexus外掛

功能說明：最受歡迎的 Sublime Text 主題之一。

外掛地址：https://github.com/EleazarCrusader/nexus-theme

六、外掛列表

快捷鍵Ctrl+Shift+P，在對話方塊中輸入“list”，選擇“Package Control:List Packages”。

會列出所有已安裝的外掛。這樣可以很方便地瞭解自己已經安裝了哪些外掛。

七、移除外掛

有時候我們需要移除自己不想要的外掛，具體操作如下：快捷鍵Ctrl+Shift+P，在對話方塊中輸入“remove”，選擇“Package Control: Remove Packages”。

然後在出現的外掛列表中點選你要移除的外掛。

八、Sublime Text的視窗操作

1、分屏

Sublime Text有多種分屏形式，讓我來具體地看一看。選單 “View-àLayout”就可以選擇你的分屏樣式。

對應的快捷鍵與分屏情況如下：

Alt+Shift+1Single 獨屏

Alt+Shift+2Columns:2 縱向二欄分屏

Alt+Shift+3Columns:3 縱向三欄分屏

Alt+Shift+4Columns:4 縱向四欄分屏

Alt+Shift+8Rows:2 橫向二欄分屏

Alt+Shift+9Rows:3 橫向三欄分屏

Alt+Shift+5Grid 四格式分屏

2、建立新窗

快捷鍵Ctrl+Shift+N建立一個新視窗。

九、使用技巧薈萃

（未完待續。。。。。。）

十、Sublime Text快捷鍵列表

快捷鍵按型別分列如下：

1、通用

↑↓← →上下左右移動游標

Alt調出選單

Ctrl + Shift + P 調出命令板（Command Palette）

Ctrl + `調出控制檯

2、編輯

Ctrl + Enter 在當前行下面新增一行然後跳至該行

Ctrl + Shift + Enter 在當前行上面增加一行並跳至該行

Ctrl + ←/→進行逐詞移動

Ctrl + Shift + ←/→ 進行逐詞選擇

Ctrl + ↑/↓ 移動當前顯示區域

Ctrl + Shift + ↑/↓ 移動當前行

3、選擇

Ctrl + D 選擇當前游標所在的詞並高亮該詞所有出現的位置，再次Ctrl + D選擇該詞出現的下一個位置，在多重選詞的過程中，使用Ctrl + K進行跳過，使用Ctrl + U進行回退，使用Esc退出多重編輯

Ctrl + Shift + L 將當前選中區域打散

Ctrl + J 把當前選中區域合併為一行

Ctrl + M 在起始括號和結尾括號間切換

Ctrl + Shift + M 快速選擇括號間的內容

Ctrl + Shift + J 快速選擇同縮排的內容

Ctrl + Shift + Space 快速選擇當前作用域（Scope）的內容

4、查詢&替換

F3 跳至當前關鍵字下一個位置

Shift + F3 跳到當前關鍵字上一個位置

Alt + F3 選中當前關鍵字出現的所有位置

Ctrl + F/H 進行標準查詢/替換，之後：

Alt + C 切換大小寫敏感（Case-sensitive）模式

Alt + W 切換整字匹配（Whole matching）模式

Alt + R 切換正則匹配（Regex matching）模式

Ctrl + Shift + H 替換當前關鍵字

Ctrl + Alt + Enter 替換所有關鍵字匹配

Ctrl + Shift + F 多檔案搜尋&替換

5、跳轉

Ctrl + P 跳轉到指定檔案，輸入檔名後可以：

@ 符號跳轉 輸入@symbol跳轉到symbol符號所在的位置

# 關鍵字跳轉 輸入#keyword跳轉到keyword所在的位置

: 行號跳轉 輸入:12跳轉到檔案的第12行。

Ctrl + R 跳轉到指定符號

Ctrl + G 跳轉到指定行號

6、視窗

Ctrl + Shift + N 建立一個新視窗

Ctrl + N 在當前視窗建立一個新標籤

Ctrl + W 關閉當前標籤，當視窗內沒有標籤時會關閉該視窗

Ctrl + Shift + T 恢復剛剛關閉的標籤

7、螢幕

F11 切換至普通全屏

Shift + F11 切換至無干擾全屏

Alt+Shift+1Single 切換至獨屏

Alt+Shift+2Columns:2 切換至縱向二欄分屏

Alt+Shift+3Columns:3 切換至縱向三欄分屏

Alt+Shift+4Columns:4 切換至縱向四欄分屏

Alt+Shift+8Rows:2 切換至橫向二欄分屏

Alt+Shift+9Rows:3 切換至橫向三欄分屏

Alt+Shift+5Grid 切換至四格式分屏

本教程為原創精品教程，轉載請註明出處：http://www.cnblogs.com/wind128/p/4409422.html

Sublime Text 3 全程詳細圖文原創教程

中文介面

Sublime Text 3 全程詳細圖文原創教程

Sublime Text 3 習慣外掛轉

Sublime Text 3 python import不提示python模組

Sublime Text 3——編譯篇

Sublime Text 3 啟用

Sublime Text 3 —— 使用自帶外掛設定中文

Sublime Text 3 配置本地伺服器

將Sublime Text 3 開啟檔案新增到右鍵功能中

Sublime Text 3 實現C語言程式碼的編譯和執行

sublime text 3 中文排序外掛

將Sublime Text編輯器配置Python直譯器教程，基礎必看！

Sublime text 3 + LaTex - How to get started

常用的sublime text 3外掛

Sublime Text 3 for Mac 安裝和外掛配置說明

Sublime Text 3開啟中文亂碼問題解決

Sublime Text 3 C++配置

大天使之劍H5遊戲超詳細圖文架設教程

夢幻西遊H5遊戲超詳細圖文架設教程

Sublime Text 3 快捷鍵總結（拿走）

Sublime Text 3|4：新增右鍵用Sublime Text 開啟檔案和資料夾

Sublime Text 3 全程詳細圖文原創教程

中文介面

相關推薦