工具 -- Sublime Text 漢化方法、外掛推薦

MR_LP發表於2017-03-25

請各位讀者新增一下作者的微信公眾號，以後有新的文章，將在微信公眾號直接推送給各位，非常感謝。

工具 -- Sublime Text 漢化方法、外掛推薦

0.前言

原文已經刪除，這次是從新發的，因為之前原文中我提供了一個啟用碼。
這種情況實際上已經涉及到了侵權，所以將原文刪除並從新發布。
若對讀者們造成了困擾，我在這裡道個歉。

本文用於給新手小白使用者指明前進方向，不用做商業推廣。

其次，鼓勵購買正版，拒絕盜版。

1. Sublime Text 介紹

首先在開始前，先來介紹一下 Sublime Text。

Sublime Text 是一個程式碼編輯器（Sublime Text 2是收費軟體，但可以無限期試用），也是HTML和散文先進的文字編輯器。Sublime Text是由程式設計師Jon Skinner於2008年1月份所開發出來，它最初被設計為一個具有豐富擴充套件功能的Vim。

Sublime Text具有漂亮的使用者介面和強大的功能，例如程式碼縮圖，Python的外掛，程式碼段等。還可自定義鍵繫結，選單和工具欄。Sublime Text 的主要功能包括：拼寫檢查，書籤，完整的 Python API ， Goto 功能，即時專案切換，多選擇，多視窗等等。Sublime Text 是一個跨平臺的編輯器，同時支援Windows、Linux、Mac OS X等作業系統。

用過電腦，搞過開發的人都知道，一個好用的 IDE 能省多少事，但是很多時候我們需要的僅僅是一些簡單的基礎開發，我們就可以去使用我們的 Sublime Text 了。

除此之外，還有幾款開發工具也非常推薦。

當然，也不能少了我們今天的主角。

需要注意，如果你需要下載，請下載複合你當前電腦的對應版本。

工具 -- Sublime Text 漢化方法、外掛推薦

2.Sublime Text 的漢化

在進行 Sublime Text 的漢化之前，首先需要前往 Github 上去下載一下 Sublime 的漢化包。

工具 -- Sublime Text 漢化方法、外掛推薦

點選下載後，我們將其加壓縮，得到一個檔案 Default.sublime-package。

之後我們需要去找到 Sublime Text 的包內容。

工具 -- Sublime Text 漢化方法、外掛推薦

並將我們的漢化包直接拖進 Installed Packages 資料夾即可。

工具 -- Sublime Text 漢化方法、外掛推薦

這時候我們的 Submlie 漢化就完成了。

工具 -- Sublime Text 漢化方法、外掛推薦

3.Sublime Text 的外掛安裝

關於 Sublime Text 的外掛安裝基本上分為兩種方法，第一種是直接找到 Sublime Text 的外掛目錄，之後將自己的外掛直接拖進去即可。

3.1 第一種外掛安裝方法

工具 -- Sublime Text 漢化方法、外掛推薦

同樣可以參考上文中直接開啟 Sublime Text 包的方法。

3.2 第二種外掛安裝方法

而第二種方法則是去通過安裝外掛的方式來安裝，李先生我也比較推薦這種方法。

而安裝外掛之前，我們首先需要來安裝一個外掛管理工具 Package Control。

首先開啟我們 Sublime Text 的控制檯。

工具 -- Sublime Text 漢化方法、外掛推薦

