sublime text3使用教程

簡介

Sublime Text：一款具有程式碼高亮、語法提示、自動完成且反應快速的編輯器軟體，不僅具有華麗的介面，還支援外掛擴充套件機制，優雅使用Sublime Text，外掛則是不可缺少的存在,用她來寫程式碼，絕對是一種享受。

安裝啟用

1. 開啟.exe檔案進行安裝，記得選擇“Add to explorer context menu”，把它加入右鍵快捷選單，其他預設下一步；

2. 在網上找最新的Sublime Text3啟用碼，如下：

   —– 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 ——

3. 開啟Sublime選單 > help > enter License,輸入啟用碼即可。

4. 重新開啟sublime text3，如果 enter License變成remove License啟用成功

常用設定

• 設定預設編碼格式為UTF-8
  
  1. 選擇選單Preferences->(Settings)-User；
  2. 在花括號中新增下面一行程式碼：”default_encoding”: “UTF-8”；
• sublime text 3設定字型
  
  1. 選擇選單Preferences->(Settings)-User；
  2. 新增”font_face”: “Consolas”,”font_size”: 12；
• 我的Preferences->(Settings)-User設定項

{
    "auto_complete": true,
    "auto_match_enabled": true,
    "color_scheme": "Packages/Color Scheme - Default/Monokai.tmTheme",
    "default_encoding": "UTF-8",
    "font_face": "Consolas",
    "font_size": 14,
    "ignored_packages":
    [
        "AndyJS2"
 
,
        "Vintage"
    ],
    "theme": "Adaptive.sublime-theme",
    "update_check": false
}

快捷鍵

• 上下交換：Ctrl+sh~ift+↑↓
• 游標齊選：Ctrl+alt+↑↓
• 複製整行至下一行：ctrl+shift+d
• 向右縮排:Tab
• 向左縮排：Shift+Tab
• 刪除整行:Ctrl+Shift+K
• 註釋單行:Ctrl+/
• 註釋多行:Ctrl+Shift+/
• 撤銷:Ctrl+Z
• 恢復撤銷:Ctrl+Y
• 查詢關鍵字:Ctrl+F
• 開啟搜尋框:Ctrl+P
  
  1. 輸入當前專案中的檔名，快速搜尋檔案
  2. 輸入@和關鍵字，查詢檔案中函式名
  3. 輸入:和數字，跳轉到檔案中該行程式碼
  4. 輸入#和關鍵字，查詢變數名
• 開啟命令框:Ctrl+Shift+P
• 退出:Esc

常用外掛

◇安裝外掛

1. CTRL+SHIFT+P開啟命令框，搜尋Package Control install安裝
   （Package Control外掛本身是一個為了方便管理外掛的外掛）
2. 開啟install package終端
   （直接呼叫命令框或開啟Package Control輸入install package點選進入）
3. 輸入想要的外掛名點選安裝即可
   （重新開啟sublime此時在Package Setting中就能看到已安裝的外掛了）

◇更新外掛

Ctrl+Shift+P調出命令面板，輸入upgrade packages，點選更新

◇刪除外掛

Ctrl+Shift+P調出命令面板，輸入remove，調出Remove Package終端點選要刪除的外掛

◇Emmet

功能： 編碼快捷鍵，前端必備
簡介： Emmet（依賴pyv8外掛）作為zen coding的升級版，對於前端來說，可是必備外掛，如果你對它還不太熟悉，可以在其官網（http://docs.emmet.io/）上看下具體的演示視訊。
使用： 教程-http://docs.emmet.io/cheat-sheet/

◇AutoFileName

功能： 快捷輸入檔名
簡介： 自動完成檔名的輸入，如圖片選取
使用： 輸入”/”即可看到相對於本專案資料夾的其他檔案

◇IMESupport

