sublime text 入門

sublime text3入門教程

2017年07月19日 09:15:51

閱讀數：13736

做者：sam976 
轉載需徵得做者本人贊成，謝謝。

1.介紹

所謂工欲善其事必先利其器，編碼過程合理熟練使用工具是優秀程序員必備技能，在諸多工具中，Sublime Text無疑是一款利器，它界面優美、功能強悍、性能使人驚訝，須要注意的是，它並非IDE，而是一個單純的文本編輯工具，但其代碼高亮顯示、語法提示、自動完成且反應快速，還有各類豐富插件的支持，使得文本編輯過程很是規範、快速高效。

2.優勢

• 跨平臺，不管是Windows、Mac以及Linux都可使用，無需擔憂由於換平臺而找不到熟悉合適的編輯器。
• 豐富的插件，各類各樣的插件大大擴充了Sublime的功能，使用合適的插件可使工做效率大大提高。
• 編輯環境，命令行環境和界面環境互補，操縱體驗很是好。

3.安裝

直接去官網http://www.sublimetext.com/3下載官方版，儘可能不要下載網上的中文版，會出現各類奇怪的問題。安裝時next，next以後，注意在安裝時勾選 Add to explorer context menu ，如圖，這樣在選中文件右鍵能夠直接使用Sublime Text打開。

sublime是個收費軟件，但官網下載的sublime安裝後能夠正常使用，無需購買，購買的好處在於你使用過程當中不會彈出提示框讓你購買（其實彈出頻率很低，不影響正常使用）。有錢任性的隨便買。

4.界面說明

簡單介紹每一個部分的功能（圖中數字對應下面介紹）： 
1. 標題欄：顯示當前打開文件的路徑 
2. 菜單欄：提供軟件的功能入口，各類命令和設置，裏面一般會標記出快捷方式，記住經常使用功能快捷鍵對寫代碼很是有幫助。 
3. tab控制欄：顯示打開的全部文件。 
4. 編輯區：文本編輯的區域，sublime提供很是人性化的編輯功能。 
5. 狀態欄：顯示當前正在進行的操做的狀態，好比寫代碼時提示光標在第幾行和寫得是什麼格式的文件等。 
6. 邊欄：包含當前打開的文件和文件夾視圖。 
7. MiniMap：移動略縮圖能夠快速移動。

5.經常使用插件

對於大多數程序員來講，sublime最讓人沒法自拔的一點是提供了豐富的插件協助開發。怎麼找到插件並進行管理呢？sublime是經過插件管理器Package Control地對插件瀏覽、安裝和卸載插件。下面介紹怎麼安裝插件和一些對開發很是有幫助的插件。

安裝Package Control

