為 Sublime Text 3 設定 Python 的全棧開發環境
Sublime Text 3 (ST3) 是一個輕量級的跨平臺文字編輯器，尤以其輕快的速度，易用性和強大的社群支援而著稱。它一經面世便被認為是一個傑出的編輯器，而它真正的強大之處在於你可以使用 Package Control 來增加它的功能以及可以進行各種自定義設定。
在本文章中，我們將會看到如何將 Sublime Text 打造成為 Python 的全棧開發環境(從前端到後端)，如何通過自定義主題和外掛來增強它的基本功能，並且還將會涉及到很多使 ST3 變得更加強大的常用的命令，特性以及快捷鍵。
本教程將假定你使用的是 Mac 電腦並且習慣於使用終端。如果你使用的是 Windows 或者 Linux 作業系統，本文涉及到的一些命令將有可能會有所不同，但是你應該仍然可以很容易地通過 Google 來獲取到與本教程相關的解答。
在我們開始之前，讓我們先討論一下我所謂的”全棧”具體指的是什麼。
在現在的 HTML5 以及移動裝置開發中，Javascript 簡直無處不在。是的，無處不在！僅僅使用 Python 基於某個框架比如 Django 或者 Flask 進行開發是不夠的。如果你想從始至終真正的自己開發一個網站的話，你必須熟悉 Javascript(以及 Javascript 的一大堆的框架)，REST API(含狀態傳輸 API)，響應式設計，當然還有 HTML 和 CSS，以及其他許多東西。現在讓我們來面對一個問題：就像其他任何一個手藝人一樣，為了成為一個最厲害的程式設計師，你的工具必須犀利，你的開發環境必須被打造成全棧開發——那就是我們馬上將要開始的工作…
特性
讓我們從 ST3 的一些預設特性開始著手吧…
- Split Layouts 允許你將你的許多檔案放到很多分割開來的視窗中。如果你正在進行以測試為目的的開發(將 Python 程式碼放在一個視窗中，而測試指令碼放在另一個視窗中)或者正在進行前端開發(將 HTML 程式碼放在一個視窗裡，CSS/Javascript 程式碼放在另一個視窗裡)的時候將會非常有用。
- Vintage Mode 讓你能夠在 ST3 中使用 vi 模式。
- Chrome-like Tabs 讓你在多個檔案中切換變得更加方便。
- Automatic loading of the last session 幫你自動開啟你上次關閉的時候編輯器中所有開啟的檔案。我總是一直開著 ST3，而且其中開啟著一大堆專案——當我重啟電腦以後， 它能夠自動幫我開啟所有的這些檔案和資料夾。
- Code Snippets 允許你通過一兩個簡單的關鍵字就能寫出一段常用的程式碼片(Snippets)，從而增加你的生產效率。比如，你只需要開啟一個檔案，輸入 “lorem” 然後敲擊 tab 鍵，就會自動生成一段亂數假文(譯者注： 一種用於測試文章或文字在不同字型、版型下看起來的效果等的文字)。又比如在 Python 程式碼中，你可以輸入 “defs” 然後敲擊 tab 鍵，你就能得到一段通用的函式定義。
同時，你還可以點選 Tools > New Snippet 來建立屬於你自己的程式碼片。請參照這個 文件 來獲取幫助，也可以在 這裡 檢視我個人用到的一些 snippets。
自定義 Sublime Text 3
在你下載完 ST3 以後…
在命令列中新增 subl 命令
就像 TextMate 的 mate 命令一樣，Sublime Text 擁有一個叫做 subl 的命令列工具，可以用來通過終端開啟一個檔案或者一整個資料夾。
你需要建立一個指向 subl 二進位制檔案的符號連結來使 subl 命令有效：
|
1 |
$ ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" ~/bin/subl |
嘗試使用以下命令來開啟 Sublime 來確保連結生效了：
|
1 |
$ subl |
如果以上命令沒有效果，你可能需要將 /bin 新增到你的環境變數中：
|
1 |
$ echo "export PATH=~/bin:$PATH" >> ~/.profile |
然後重新嘗試第一步。
如果你仍然遇到問題，嘗試檢視 這篇 文章來獲取幫助。 或者你可以看看如何在 Windows 和 Linux 中建立符號連結。
現在你就可以通過下述命令來開啟檔案或者資料夾了：
|
1 2 3 4 5 6 7 8 |
# open the current directory $ subl . # open a directory called tests $ subl ~/Documents/test # open a file called text.txt $ subl test.txt |
如果路徑中含有空格，你必須使用雙引號將路徑括起來：
|
1 |
$ subl "~/Documents/test/my test file.txt" |
想要查詢所有可用的命令，請開啟幫助檔案：
|
1 |
$ subl --help |
安裝 Package Control
為了使用眾多的 外掛 來擴充套件 Sublime 的功能，你需要安裝一個叫做 Package Control 的外掛管理器——這個東西你必須要手動安裝。但是一旦你安裝好了以後，你就可以使用 Package Control 來安裝，移除或者升級所有的 ST3 外掛了。
- 點選 這裡 從 Sublime Text 3 官方獲取用於安裝的程式碼。依次點選 View > Show Console 開啟 ST3 的控制檯。在控制檯中貼上剛才的程式碼，然後點選回車。最後重啟 ST3。
- 現在你可以通過快捷鍵 cmd+shift+P 開啟 Package Control 來安裝其他的外掛了。輸入 install 然後你就能看見螢幕上出現了 Package Control: Install Package，點選回車然後搜尋你想要的外掛。
- 其他一些相關命令如下：
- List Packages 顯示所有已安裝的外掛
- Remove Packages 移除一個指定的外掛
- Upgrade Package 更新一個指定的外掛
- Upgrade/Overwrite All Packages 更新所有已安裝的外掛
請查閱官方 文件 獲取更多的命令。
建立自定義配置檔案
你可以通過一個基於 JSON 的配置檔案來充分的自定義 Sublime Text，這使得轉移或者同步你的自定義檔案到另一個系統變得非常容易。首先，我們需要新建我們自己的配置檔案。我們最好是為不同的系統環境和程式語言各自建立一個配置檔案。
依次點選 Sublime Text > Preferences > Settings – User 來建立一個配置檔案。在該檔案中新增一個空的 JSON 類然後就可以在其中寫入你的配置內容了。如下所示：
|
1 2 3 4 5 6 7 |
{ // base settings "auto_complete": false, "sublimelinter": false, "tab_size": 2, "word_wrap": true } |
- 如果想為特定的程式語言新建配置檔案的話，請點選 Sublime Text > Preferences > Settings – More > Syntax Specific – User。然後按照 LANGUAGE.sublime-settings 的格式儲存該配置檔案。例如想新建一個 Python 專用的配置檔案，請將該檔案儲存為 Python.sublime-settings。
- 你完全可以按照你自己的喜好來進行各項配置；不過我強烈推薦以我的這份 配置檔案 以及 Python 配置 作為基礎，然後修改成你所需要的內容。
- 一個可選項: 你可以使用 Dropbox 來同步你的所有配置。你只需要將你的配置檔案上傳到 Dropbox 然後就可以將你的配置同步到你的任意一臺裝置上了。
- 你可以在 Sublime Text Unofficial Documentation 找到一些非常好的參考配置。
主題
ST3 為你提供了完全自定義化一個適合自己主題的能力。當然，你如果不是那麼的挑剔的話，你可以通過 Package Control 從許許多多的由 Sublime 社群設計的 主題 中下載一個。 在下載之前你可以通過 ColorSublime 來預覽這些主題。
廣受歡迎的的 Soda Dark 和極簡風格的 Flatland 是我個人最喜歡的兩個主題。
在安裝完了主題以後, 請務必更新你的配置檔案. Sublime Text > Preferences > Settings – User：
|
1 2 3 4 |
{ "theme": "Flatland Dark.sublime-theme", "color_scheme": "Packages/Theme - Flatland/Flatland Dark.tmTheme" } |
外掛
除了那些主題以外，我還會使用以下這一些外掛來提升我的工作效率。
SideBarEnhancements
SideBarEnhancements 擴充套件了側邊欄中選單選項的數量，從而提升你的工作效率。諸如”New file” 和 “Duplicate” 這樣的選項對於 ST3 來說實在是太重要了, 我甚至覺得 ST3 本來就應該提供這些功能。而且僅憑 “Delete” 這一個功能就讓這個外掛值得下載。這個功能將你會在你刪除檔案的時候把它放入回收站。雖然這個功能乍一看沒什麼用，但是當你沒有使用這樣的功能而徹底刪除了一個檔案的時候，除非你用了版本管理軟體，否則你將很難恢復這個檔案。
現在就下載吧！
Anaconda
Anaconda 是一個終極 Python 外掛。它為 ST3 增添了多項 IDE 類似的功能，例如：
- Autocompletion 自動完成，該選項預設開啟，同時提供多種配置選項。
- Code linting 使用支援 pep8 標準的 PyLint 或者 PyFlakes。因為我個人使用的是另外的 linting 工具，所以我會在 Anaconda 的配置檔案 Anaconda.sublime-settings 中將 linting 完全禁用。操作如下: Sublime > Preferences > Package Settings > Anaconda > Settings – User：
{"anaconda_linting": false} - McCabe code complexity checker 讓你可以在特定的檔案中使用 McCabe complexity checker. 如果你對軟體複雜度檢查工具不太熟悉的話，請務必先瀏覽上邊的連結。
- Goto Definitions 能夠在你的整個工程中查詢並且顯示任意一個變數，函式，或者類的定義。
- Find Usage 能夠快速的查詢某個變數，函式或者類在某個特定檔案中的什麼地方被使用了。
- Show Documentation： 能夠顯示一個函式或者類的說明性字串(當然，是在定義了字串的情況下)
你可以在這裡，或者通過 ST3 的 Package Settings: Sublime Text > Preferences > Package Settings > Anaconda > README 來檢視所有這些特性。
SublimeCodeIntel 是另外一個非常流行的外掛，它的許多特性與 Anaconda 類似。我建議同時也試試它。
Djaneiro
Djaneiro 支援 Django 模版和關鍵字高亮以及許多實用的程式碼片(snippets)功能。其中的 snippets 絕對是省時神器。你可以通過很少幾個關鍵字就能建立許多常見的 Django 程式碼塊比如 templates，models，forms，以及 views。請檢視官方文件獲取 snippets 列表。
我個人非常喜歡的以下兩個用於建立 template 的程式碼片：輸入 var 就可以新建 {{ }}，而輸入 tag 就能新建 {% %}。
requirementstxt
Requirementstxt 可以為你的 requirements.txt 檔案提供自動補全，語法高亮以及版本管理功能。
SublimeLinter
SublimeLinter 是 ST3 的一個程式碼靜態檢查工具框架(linter)。這個外掛本身來說並不包含任何的一個 linter，但是你可以通過在 Package Control 中輸入 SublimeLinter-[linter_name] 的方式來安裝一個 linter。你可以點選這裡檢視官方的 linter。同時你還可以在 Package Control 中檢視到許多的第三方 linter。請點選這裡檢視安裝說明。
對於 Python 的程式碼靜態檢查器，我建議使用 SublimeLinter-pyflakes 和 SublimeLinter-pep8。
與此同時，我也會使用 SublimeLinter-jshint, SublimeLinter-pyyaml, SublimeLinter-csslint，SublimeLinter-html-tidy，以及 SublimeLinter-json。
以上大多數的 linter 都需要先安裝一些依賴庫才能使用，所以在安裝前請務必閱讀他們的安裝說明。
你可以通過修改使用者自定義的 SublimeLinter.sublime-settings 檔案來對你的每個 linter 個性化：Sublime Text > Preferences > Package Settings > SublimeLinter > Settings – User. 例如我通過以下程式碼來忽略 pep8 中的錯誤和警告：
|
1 2 3 4 5 6 7 8 |
"pep8": { "@disable": false, "args": [], "excludes": [], "ignore": "E501,C0301,W0142,W0402,R0201,E1101,E1102,C0103,R0901,R0903,R0904,C1001,W0223,W0232,W0201,E1103,R0801,C0111", "max-line-length": 100, "select": "" }, |
GitGutter
GitGutter 讓 ST3 能在左邊欄的位置顯示一個小圖示，用以表示在最後一次提交以後，程式碼是否有追加，修改或者刪除。
如果你想讓該外掛支援分散式的版本管理軟體(Git，SVN，Bazaar 和 Mercurial)。請檢視 Modific。
FTPSync
FTPSync 能夠將你的專案和遠端檔案進行同步。你只需要開啟檔案便可以下載更新(如果你的遠端檔案比本地更加新的話)，而且如果你對本地檔案做出了修改可以立即同步到遠端伺服器。這是非常棒的同步本地檔案和遠端檔案的方法。你可以通過以下的方法來新增你的遠端伺服器：Sublime Text > Preferences > Package Settings > FTPSync > Setup FTPSync.
Sample settings:
|
1 2 3 4 5 6 7 8 9 10 11 |
{ 'primary': { host: 'ftp.mywebsite.com', username: 'johnsmith', password: 'secretpassword', path: '/www/', upload_on_save: true, tls: true } } |
我個人喜歡把密碼設為 null 因為我不想讓我的密碼出現在配置檔案中。這樣 FTPSync 會在我每次儲存完檔案後要求我輸入密碼。
AdvancedNewFile
AdvancedNewFile 可以讓你在 ST3 中使用簡單的幾個快捷鍵便建立一個新的資料夾或者一個新的檔案：
你只需要通過幾個快捷鍵便可以開啟 AdvancedNewFile 的輸入框。然後輸入路徑和檔名。當你按下Enter鍵後，檔案便被建立了。除此之外，如果目標資料夾並不存在的話，該資料夾將會被自動建立。在預設情況下，你建立的檔案的路徑將會顯示在狀態列中。
請檢視 Github 上的這篇文件來獲取更為詳細的使用說明。特別建議請詳細閱讀TAB自動補全(Tab Completion)以及預定義別名(Predefined Aliases)部分。
我把“cmd+n”設定為了通過 AdvancedNewFile 建立新檔案的快捷方式。該快捷鍵可以通過修改 Key Bindings – User file 來實現 Sublime Text > Preferences > Package Settings > AdvancedNewFile > Key Bindings – User：
|
1 2 3 |
[ { "keys": ["cmd+n"], "command": "advanced_new_file_new"} ] |
你也可以更改預設開啟的資料夾路徑：Sublime Text > Preferences > Package Settings > AdvancedNewFile > Settings – User
|
1 |
{"default_initial": "/Users/michaelherman/Documents/repos"} |
這樣我建立新檔案的時候，/Users/michaelherman/Documents/repos將會自動被新增到路徑最前方，因為99%的情況下我都會把我的指令碼放在這個路徑下。
Emmet
Emmet，以前叫做 Zen Coding，讓你可以通過簡單的縮寫來建立 HTML 或者 CSS 的程式碼塊。
例如，你只需要輸入感嘆號!，然後按下 tab 鍵，便可以在一個 HTML 檔案中建立一段帶有幾個基本標籤的 HTML5 文件型別的程式碼：
|
1 2 3 4 5 6 7 8 9 10 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> |
Markdown Preview
Markdown Preview 可以用來預覽和編譯 markdown 檔案。
你可以開啟 Package Manager 然後輸入 Markdown Preview 來檢視可用的命令：
- Markdown Preview: Python Mrakdown: 在瀏覽器中預覽
- Markdown Preview: Python Mrakdown: 匯出 HTML 檔案
- Markdown Preview: Python Mrakdown: 拷貝到剪貼簿
- Markdown Preview: Github風格Markdown: 在瀏覽器中預覽
- Markdown Preview: Github風格Markdown: 匯出 HTML 檔案
- Markdown Preview: Github風格Markdown: 拷貝到剪貼簿
- Markdown Preview: 開啟Markdown速查手冊
一旦你完成轉換，你之後的所有儲存都會立即反映到轉換的檔案中。
快捷鍵
- 跳轉到任意內容 (“cmd+p”) 用來快速查詢和開啟檔案。你僅僅只需要工程中檔案的一部分路徑或者檔名你就可以很容易的開啟這個檔案。這在一個大型的 Django 工程中顯得非常方便。
- 跳轉到指定行 (“ctrl+g”) 讓你在當前檔案中跳轉到指定行數。
- 跳轉到標誌 (“cmd+r”) 可以列出當前檔案中所有的函式或者類，讓你更方便查詢。你可以通過輸入關鍵字來查詢你所需要的函式或者類。
- 跳轉到行首 (cmd+left-arrow-key) 與 跳轉到行尾 (cmd+right-arrow-key)
- 刪除當前行(ctrl+shift+k)
- 多重編輯 是我迄今為止最喜歡的快捷鍵
121.選定一個單詞，點選 **“cmd+d”** 來選擇同樣的單詞，再次點選 **“cmd+d”** 繼續選擇下一個單詞…2.或者 **“cmd+單擊”** 來指定多個你想要同時修改的地方。 - 塊編輯 (option+left-mouse-click) 用於選擇一整塊的內容。通常在整理 CSV 檔案的時候用於刪除空白內容。
如果想了解更多關於快捷鍵的內容，請看一下這篇文章。
自定義命令
你可以很容易地使用 Python 來編輯你自己的自定義命令和快捷鍵組合。目前我個人使用的有以下這些：
通過檔案選項開啟你的 Package 資料夾(Sublime > Preferences > Browse Packages)，然後開啟 User 資料夾，接下來將上述的 Python 檔案新增到 “/Sublime Text 3/Packages/User” 資料夾中。最後請在 Key Bindings – User file (Sublime Text > Preferences > Package Settings > AdvancedNewFile > Key Bindings – User) 檔案中完成快捷鍵繫結。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
[ // Copy file name { "keys": ["cmd+shift+c"], "command": "copy_path_to_clipboard" }, // Close all other tabs { "keys": ["cmd+alt+w"], "command": "close_tabs" } ] |
額外資源
- Community-maintained documentation
- Package Manager documentation
- Unofficial documentation reference
- Pimp my Editor – Presentation
總結
我希望你能夠通過閱讀這篇文章將一些上面提到一些外掛整合到你的 ST3 中。同時希望你能夠改造自己的配置檔案來建立一些屬於自己的自定義設定，以此來提升你的工作效率。如果你有任何的建議或者意見，請在下方的評論欄中留下你的評論。 最後，請到這個 repo 中檢視 dotfiles 資料夾，其中包含了我上文中所提到的一些檔案。
謝謝！
由 Derrick Kearney 編輯。非常感謝！