功能： sublime中文輸入法
簡介： 還在糾結 Sublime Text 中文輸入法不能跟隨游標嗎？試試「IMESupport」這個外掛吧！目前只支援 Windows，在搜尋等介面不能很好的跟隨游標。
使用： Ctrl + Shift + P →輸入pci →輸入IMESupport →回車

◇JsFormat

簡介： 這是一款將JS格式化的外掛，可對壓縮檔案格式化，同樣使用Package Control安裝JsFormat外掛後，即可在JS檔案中通過滑鼠右鍵->JsFormat或鍵盤快捷鍵Ctrl+Alt+F對JS進行格式化

◇SideBarEnhancements

簡介： SideBarEnhancements是一款很實用的右鍵選單增強外掛，在安裝該外掛前，在Sublime Text左側FOLDERS欄中點選右鍵，只有寥寥幾個簡單的功能

◇TrailingSpaces

簡介： 有時候，在程式碼結尾打多了幾個空格或Tab，並沒有任何顯示效果，TrailingSpaces這款外掛能高亮顯示多餘的空格和Tab

◇CssComb

簡介： CssComb是為CSS屬性進行排序和格式化外掛，使用Package Control安裝CssComb外掛後，你可能發現它並不能執行，它依賴於Node.js ，若您的計算機已安裝過NodeJS環境，可跳過此步驟，若您的計算機中尚未安裝過Node.js環境，應該到Node.js官網中 [下載] 並安裝相應版本的Node.js
使用： 使用方法：選單Tools->Run CSScomb或在CSS檔案中按快捷鍵Ctrl+Shift+C（快捷鍵和ColorPicker外掛衝突將其改為Ctrl+Shift+alt+C）

◇ConvertToUTF8

簡介： sublime text本身是不支援中文編碼的，所以需要通過安裝外掛來解決，ConvertToUTF8外掛可以實現
使用： 使用方法：按快捷鍵Ctrl+Shift+C（快捷鍵和ColorPicker外掛衝突將其改為Ctrl+Shift+alt+z）
**快捷鍵修改：**preferences→browse packages點選開啟找到相應的外掛修改快捷鍵

◇Autoprefixer

簡介： 這是一款CSS3私有字首自動補全外掛，該外掛使用CanIUse資料庫，能精準判斷哪些屬性需要什麼字首，與CssComb外掛一樣，該外掛也需要系統已安裝Node.js環境

使用： 在輸入CSS3屬性後（冒號前）按Tab鍵，如下圖示

◇ColorPicker

簡介： 在編輯CSS樣式的時候，ColorPicker可以讓sublime text 內建一個調色盤，調好顏色，點選OK就會在游標處生成十六進位制顏色程式碼。
使用： Ctrl/Cmd + Shift + C調出

◇ColorHighlighter

簡介： ColorHighlighter是一個顯示選中顏色程式碼的視覺顏色的外掛。如果您選擇“# fff“，它將向您展示白色

◇Terminal

開啟檔案的終端，終端預設是CMD(支援linux)。ctrl+shift+t 開啟檔案所在資料夾，ctrl+shift+alt+t 開啟檔案所在專案的根目錄資料夾，可以自己重新配置快捷鍵。也可以右鍵open terminal here開啟。

◇File Header

簡介： File Header是一個為檔案自動新增字首欄位的外掛
配置： preferences→browse packages點選開啟找到相應的外掛，開啟template修改模板

◇程式碼提示外掛彙總

• SublimeCodeIntel

功能： SublimeCodeIntel 實現程式碼智慧提示及自動完成功能
缺點： 提示較少，不想用
支援語言： JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, Sass, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP

• bettercompletion

功能： better completion實現程式碼智慧提示及自動完成功能
優點： 可以自定義，推薦使用
支援語言： javascript , jQuery , Bootstrap，php，react，css等
配置：將相應檔案的false改為true

• Java​ScriptCompletions

功能： Java​ScriptCompletions實現程式碼智慧提示及自動完成功能
特點： 提示全，高版本sublime支援好
支援語言： javascript