Step 1:從官網下載軟件
Sublime Text 官網下載
選擇適用于自己當前操作平臺的 Sublime Text 的最新的穩定版本進行下載。
Step 2:學習常用的快捷鍵
官網 上的6張動圖很好的解釋了 ST 最常用也最實用的6個快捷鍵:
Use Multiple Selections to rename variables quickly.
HereCtrl+D
is used to select the next occurrence of the current word.
使用多選來同時重命名多處變量。
Ctrl+D
可用來選擇當前所選內容的下一處出現位置,Alt+F3
可一次性將所有與當前所選內容一致的地方選擇到,進行批量修改。Make batch edits with Multiple Selections.
Here Ctrl+Shift+L is used to split a selection into lines, and each line is then edited simultaneously.
使用多選來進行批量編輯。
Ctrl+Shift+L
用來將所選區域按行區分,每行末尾都會出現光標,可同時進行編輯。The Command Palette gives fast access to functionality.
Here Ctrl+Shift+P is used to show the Command Palette, "sspy" (short for Set Syntax: Python) is used set the syntax of the current file to Python.
通過命令面板可以快速使用各種功能。
Ctrl+Shift+P
是打開命令面板的快捷鍵,"sspy"(Set Syntax: Python 的縮寫)用來將當前文件的語法設置為 Python。Use Goto Anything to quickly navigate between files, even in the largest projects.
Ctrl+P shows Goto Anything, and typing then filters on file and directory names.
使用 Goto Anything 來快速在不同文件中切換,即使是在最大的項目中。
Ctrl+P
打開 Goto Anything 輸入框,然后進行輸入將會實時篩選文件名和文件夾名。Goto Anything can also be used to show a function, line or word within a file.
Type @ after a file name to filter on symbols.
Goto Anything 同時也可以尋找一個文件中的某個方法,某一行或者某個詞。
在文件名后面輸入 @ 來進一步篩選文件中的具體標記。Find and Replace with regular expressions.
Here unwanted whitespace is removed by using the regex " +" to find groups of spaces, which are then selected simultaneously with the Find All button.
使用正則表達式來進行尋找和替換。
使用正則“ +”(空格和+號)來找到連續的空格,然后使用Find All
按鈕來找到所有符合條件的地方。
更多常用的值得學習的快捷鍵請參考這篇文章:Gif多圖:常用的 16 個 Sublime Text 快捷鍵
Step 3:安裝實用的插件
- Package Control
Package Control:
The Sublime Text package manager that makes it exceedingly simple to find, install and keep packages up-to-date.
Package Control 可以使我們輕松的在 ST(Sublime Text)上安裝插件,并且保持插件為最新版本。
- Emmet
Emmet 的前身是大名鼎鼎的 Zen coding。它使用仿 CSS 選擇器的語法來生成代碼,按下 Tab 鍵,Emmet 就能把一個縮寫展開成一個 HTML 和 CSS 代碼塊,大大提高了 HTML/CSS 代碼編寫的速度。
想要更好的領略 Emmet 的魅力,可以到官網查看 Demo 演示。
下載方式:
- 點擊 Emmet 官網頁面下方的 Download
- 在新的頁面中選擇 Sublime Text(針對這個編輯器的插件)
- Github 頁面中的 How
To Install 會告訴你有兩種安裝方式:使用 Package Control 或者是 Manually(手動) - 這時候你的 ST 中還沒有 Package Control,你就點擊 With Package Control 上的鏈接
- 通過鏈接你來到了 Package Control的官網,點擊 Install Now
- 根據你安裝的 ST 版本選擇代碼片段并復制
- 在 ST 里,View > Show Console,將復制的代碼片段粘貼到打開的 Console 中,回車,等一會兒 Package Control 就安裝好了!
- 在 ST 里,選擇 Preferences > Package Control,點擊 “Package Control: Install Package”, 然后輸入 Emmet,選擇并安裝。
- Bingo!分分鐘安裝完畢!
PS:找到各自的官網,根據提示安裝,條條大路通羅馬,以上只是我當初安裝的方式,不是唯一的方式。
插件使用方式:
Package Control:
就像安裝 Emmet 時的操作一樣,選擇 “Package Control: Install Package”,然后輸入想要安裝的插件,找到后點擊安裝就好啦!
Emmet:
建議先將官網上淺顯易懂的使用方式學會(簡單的先用著,熟悉一下),然后再深入學習,提高編碼效率。
- BracketHighlighter
成對匹配的增強。
像這些符號是成對的:花括號 { }, 中括號 [ ],括號 ( ), 引號 “ ” 等。 對于這些符號,當我們鼠標放在開始符號的位置的時候,希望能明顯看到結尾符號在哪兒,sublime 中對于結尾符號默認是顯示下劃線,很不明顯,這個插件可以在行號左側顯示匹配的符號位置,很有幫助。
- AllAutocomplete
傳統的 Sublime Text 自動補全插件僅僅在當前文件下工作。AllAutocomplete 針對補全可以搜索全部打開的標簽頁,這將極大的簡化開發進程。
- SublimeCodeIntel
SublimeCodeIntel:A full-featured code intelligence and smart autocomplete engine for Sublime Text.
實現了一些 IDE 的功能并且為一些語言提供了“代碼情報”: 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.
- AutoFileName
自動補全文件路徑,非常方便實用。
- Color Highlighter
顏色高亮,將代碼所代表的顏色以相應的顏色高亮出來,便于尋找和判斷顏色代碼的位置。
- HTML/CSS/JS Prettify
這是一款集成了格式化(美化)html、css、js 三種文件類型的插件。插件依賴于 nodejs,因此需要事先安裝 nodejs,然后才可以正常運行。nodejs 只要到官網下載,然后保存地址選擇默認的就可以了。
強烈推薦這款插件,有時候任性的寫了一段代碼或者復制粘貼別處的代碼段后,丑陋的代碼排版讓人無法忍受,但是手動調整又費時間,使用這個插件就可以輕松將代碼的排版美化,令人心情愉悅。
小結
插件的具體用法等不懂的可以查閱相關資料,可以從官網的說明開始查起,那里總是會有最佳實踐,不怕錯過插件最令人贊嘆的功能。
Sublime Text 還有很多有助于提高開發效率的快捷鍵,插件,功能等,等上手了就可以進一步探索了!當你遇到重復性的代碼工作時,就可以考慮去搜索是否有相關的插件可供使用,往往會發現驚喜哦。