關於Sublime Text3的安裝和優雅使用我有一句標特否要說

hydCoder發表於2017-12-13

說在前面

古人云:“工欲善其事,必先利其器。”,所以要想更好的裝逼,呸呸呸,是更好的擼碼,那就必須得有一款看起來很高大上,使用起來很爽,又很輕量級的編輯器了。在不同語言的開發環境下可能你都會有很喜歡的編輯器,但有時候你僅僅只是想寫點什麼或者看下別人寫的東西,又不想開啟你那沉重的IDE,那麼你就可以選擇一些輕量級的編輯器了,下面說說我知道的幾款吧。

  • notepad++: windows下的一款比較好用的文字編輯器(至少比系統的記事本好用)
  • vim(或者vi):這款號稱叫編輯器之神的編輯器,確實好用,有幾種模式和一大堆的快捷鍵,有點記不住,而且在Linux作業系統下用的較多(windows的git bash裡也有)
  • Sublime Text(簡稱ST):這就是今天的主角了,他強大的外掛和用法比起上面兩款應該是更受青睞,下面就詳細說說它的安裝和一些外掛安裝以及快捷鍵(請準備好凳子。。。)

安裝Sublime Text 3

首先直接去它的官網 根據自己的系統版本下載相應的安裝包,但是一定要選擇ST3,而不是ST2,3比2好用,真的,後面你就知道了。

安裝好後,開啟後是不是發現最頂部有一個括號,裡面寫的未註冊的英文,有強迫症的朋友估計受不了了,那麼就來啟用它吧。(當然,手頭寬裕的還是請支援正版!)

點開Help,填入註冊碼即可去掉那個括號了。下面是親測可用的註冊碼。

—– BEGIN LICENSE —– Michael Barnes Single User License EA7E-821385 8A353C41 872A0D5C DF9B2950 AFF6F667 C458EA6D 8EA3C286 98D1D650 131A97AB AA919AEC EF20E143 B361B1E7 4C8B7F04 B085E65E 2F5F5360 8489D422 FB8FC1AA 93F6323C FD7F7544 3F39C318 D95E6480 FCCC7561 8A4A1741 68FA4223 ADCEDE07 200C25BE DBBC4855 C4CFB774 C5EC138C 0FEC1CEF D9DCECEC D3A5DAD1 01316C36 —— END LICENSE —— —– BEGIN LICENSE —– Nicolas Hennion Single User License EA7E-866075 8A01AA83 1D668D24 4484AEBC 3B04512C 827B0DE5 69E9B07A A39ACCC0 F95F5410 729D5639 4C37CECB B2522FB3 8D37FDC1 72899363 BBA441AC A5F47F08 6CD3B3FE CEFB3783 B2E1BA96 71AAF7B4 AFB61B1D 0CC513E7 52FF2333 9F726D2C CDE53B4A 810C0D4F E1F419A3 CDA0832B 8440565A 35BF00F6 4CA9F869 ED10E245 469C233E —— END LICENSE —— —– BEGIN LICENSE —– Anthony Sansone Single User License EA7E-878563 28B9A648 42B99D8A F2E3E9E0 16DE076E E218B3DC F3606379 C33C1526 E8B58964 B2CB3F63 BDF901BE D31424D2 082891B5 F7058694 55FA46D8 EFC11878 0868F093 B17CAFE7 63A78881 86B78E38 0F146238 BAE22DBB D4EC71A1 0EC2E701 C7F9C648 5CF29CA3 1CB14285 19A46991 E9A98676 14FD4777 2D8A0AB6 A444EE0D CA009B54 —— END LICENSE —— —– BEGIN LICENSE —– Alexey Plutalov Single User License EA7E-860776 3DC19CC1 134CDF23 504DC871 2DE5CE55 585DC8A6 253BB0D9 637C87A2 D8D0BA85 AAE574AD BA7D6DA9 2B9773F2 324C5DEF 17830A4E FBCF9D1D 182406E9 F883EA87 E585BBA1 2538C270 E2E857C2 194283CA 7234FF9E D0392F93 1D16E021 F1914917 63909E12 203C0169 3F08FFC8 86D06EA8 73DDAEF0 AC559F30 A6A67947 B60104C6 —— END LICENSE ——