首先使用快捷鍵Ctrl + `(View→Show Console menu) 打開Sublime的控制檯，顯示如圖：

而後去https://packagecontrol.io/installation#st3網站把下圖紅框代碼複製到上圖輸入框中

按下enter鍵，在Perferences→package settings中能夠看到package control，則代表安裝成功。完成前面操做後，每次安裝插件時，先使用Ctrl+Shift+P（Tools→Command Palette…）打開控制面板，輸入PackageControl顯示如圖：

選擇Package Control:Install Package,回車。安裝成功後如圖所示，在輸入框中輸入插件名字選擇插件回車便可安裝插件。

若是不能安裝package control，可使用手動的方式安裝。

尋找插件

能夠進入https://packagecontrol.io/browse，查看最新插件和一些流行的插件。

還能夠在Search頁面根據英語關鍵詞查找你須要的插件。在這裏介紹一些經常使用的插件。

• Emmet

前端開發必備，Write less , show more，使用Tab鍵觸發。安裝Emmet後，能夠輸入少許代碼後摁Tab鍵，系統自動補全代碼。 
Emmet插件的快捷鍵說明書能夠查看Emmet Documentation

• AutoFileName

快速列出你想引用的文件夾裏面全部文件的名字，好比想引用test/img/1.png。只須要輸入/img,該插件就會自動提示/img下面的全部文件名，如圖

• BracketHighlighter

高亮顯示[], (), {}, 「」, 」, 符號，便於查看起始和結束標記。如圖：

• ColorPicker

調色板，須要輸入顏色時，可直接選取顏色。使用快捷鍵ctrl+shift+c便可打開調色板。須要注意的是，這個快捷鍵可能會打不開調色板，緣由是該快捷鍵被佔用了，最直接的解決辦法是直接在Preferences→Key Bindings-User中配置：「{ 「keys」: [「ctrl+shift+c」], 「command」: 「color_pick」},」

• JsFormat

JsForma能夠自動幫助你格式化JavaScript代碼，造成一種通用的格式，好比對壓縮、空格、換行的js代碼進行整理，使得js代碼結構清晰，易於觀看。在已壓縮的JS文件中，右鍵選擇jsFormat或者使用默認快捷鍵（Ctrl+Alt+F），若是該熱鍵被佔用了，能夠在Preferences→Key Bindings-User中配置： { 「keys」: [「ctrl+shift+alt+j」], 「command」: 「js_format」,」context」: [{「key」: 「selector」, 「operator」: 「equal」, 「operand」: 「source.js,source.json」}]},

• DocBlockr

安裝該插件後，能夠快速生成各類註釋格式，當須要生成註釋符號時，輸入/*、/而後回車系統即幫你自動生成，若是/後面恰好是一個函數的定義，註釋格式會根據函數的參數生成。詳情查看DocBlockr文檔。

• Sidebar Enhancements

sub側欄右鍵文件提供的功能不多，但在實際開發中，文件一般會有各類處理請求，而該插件加強側欄文件右鍵功能，好比能夠直接右鍵將文件移入回收站，在瀏覽器中瀏覽，將文件複製到剪切板等。詳情查看sidebar文檔

安裝該插件前，文件右鍵選項不多：

安裝插件後，文件右鍵選項大大加強：

我經常使用的兩個功能是設置文件使用瀏覽器打開的快捷鍵F12和重命名F2，須要本身往Key-Bindings-User裏面添加 
{ 「keys」: [「f12」], 「command」: 「side_bar_open_in_browser」,」args」:{「paths」:[], 「type」:」testing」, 「browser」:」「}}, 
{ 「keys」: [「f2」], 「command」: 「side_bar_rename」},

• Alignment

對定義的變量進行智能對齊,通常是「=」號對齊，默認的快捷鍵是Ctrl+Alt+A，但這個熱鍵和QQ截屏的熱鍵衝突不能使用，須要本身從新設置，我一般設置成Ctr+Alt+Shift+A，如下粘貼到Key-Bindings-User裏面：{ 「keys」: [「ctrl+alt+shift+a」], 「command」: 「alignment」 },

• CSS Format 
  CSS Format能夠將任意的 CSS、SASS、SCSS、LESS 代碼格式化爲展開、緊湊、壓縮的形式，選中須要格式化的樣式代碼，右鍵選中CSS Format，選擇須要造成的格式便可。

• Tag

Tag插件提供各類對Tag標籤的操做，具備功能：根據/自動關閉HTML標籤，標籤自動縮進（或選中ctrl+alt+f），刪除標籤和裏面的內容，插入標籤（對光標字符「ctrl+shift+,」生成標籤），刪除標籤裏的屬性，關閉標籤，檢查標籤等。有些功能是自動執行，有些功能須要手動執行，功能入口 菜單欄Edit→ 
Tag。詳情查看Tag插件文檔。

• Trailing spaces

能夠檢測和一鍵刪除代碼的空格，保存時自動刪除多餘空格，讓你的代碼更加緊湊規範。功能入口：Edit→ 

Trailing Spaces→ 
Delete，也能夠本身設置快捷鍵，我一般設置成ctrl+shift+alt+t，如下粘貼到Key-Bindings-User裏面：{ 「keys」: [「ctrl+shift+alt+t」], 「command」: 「delete_trailing_spaces」 },

• ConvertToUTF8

經過本插件，您能夠編輯並保存目前編碼不被 Sublime Text 支持的文件，特別是中日韓用戶使用的 GB2312，GBK，BIG5，EUC-KR，EUC-JP 等。能夠經過 File→ 
Set File Encoding to 菜單對文件編碼進行手工轉換。例如，您能夠打開一個 UTF-8 編碼的文件，指定保存爲 GBK，反之亦然。ConvertToUTF8介紹。

• HTML-CSS-JS Prettify

格式化HTML,CSS,Javascript和Json代碼格式。使用該插件，須要安裝nodejs，並且要在Packages-Setting→ 

HTML/CSS/JS Prettify→ 
set node path中設置你node的安裝路徑。使用過程：Tools→ 
Command Palette(或者Ctrl+Shift+P)，輸入選擇htmlprettify便可完成整個文檔的格式化。也能夠設置快捷鍵：Packages-Setting→HTML/CSS/JS Prettify→set keyboard shortcuts，由於個人ctrl+shift+h已經被佔用，因此我改爲ctrl+shift+alt+h。

 

• Terminal

打開文件的終端，終端默認是CMD。ctrl+shift+t 打開文件所在文件夾，ctrl+shift+alt+t 打開文件所在項目的根目錄文件夾，能夠本身從新配置快捷鍵。也能夠右鍵open terminal here打開。

彙總一下前面介紹的插件： 
Alignment 
AutoFileName 
BracketHighlighter 
ColorPicker 
CSS Format 
DocBlockr 
Emmet 
JsFormat 
Sidebar Enhancements 
Tag 
Trailing Spaces 
ConvertToUTF8 
HTML-CSS-JS Prettify 
Terminal 
以及由於這些插件而從新設置的快捷鍵： 
{ 「keys」: [「ctrl+alt+shift+a」], 「command」: 「alignment」 }, 
{ 「keys」: [「ctrl+shift+alt+f」], 「command」: 「show_panel」, 「args」: {「panel」: 「find_in_files」} }, 
{ 「keys」: [「ctrl+alt+u」], 「command」: 「soft_undo」 }, 
{ 「keys」: [「ctrl+shift+alt+t」], 「command」: 「delete_trailing_spaces」 }, 
{ 「keys」: [「f12」], 「command」: 「side_bar_open_in_browser」,」args」:{「paths」:[], 「type」:」testing」, 「browser」:」「}}, 
{ 「keys」: [「alt+f12」], 「command」: 「side_bar_open_in_browser」,」args」:{「paths」:[], 「type」:」production」, 「browser」:」「}}, 
{ 「keys」: [「ctrl+t」], 「command」: 「side_bar_new_file2」}, 
{ 「keys」: [「f2」], 「command」: 「side_bar_rename」}, 
{ 「keys」: [「ctrl+shift+c」], 「command」: 「color_pick」}, 
{ 「keys」: [「ctrl+shift+alt+j」], 「command」: 「js_format」,」context」: [{「key」: 「selector」, 「operator」: 「equal」, 「operand」: 「source.js,source.json」}]},

還有不少插件須要根據你使用的庫和框架本身去添加，好比jQuery、angular、node.js、less等，只要Ctr+Shift+p輸入關鍵詞便可找到你想安裝的插件。

6.快捷鍵

除了豐富的插件，Sub全面的快捷鍵體系也讓開發過程當中更加快速。Key-Bindings-Default文件裏面定義了sub默認的快捷鍵，若是想要從新定義快捷鍵（安裝插件時一般要從新定義），在Key-Bindings-User文件中把快捷鍵命令從新書寫便可。

由於快捷鍵過多，下面僅羅列一下比較經常使用的快捷鍵：

1.操做 
Ctrl + `： 打開Sublime Text控制檯（Esc退出） 
Ctrl+Shift+P：打開命令面板（Esc退出） 
Ctrl + K, Ctrl + B： 組合鍵，顯示或隱藏側欄 
Alt ：光標調到菜單欄，↑↓←→ 移動光標