當然，你也可以用快捷鍵 ctrl + `。

之後我們需要將對應的版本輸入進我們的控制檯。

開啟後我們會看到兩塊內容，分別是 Sublime Text 3 的外掛安裝程式碼和 Sublime Text 2 的外掛安裝程式碼。

  • Sublime Text 3 外掛安裝程式碼
import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; 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 2 的外掛安裝程式碼
import urllib2,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')複製程式碼

將其輸入進控制檯，並單擊回車。

工具 -- Sublime Text 漢化方法、外掛推薦

等待安裝完成後，完全退出 Sublime Text 並重新開啟。

這時候我們開啟控制皮膚。

工具 -- Sublime Text 漢化方法、外掛推薦

當然，你也可以按快捷鍵。

  • window ： ctrl + shift + p
  • mac ： commond + shift + p

這時候輸入 install 去撥出外掛安裝皮膚。

工具 -- Sublime Text 漢化方法、外掛推薦

等待載入完成後，你就可以看到該介面了。

工具 -- Sublime Text 漢化方法、外掛推薦

這時候你想要什麼外掛，就可以在這裡直接輸入，而不用每次都去自己找安裝包啦。

4. Sublime Text 的外掛推薦

4.1 Emmet

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

4.2 html-css-jsprettify

  • 功能：對Html，css，js檔案進行格式化
  • 簡介：代替了JsFormat 和 CSSFormat
  • 使用：快捷鍵Windows: ctrl+shift+i
  • 快捷鍵配置：在Preferences / Key Bindings – User加上程式碼（陣列內）
    {"keys": ["ctrl+shift+i"],"command": "htmlprettify"},

4.3 CSSComb

  • 功能：用來給CSS屬性進行排序的格式化（處女座必備）
  • 簡介：按一定的順序排列
  • 使用：到github.com/csscomb/sub… text資料夾的\Data\Packages\User目錄裡
  • 快捷鍵：ctrl+shift+c

4.4 ColorHighlighter

  • 功能：方便調色
  • 簡介：它可以展示你所選擇的顏色程式碼（像“#FFFFFF”, “rgb(255,255,255)”, “white”）的真正顏色。同時它還包含一個顏色選擇器讓你可以方便地更改顏色。
  • 使用：快捷鍵Windows: ctrl+shift+w
  • 快捷鍵配置：在Preferences / Key Bindings – User加上程式碼（陣列內）
    { "keys": ["ctrl+shift+w"],"command": "color_picker","context": [{"key": "color_highlighter.color_picker"}]},

4.5 Trailing spaces

  • 功能：檢測並一鍵去除程式碼中多餘的空格
  • 簡介：還在糾結程式碼中有多餘的空格而顯得程式碼不規範？或是有處女座情節？次外掛幫你實現發現多餘空格、一鍵刪除空格、儲存時自動刪除多餘空格，讓你的程式碼規範清爽起來
  • 使用：安裝外掛並重啟，即可自動提示多餘空格。一鍵刪除多餘空格：CTRL+SHITF+T（需配置），更多配置請點選標題。
  • 快捷鍵配置：在Preferences / Key Bindings – User加上程式碼（陣列內）{ "keys": ["ctrl+shift+t"], "command": "delete_trailing_spaces" },

4.6 auto-save

  • 功能：自動儲存檔案
  • 簡介：為儲存提供了方便
  • 使用：預設是不會自動儲存，按快捷鍵Ctrl+Shift+S開啟。
  • 快捷鍵配置方法：首選項-快捷鍵設定，在陣列內新增{ "keys": ["ctrl+shift+s"], "command": "auto_save" },如需自動啟用，首選項-外掛-auto-save---settings-usre粘帖一下配置
    {
    "auto_save_on_modified": true,
    "auto_save_delay_in_seconds": 10,
    "auto_save_all_files": true,
    "auto_save_current_file": "",
    "auto_save_backup": false,
    "auto_save_backup_suffix": "autosave"
    }

4.7 view in browser

  • 功能：通過預設瀏覽器開啟檔案
  • 簡介：方便開啟瀏覽器檢查編譯效果
  • 使用：快捷鍵配置方法：首選項-快捷鍵設定，在陣列內新增快捷鍵：F12{ "keys": ["f12"], "command": "open_in_browser" },

4.8 autoprefixer(下載超慢)

  • 功能：CSS新增私有字首
  • 簡介：CSS還未標準化，所以要給各大瀏覽器一個字首以解決相容問題
  • 使用：快捷鍵配置方法：首選項-快捷鍵設定，在陣列內新增{ "keys": ["ctrl+shift+enter"], "command": "autoprefixer" },
  • 快捷鍵：ctrl+shift+enter

4.9 CSS Extended Completions：

  • 功能：關聯CSS檔案，智慧提示css檔案中的類名，非常好用

4.10 JavaScript Completions

  • 功能：支援javascript原生語法提示，媽媽再也不用擔心我輸入document.getElementById(id)

4.11 jQuery

  • 功能：jQ函式提示
  • 簡介：快捷輸入jQ函式，是偷懶的好方法

4.12 AutoFileName

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

4.13 SublimeLinter

  • 功能：程式碼檢查
  • 簡介：支援JavaScript、CSS、HTML、Java、PHP、Python、Ruby等十多種開發語言
  • 使用：需要配置相應語言的環境，要檢查JavaScript程式碼需要安裝node.js，檢查PHP程式碼需要安裝PHP並配置環境等。

4.14 SideBarEnhancements

  • 功能：擴充邊欄選單的功能
  • 簡介：包括在當前工程資料夾中新建檔案，移動檔案或資料夾，產生檔案或資料夾的副本，在新視窗或瀏覽器中開啟，重新整理等。

4.15 Bracket Highlighter

  • 功能：程式碼匹配
  • 簡介：可匹配[], (), {}, “”, ”, ，高亮標記，便於檢視起始和結束標記

4.16 Monokai Extended

  • 功能：主題
  • 簡介：如果你喜歡 Soda Dark 和 Monokai，我建議你使用 Monokai Extended
  • 使用：首選項-> 配色方案 -> User -> Monokai Extended

4.17 全文快捷鍵配置

[
    { "keys": ["ctrl+shift+t"], "command": "delete_trailing_spaces" },
    { "keys": ["ctrl+shift+s"], "command": "auto_save" },
    { "keys": ["f12"], "command": "open_in_browser" },
    { "keys": ["ctrl+shift+enter"], "command": "autoprefixer" },
    { "keys": ["ctrl+shift+i"],"command": "htmlprettify"},
{ "keys": ["ctrl+shift+w"],"command": "color_picker","context":
        [{"key": "color_highlighter.color_picker"}]},

]複製程式碼

5. 後記

感覺這應該是大家看過最全的 Sublime Text 的教程了吧。

如果喜歡本文，請分享給其他小夥伴。

另外，本文作者李鵬。

QQ: 3206064928

微信：lipeng_0524

歡迎新增，一起進步。

另外，本文由 李鵬 手打完成，請勿隨意轉載。

作者保留法律追究權利。

2017年03月24日17:43:01

相關文章