這些註冊碼來自Sublime text 3 3103 註冊碼,感謝提供註冊碼的作者。

Package Control安裝

Package Control是一個基礎的、必備的包管理,主要用來以後的外掛安裝。官網的安裝指導

package-control安裝.png

開啟ST3,點選選單 View -> Show Console,會在底部出現一個命令輸入框,然後將上面的命令拷貝(官網的安裝指導開啟這個網址拷貝)到輸入框中,回車,等待,安裝成功。

外掛安裝

  • 外掛安裝方式一:直接安裝

安裝Sublime text 3外掛很方便,可以直接下載安裝包解壓縮到Packages目錄(選單->preferences->packages)。

  • 外掛安裝方式二:使用Package Control元件安裝:

    經過上面安裝了Package Control後,我們就可以通過快捷鍵 Ctrl+Shift+P (或者點選preferences -> Package Control)開啟Package Control來安裝外掛了。在開啟的輸入框中輸入 install ,會根據你的輸入自動提示,選擇 Install Package。如下圖:

install安裝.png

我們輸入chinese,選擇ChineseLocalization安裝一個語言包,安裝好後選單上的文字就會自動變成簡體中文了。

ST安裝與MarkDown有關的外掛

Markdown 是一種方便記憶、書寫的純文字標記語言,使用者可以使用這些標記符號以最小的輸入代價生成極富表現力的文件:譬如您正在閱讀的這份文件。它使用簡單的符號標記不同的標題,分割不同的段落,粗體 或者 斜體 某些文字 還可以顏色變換 等等。

  • MarkDown Editing

    SublimeText不僅僅是能夠檢視和編輯 Markdown 檔案,但它會視它們為格式很糟糕的純文字。這個外掛通過適當的顏色高亮和其它功能來更好地完成這些任務。

  • MarkDown Preview

    1. 使用 Markdown Preview較常用的功能是preview in browser和Export HTML in Sublime Text,前者可以在瀏覽器看到預覽效果,後者可將markdown儲存為html檔案。 preview inbrowser據稱是實時的,但是實踐上還是需要在st儲存,然後瀏覽器重新整理才能看到新的效果, 好在markdown寫得多的話也不需要每敲一行看一次效果。

    2. 編輯 按Ctrl + N 新建一個文件 使用Markdown語法編輯文件 按Ctrl + Shift + P 語法高亮,輸入ssm 後回車(Set Syntax: Markdown)

    3. 在瀏覽器預覽Markdown文件 按Ctrl + Shift + P 輸入mp 後回車(Markdown Preview: current file in browser) 此時就可以在瀏覽器裡看到剛才編輯的文件了; 若設定了快捷鍵,直接(alt+m/..)即可.

    4. 快捷鍵 st支援自定義快捷鍵,markdown preview預設沒有快捷鍵,我們可以自己為preview in browser設定快捷鍵。 方法是在Preferences -> Key Bindings User開啟的檔案的中括號中新增以下程式碼(可在Key Bindings Default找到格式): { "keys": ["alt+m"], "command": "markdown_preview", "args": { "target": "browser"} } "alt+m"可設定為您自己喜歡的按鍵。

      注意:新增快捷鍵的語法類似Json,所以,如果在你新增的[]裡已經有這樣的程式碼了,記得在末尾加上英文輸入法下的逗號即','。

    5. 列印成pdf 將markdown轉換為pdf應該有很多種方法的。可直接用谷歌瀏覽器虛擬列印功能生成。 利用Markdown Preview的Preview in Browser功能可以在瀏覽器上看到html效果。在頁面右鍵->列印->另存為pdf->調節頁邊距即可將pdf檔案下載下來。