2.編輯 
Ctr+Shift+D：複製粘貼光標所在行 
Alt+.：關閉標籤 
Ctrl+/：用//註釋當前行。 
Ctrl+Shift+/：用/**/註釋。 
Ctrl + Enter： 在當前行下面新增一行而後跳至該行 
Ctrl + Shift + Enter： 在當前行上面增長一行並跳至該行 
Ctrl + ←/→： 進行逐詞移動， 
Ctrl + Shift + ←/→： 進行逐詞選擇 
Ctrl + Shift + ↑/↓： 移動當前行（文件會被修改） 
Ctrl+KK ：從光標處刪除至行尾 
Ctrl+K Backspace ：從光標處刪除至行首 
Ctrl+Z：撤銷 
Ctrl+Y：恢復撤銷 
Ctrl+J：合併行（已選擇須要合併的多行時） 
Ctrl + [： 選中內容向左縮進 
Ctrl + ]： 選中內容向右縮進

3.選擇 
Alt+F3：選中關鍵詞後，選中全部相同的詞。能夠配合Ctrl+D使用。 
Ctrl + D Ctrl + K Ctrl + U：Ctrl + D選擇當前光標所在的詞並高亮該詞全部出現的位置，再次Ctrl + D，會選擇該詞出現的下一個位置。在多重選詞的過程當中，Ctrl + K會將當前選中的詞進行跳過在多重選詞的過程當中，Ctrl + U進行回退 
Ctrl+L ：選擇光標所在整行 
Ctrl+X：刪除光標所在行 
Ctrl + J： 把當前選中區域合併爲一行 
Ctrl+Shift+M：選中當前括號內容，重複可選着括號自己

