sublime Text3及其插件的使用

參考：Sublime Text 3 新手上路：必要的安裝、設定與基本使用教學

 

Sublime Text 相信是許多開發人員人心目中的最愛，然而對一個 Sublime Text 3 的新手來說，有什麼是在第一次使用時必定要了解的事情呢？我整理了幾個重要步驟，幫助你們快速上手，並在文末加上幾個不錯的參考連結，供你們進一步學習這套工具的使用。

安裝與註冊

基本安裝我想不用特別說明瞭，直接到官網下載相對應的版本，裝起來就對了。

而後須要註冊碼來去除未註冊的提示！

註冊碼：

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

包管理器

裝好之後，一般第一步就是先安裝超級好用的 Package Control 套件，未來安裝更多 Sublime Text 的好用套件就都靠它了，其安裝步驟以下：

1. 開啟 Sublime Text 3 主程式後，以下圖顯示主控臺視窗，或直接按下 Ctrl + `組合鍵開啟：
2. 直接複製貼上這個網頁提供的指令到主控臺命令列中，並直接按下 Enter 執行，便可動安裝完畢。 
   請注意：這段安裝程式碼，僅適用於 Sublime Text 3 版本！
3. 安裝好之後的畫面以下，你能夠再按一次 Ctrl + ` 組合鍵以關閉主控臺視窗：
4. 然後你就能夠在 [Preferences] –> [Package Control] 啟用這個 Sublime Text 套件管理員：
5. 未來有許多好用套件都會透過這個套件管理員協助安裝，最經常使用的就是 Install Package 命令了
6. 快速叫用 Install Package 命令的快速鍵是：Ctrl+Shift+P 然後輸入 inst 之後按下 Enter 鍵
7. 另外一個值得一提的是，Sublime Text 3 的擴充套件，都會放在如下目錄，一個套件一個資料夾： 
   %APPDATA%\Sublime Text 3\Packages
8. 全部套件的使用者定義檔 ( *.sublime-settings )，都會放在如下目錄： 
   %APPDATA%\Sublime Text 3\Packages\User

插件列表：

※ 解決 Sublime Text 3 預設不支援 Big5 與其餘 CJK 編碼的問題

Sublime Text 套件名稱：ConvertToUTF8

若是你透過 Sublime Text 3 開啟一個 Big5 編碼的文件或網頁，馬上會看到亂碼的情況，以下圖示：

 

 

你只要試圖安裝 ConvertToUTF8 套件，就能夠輕鬆解決這個問題，以下圖示裝好之後 Sublime Text 會自動辨識檔案的文字編碼，並顯示正確的結果。

 

 

安裝與設定 ConvertToUTF8 套件：

1. 叫用 Install Package 命令，並輸入 Convert 搜尋到 ConvertToUTF8 套件，按下 Enter 安裝
2. 預設 ConvertToUTF8 套件會自動偵測文件的編碼字集(Charset)，若是字集判斷錯誤，你能夠透過 [File] –> [Reload with Encoding] 來手動切換編碼，不過大部分情況應該都會正確判斷。
3. 若是你想要將該文件另存成其餘編碼，也能夠透過 [File] –> [Set File Encoding to] 將檔案的編碼轉換成另外一個字集編碼，然後再按下 Ctrl+S 儲存檔案便可。
4. 由於正體字與簡體字的字集有許多重疊，因此再自動判斷字集方便，難免會有所失誤，這個 ConvertToUTF8 套件由於是對岸大牛所設計的，預設判斷字集的優先順序是先判斷是否為簡體字 (GBK) 再判斷是否為繁體字 (BIG5)，若是你想要改變這個預設偵測文件字集的順位，能夠參考如下設定步驟調整。
1. 將 %APPDATA%\Sublime Text 3\Packages\ConvertToUTF8\ConvertToUTF8.sublime-settings" 預設設定檔，複製到 %APPDATA%\Sublime Text 3\Packages\User\ 目錄下。
2. 然後直接透過 Sublime Text 3 編輯這個位於 User 目錄下的 ConvertToUTF8.sublime-settings 檔案。
3. 將 encoding_list 前兩個字集定義對調便可，調換後的結果以下圖，讓 BIG5 擺在首位：

