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 會自動辨識檔案的文字編碼，並顯示正確的結果。

 

image

 

安裝與設定 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中可视化输入公式，并转换成图片

 

问题集锦：

1、如图，中文文件名打开全是乱码，内容倒是装了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
}

 

posted @ 2016-01-22 12:50  mo_wang  阅读(511)  评论(0)  编辑  收藏  举报