4.查找 
（若是有窗口彈出都是Esc退出彈出窗口） 
Ctr+p：輸入@顯示容器（css或者js裏面） 
Ctrl + F： 調出搜索框 
Ctrl + H： 調出替換框進行替換 
Ctrl + Shift + H： 輸入替換內容後，替換當前關鍵字 
Ctrl + Alt + Enter： 輸入替換內容後，替換全部匹配關鍵字。(NOTE: 注意此時若是鼠標焦點在編輯窗口中，則替換失敗，將鼠標焦點調到替換框中，Ctrl + Alt + Enter纔會起做用) 
Ctrl + Shift + F： 開啓多文件搜索&替換 
Alt + C： 切換大小寫敏感（Case-sensitive）模式 
Alt + W： 切換整字匹配（Whole matching）模式 
Alt + R： 切換正則匹配模式的開啓/關閉

5.跳轉 
Ctrl + P：列出當前打開的文件（或者是當前文件夾的文件），輸入文件名而後 Enter 跳轉至該文件，輸入@symbol跳轉到symbol符號所在的位置，輸入#keyword跳轉到keyword所在的位置，輸入:n跳轉到文件的第n行 
Ctrl + R：列出當前文件中的符號（例如類名和函數名，但沒法深刻到變量名），輸入符號名稱 Enter 便可以跳轉到該處。 
會列出Markdown文件的大綱 
F12： 快速跳轉到當前光標所在符號的定義處（Jump to Definition）。好比當前光標所在爲一個函數調用，F12會跳轉至該函數的定義處。 
Ctrl + G： 輸入行號以跳轉到指定行 
Ctrl+M：跳轉到括號另外一半。

6.窗口和Tab頁 
Ctrl + N： 在當前窗口建立一個新標籤 
Ctrl + Shift + N： 建立一個新窗口（該快捷鍵 和搜狗輸入法快捷鍵衝突） 
Ctrl + W： 關閉標籤頁，若是沒有標籤頁了，則關閉該窗口 
Ctrl+Shift+W：關閉全部打開文件 
Ctrl + Shift + T： 恢復剛剛關閉的標籤。 
Ctrl +Tag：移動標籤。

7.屏幕 
F11： 切換普通全屏 
Shift + F11： 切換無干擾全屏 
Alt + Shift + 2： 進行左右分屏 
Alt + Shift + 8進行上下分屏 
Alt + Shift + 5進行上下左右分屏（即分爲四屏） 
Ctrl + 數字鍵： 跳轉到指定屏 
Ctrl + Shift + 數字鍵： 將當前屏移動到指定屏

此文只是Sub的入門介紹，看完只能給對sub有個大概瞭解，想要讓Sub發揮利器之鋒，仍是須要本身多多探索多多使用，有寫得不對的地方，請各位多多指教（雖然以爲並不會有人看）。