Sublime Text 3其他外掛推薦

  • Sublime Terminal:這個外掛可以讓你在Sublime中直接使用終端開啟你的專案資料夾,並支援使用快捷鍵。

  • ColorPicker:通常,如果你想使用一個顏色選擇器則可能開啟 Photoshop。而在 Sublime Text 中,你可以使用內建的顏色選擇器。安裝完成後,只要按下Ctrl / Cmd + Shift + C 快捷鍵。

  • SublimeREPL:這可能是對程式設計師很有用的外掛。SublimeREPL 允許你在 Sublime Text 中執行各種語言(NodeJS , Python,Ruby, Scala 和 Haskell 等等)。

  • Ctags外掛:Sublime Text不能支援函式的跳轉(比如像Eclipse那樣,按住Control點選該方法或者物件,即可跳轉到定義的地方; Alt+←即可回到原處)。其實Sublime Text也可以藉助外掛實現之(當然,有些情況下:Can not find defination)畢竟這個也是藉助正則來匹配完成的。

  • SublimeLinter外掛:SublimeLinter 是前端編碼利器——Sublime Text 的一款外掛,用於高亮提示使用者編寫的程式碼中存在的不規範和錯誤的寫法,支援 JavaScript、CSS、HTML、Java、PHP、Python、Ruby 等十多種開發語言。這篇文章介紹如何在 Windows 中配置 SublimeLinter 進行 JS & CSS 校驗。

  • SideBarEnhancements外掛:SideBarEnhancements是一款很實用的右鍵選單增強外掛;在安裝該外掛前,在Sublime Text左側FOLDERS欄中點選右鍵,只有寥寥幾個簡單的功能;安裝了就相當於給其豐了大胸一般。 更強大的是,該外掛還能讓我們自定義快捷鍵撥出某個瀏覽器以預覽頁面!這樣就不用到專案目錄下尋找和拖動到特定瀏覽器中預覽了。 安裝此外掛後,點選選單欄的preferences->package setting->side bar->Key Building-User,鍵入以下程式碼:

      [   
      { "keys": ["ctrl+shift+c"], "command": "copy_path" },
      //chrome
      { "keys": ["f2"], "command": "side_bar_files_open_with",
              "args": {
                  "paths": [],
                  "application": "C:\\Users\\hydcoder\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe",
                  "extensions":".*"
              }
       }
      ]
    複製程式碼

    這裡設定按Ctrl+Shift+C複製檔案路徑,按F2即可在Chrome瀏覽器預覽效果(如果需要的話,也可以根據自己的需要為Firefox,Safari,IE,Opera等加上),當然你也可以自己定義喜歡的快捷鍵,application後面的路徑需要換成自己的chrome安裝路徑。

  • SublimeTmpl 快速生成檔案模板:sublime text 3沒有新建檔案模板的功能,像html頭部的DTD宣告每次都要複製貼上。用SublimeTmpl這款外掛終於可以解脫了,SublimeTmpl能新建html、css、javascript、php、python、ruby六種型別的檔案模板,所有的檔案模板都在外掛目錄的templates資料夾裡,可以自定義編輯檔案模板。 SublimeTmpl預設的快捷鍵:

      ctrl+alt+h html
      ctrl+alt+j javascript
      ctrl+alt+c css
      ctrl+alt+p php
      ctrl+alt+r ruby
      ctrl+alt+shift+p python
    複製程式碼