※ 前端工程師必備的 Emmet for Sublime 擴充套件 ( 參見 http://emmet.io 官網 )

Sublime Text 套件名稱：Emmet

這擴充套件太強了，傳說中的 Zen Coding 就是這一套，請自行參考如下相關連結學習：

※ 前端工程師必備的 Emmet LiveStyle 擴充套件 ( 參見http://livestyle.emmet.io 官網 )

Sublime Text 套件名稱：LiveStyle

此套件使用方式大體以下：

• 這套必須跟 Google Chrome 作搭配，使用前必須先安裝 Chrome 下的 Emmet LiveStyle 擴充套件
• 先把網頁打開 ( 本機網頁或線上網頁均可以 )
• 開啟 Chrome 開發者工具，切換到 LiveStyle 頁籤，勾選 Enable LiveStyle for current page 啟用
• 若你開啟的網頁是線上網頁，則必須明確指定這頁的 CSS 對應 (File mapping) 到本機的哪個檔案
• 在 Sublime Text 3 開啟該網頁的 CSS 檔案 ( 必須是從外部載入的 CSS 檔案才行 )
• 接下來，你的 Sublime Text 3 與 Chrome 開發者工具已經創建好即時連線，CSS 可雙向編輯！

※ 前端工程師必備的 HTML-CSS-JS Prettify 擴充套件 ( 參見 Sublime-HTMLPrettify 官網 )

Sublime Text 套件名稱：HTML-CSS-JS Prettify

此套件使用方式大體以下：

• 安裝完成後，只要先按下 Ctrl+Shift+P 再輸入 HTMLPrettify 找到相對應的指令，按下 Enter 之後就會自動格式化目前文件。
• 這是一套將 HTML/CSS/JS 格式化的套件，核心使用 nodejs 處裡格式化任務，因此你必須明確指定 node.exe 的位址才能使用該套件，請先到http://nodejs.org 下載 nodejs 並安裝起來。
• 第一次使用時會出現如下視窗，按下 OK 之後必須先指定 node.exe 的執行檔所在位置才能用：
• 請將路徑修改為 C:/Program Files/nodejs/node.exe 以下圖示：

※ AngularJS 開發人員必備的 AngularJS 擴充套件 ( 參見 AngularJS-sublime-package 官網 )

Sublime Text 套件名稱：AngularJS

此套件使用方式大體以下：

• 提供許多 AngularJS 開發過程所需的自動完成 (Auto-completion) 需求
• 常見的 AngularJS 工具函式與 ng 模組中內建的 services 都有提供 Intellisense
• 可快速跳躍至選中的 directive, filter, …

※ 版控人員必備的 Git 擴充套件 ( 參見 https://github.com/kemayo/sublime-text-git 官網 )

Sublime Text 套件名稱：Git

此套件使用方式大體以下：

• 安裝完成後，只要先按下 Ctrl+Shift+P 再按照你本來輸入 Git 指令的方式選擇想執行的動做便可

※ Markdown 開發人員必備的Markdown Editing和Markdown Preview 插件

 擴充套件 ( 參見【四】搭建Markdown的編輯器——sublime Text 3 )

 

其餘好用 Sublime Text 擴充套件

• Auto​File​Name 
  能夠在輸入 URL 或圖片網址時，自動提供路徑或檔名建議 (autocompletes filenames)
• Bower 
  能夠直接從 Sublime Text 直接執行 Bower 安裝命令 (Ctrl+Shift+P)
• Grunt 
  能夠直接從 Sublime Text 直接執行 Grunt 工做 (Ctrl+Shift+P)
• TrailingSpaces 
  可自動顯示每一行後面出現的多餘空白字元，並可透過 TrailingSpaces 命令刪除 (Ctrl+Shift+P)
• Bracket​Highlighter 
  可自動顯示 HTML 標籤或 JavaScript 的各種對應區塊 ( { } )
• Doc​Blockr 
  自動產生區塊是註解的工具，可用在 JS, CSS, PHP, CoffeeScript, Actionscript, C & C++ 等等
• SideBarEnhancements 
  提供許多側邊攔 (SideBar) 的右鍵選單功能，很是實用！ ( 按下 Ctrl+K+B 可顯示/隱藏側邊攔 )
• SideBarGit
  在側邊攔加上 Git 選單，能夠針對目錄或檔案進行 Git 版本控管操做

• Insert Equation plugin for Sublime Text

  • 能夠在sublime中可視化輸入公式，並轉換成圖片

 

問題集錦：

一、如圖，中文文件名打開全是亂碼，內容卻是裝了converttoutf8沒什麼太大的問題。

這個是sublime text 3的bug，當Windows 個性化 顯示 中的設置自定義文本大小(DPI)，大於默認的100%的時候，就會出現這個bug。解決方法：在sublime text 3中，Preference, Settings-User，最後加上一行"dpi_scale": 1.0覆蓋操做系統設置的DPI。這是個人Settings-User{"font_face": "Consolas","font_size": 15,"ignored_packages":["Vintage"],"line_padding_bottom": 1,"line_padding_top": 1,"tab_size": 4,"translate_tabs_to_spaces": true,"word_wrap": "true","dpi_scale": 1.0}