如果想要新建其他型別的檔案模板的話,先自定義檔案模板方在templates資料夾裡,再分別開啟Default (Windows).sublime-keymap、Default.sublime-commands、Main.sublime-menu、SublimeTmpl.sublime-settings這四個檔案照著裡面的格式自定義想要新建的型別。

  • Javascript-API-Completions:支援Javascript、JQuery、Twitter Bootstrap框架、HTML5標籤屬性提示的外掛,是少數支援sublime text 3的字尾提示的外掛,HTML5標籤提示sublime text3自帶,不過JQuery提示還是很有用處的,也可設定要提示的語言。

  • Doc​Blockr: 程式碼塊註釋。可以快速的對函式進行註釋。保持程式碼規範。支援多種語言,有 JavaScript (including ES6), PHP, ActionScript, Haxe, CoffeeScript, TypeScript, Java, Apex, Groovy, Objective C, C, C++ and Rust.

    1. /*:回車建立一個程式碼塊註釋
    2. /**:回車在自動查詢函式中的形參等等。

    它會生成 JSDoc 格式的註釋。如果你從沒有使用過類似的工具,DocBlockr 會讓你覺得以前沒有它是如何寫程式碼的。幫助你創造你的程式碼註釋,通過解析功能,引數,變數,並且自動新增基本專案;如果你願意其更為便捷,不妨再結合AutoHotKey,高效註釋,由此開啟。

  • ConvertToUTF8: 支援 GBK, BIG5, EUC-KR, EUC-JP, Shift_JIS 等編碼的外掛

  • Bracket Highlighter: 用於匹配括號,引號和html標籤。對於很長的程式碼很有用。安裝好之後,不需要設定外掛會自動生效

  • Emmet:快速生成HTML程式碼段的外掛,強大到無與倫比:可以超快速編寫HTML/CSS/JS,當然這個外掛還支援多種編譯環境,如常見的:Eclipse/Aptana、Coda、Notepad++、Adobe Dreamweaver、TextMate等,web開發必備!!!

  • **jsFormat **:格式化js程式碼,強迫症Coder必備!預設快捷鍵Ctrl+Alt+F。

  • ClickableURLs:可點選的URL,使用小外掛ClickableURLs可以讓檔案中的URL能夠點選。

  • 終極必殺:自己編寫專用的Sublime Text外掛。雖然說各個方面比如移動端,Web前段,伺服器端,非Coder的Writer所需要的方便已經被整合在了不同的外掛中。但譬如,需要快捷開啟PC端的某個模擬器,便捷的進行某些校驗,只要你想的到的基本都可以將其在外掛內,以快捷鍵處理之。至於如何編寫SublimeText外掛,請參看這裡 編寫自己的Sublime Text2 外掛

設定屬於自己的快捷鍵

  • 使用SublimeText內建的快捷鍵:比如 Ctrl + Shift + P 開啟命令皮膚:例如開啟Package Control安裝各種外掛;可以可以輸入Set(Snytax)來改變使用的語言環境,瞬間切換等等。

  • 設定快捷鍵。在SublimeText裡,開啟Preferences -> Key Bindings - User,比如:

      [
        { "keys": ["ctrl+f9"], "command": "build" },
        { "keys": ["f10"], "command": "build", "args": {"variant": "Run"} },
        { "keys": ["ctrl+shift+x"], "command": "toggle_comment", "args": { "block": true } }
     	]
    複製程式碼

具體可參見Sublime Text3 快捷鍵彙總及設定快捷鍵配置環境變數

硬貨(實用技巧)

  • Ctrl+O(Command+O):可以實現標頭檔案和原始檔之間的快速切換
  • 通過 View -> Side bar 可在左側顯示當前開啟的檔案列表
  • ST3雖然不像notepad++可以在sidebar上顯示函式列表,但是可通過Ctrl+R檢視
  • 通過 Preference -> Key binding user 可根據個人操作習慣自定義快捷鍵(包括ST3自帶的和外掛的)
  • 雙擊可選中游標所在單詞,三擊可選中游標所在行(等同於Ctrl+L(Command+L));
  • Ctrl+Shift+T可以開啟之前關閉的tab頁,這點同chrome是一樣的Ctrl+R定位函式;Ctrl+G定位到行;
  • 有時我們需要對一片區域的所有行進行同時編輯,Ctrl+Shift+L可以將當前選中區域打散,然後進行同時編輯:

多行編輯.gif

  • 有打散自然就有合併,Ctrl + J(mac下Command+J)可以把當前選中區域合併為一行

  • Windows下Ctrl + ←/→進行逐詞移動,相應的,Ctrl + Shift + ←/→進行逐詞選擇。

  • Sublime text 刪除外掛步驟:“Ctrl+Shift+P”—“Remove Package”—“找到需要刪除的外掛,並點選即可刪除”;

  • 編輯程式碼時我們經常會開多個視窗,所以分屏很重要。Windows下:Alt + Shift + 2進行左右分屏,Alt + Shift + 8進行上下分屏,Alt + Shift + 5進行上下左右分屏(即分為四屏)

  • Sublime 拼寫檢查:使用SublimeText從事英文創作,那麼啟用拼寫檢查就非常有用處了。選擇Preferences > Settings – User選單,新增以下程式碼:

      "spell_check": true,
    複製程式碼

結語

由於Sublime Text很強大,所以我所知道的和這篇文章所說的也只不過是滄海一粟,冰山一角,只希望能幫到有需要的人。也給自己的使用做一個筆記和總結。

參考文章出處:

如何優雅地使用Sublime Text3
Sublime Text 3能用支援的外掛推薦
Sublime Text3外掛:增強篇
20個強大的SublimeText外掛

謝謝

相關文章