Sublime Text3的使用

原文鏈接:https://blog.csdn.net/mahoon411/article/details/80639056
轉自: http://www.cnblogs.com/wind128/p/4409422.html

一、 前言

       使用Sublime Text 也有幾個年頭了,版本也從2升級到3了,但猶如寒天飲冰水,冷暖儘自知。最初也是不知道從何下手,滿世界地查找資料,但能查閱到的資料,苦於它們的零碎、片面,不夠系統和全面,所以一路走來,耗費了本人大量的時間和精力。所以蒙生了寫這篇《Sublime Text 3 全程詳細指南》,一來對自己的經驗是一個總結,二來可以給初學者做個系統、全面的指引,讓他們少走我當時走過的彎路,從而能快速地掌握Sublime Text這個優秀的編輯器。

      目前我正在使用的版本是Sublime Text 3 Build 3083的beta版本,已經相當穩定。所以本文所有講解均以此版本爲準,並以windows 7 x64平臺爲示例。至於其它的版本也不會有太大的差異。

 

二、 Sublime Text 特點

      1、Sublime Text 是一款跨平臺代碼編輯器,Linux、OS X和Windows下均可使用。

      2、Sublime Text 是可擴展的,幷包含大量實用插件,我們可以通過安裝自己領域的插件來成倍提高工作效率。

      3、Sublime Text 分別是命令行環境和圖形界面環境下的最佳選擇,同時使用兩者會大大提高工作效率。

      4、Sublime Text 爲收費軟件,建議有能力的人付費使用,以支持開發者。不過不購買也可以一直使用。

 

三、下載與安裝

      1、下載:目前官方的正式版本爲v2.0.2,我們打開官網下載鏈接http://www.sublimetext.com/3,下載Sublime Text 3 Build 3083。

 

      其中“Windows 64 bit”下載下來爲“Sublime Text Build 3083 x64 Setup.exe”的安裝程序;“portable version”下載下來爲“Sublime Text Build 3083 x64.zip”編輯器的包,解壓後無需安裝就能運行。

 

      如果你的電腦平臺是windows x86,也就是32位的系統,請點擊“Windows”下載32位的安裝程序,如果不想安裝,就點擊其後的“portable version”下載它的32位編輯器包。

 

      2、安裝:雙擊上一步下載下來的“Sublime Text Build 3083 x64 Setup.exe”,記得選擇“Add to explorer context menu”,把它加入右鍵快捷菜單。其它以默認設置安裝。

 

      3、安裝完畢,雙擊桌面“Sublime Text 3”快捷圖標,打開程序,就可以見到“Sublime Tex的廬山真面目了。

 

      4、如果你不是把“Sublime Text 3”安裝在默認路徑,比如你把它安裝在D盤,請你添加環境變量。

 

四、設置字體及字體大小

      點菜單“Preferences—>Setting - User”,打開“Preferences.sublime-settings”。

 

      如下圖添加所需代碼,根據自己的喜好進行設置。設置字體用“font_face”:”字體名稱”,設置字體大小用“font_size”:”字體大小”,注意它們之間需要用逗號隔開。

 

五、安裝插件

       學習Sublime Text擴展插件的安裝前,讓我們來先了解一下它的插件官方網站:https://packagecontrol.io/

 

     當我們在搜索框中輸入插件的關鍵字,相關的插件就會在下面實時顯示出來,我們就可以選擇自己想要的插件進行了解。

 

1、安裝Package Control

      Package Control爲插件管理包,所以我們首先要安裝它。有了它,我們就可以很方便的瀏覽、安裝和卸載Sublime Text中的插件。

      打開Package Control的網頁https://packagecontrol.io/,點擊右側的“Install Now”按鈕。

 

進入https://packagecontrol.io/installation#st3頁面,選擇“SUBLIME TEXT 3”選項卡,複製出裏面的代碼段:

 

import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; 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 3”打開程序,快捷鍵 Ctrl + ` 打開Sublime Text控制檯,將之前複製的代碼粘貼到控制檯裏,按下“Eenter”鍵。

 

      等待其安裝完成後關閉程序,重新啓動“Sublime Text 3”,點開菜單“Preferences”可見“Package Control”項,說明插件管理包已安裝成功。

 

2、ConvertToUTF8 插件安裝

      a)功能說明:ConvertToUTF8 能將除UTF8編碼之外的其他編碼文件在 Sublime Text 中轉換成UTF8編碼,在打開文件的時候一開始會顯示亂碼,然後一剎那就自動顯示出正常的字體,當然,在保存文件之後原文件的編碼格式不會改變。

      b)安裝方法一:快捷鍵 Ctrl+Shift+p ,打開 “Command Palette” 懸浮對話框,在頂部輸入 “install”, 然後下選點擊 “Package Control:Install Package”。

 

      在出現的懸浮對話框中輸入 “convert”, 然後點選下面的 “ConvertToUTF8” 插件,就會自動開始安裝,請耐心等待。

 

       當插件安裝成功後,Sublime Text 3 編輯器底端的狀態欄會有安裝成功的提示。

 

 

      c)安裝方法二:你還可以下載完整的插件包後解壓,放入 C:\Users\userName\AppData\Roaming\Sublime Text 3\Packages 目錄下,以達到安裝插件的目的。下載地址:https://github.com/seanliang/ConvertToUTF8

  如何找到 Packages 目錄?一個快捷的方法是:雙擊打開你的 “Sublime Text 3”,點菜單 “Preferences—>Browse Packages…”。

 

      它會直接打開插件包存放的目錄 “Packages”。然後你就可以把下載後解壓好的插件包複製到這個 Packages 目錄下。

      當然,如果你熟悉 git,你還可以用 git 從插件的 GitHub 庫直接克隆插件包到 Packages 目錄下。

 

      備註: 以後所有插件都可以通過以上介紹的兩種方法安裝,將不再贅述,推薦方法一,使用“ Package Control”安裝插件。

 

3、BracketHighlighter 插件

      功能說明:高亮顯示匹配的括號、引號和標籤。

      插件地址:https://github.com/facelessuser/BracketHighlighter/tree/BH2ST3

 

4、LESS 插件

      功能說明:LESS語法高亮顯示。

      插件地址:https://github.com/danro/LESS-sublime

 

5、sublime-less2css 插件

      功能說明:將less文件編譯成css文件。

      插件地址:https://github.com/facelessuser/BracketHighlighter/tree/BH2ST3

      輔助工具:安裝後從 https://github.com/duncansmart/less.js-windows 下載 less.js-windows,然後配置 less.js-windows 的環境變量。

 

6、Emmet 插件

      功能說明:Emmet的前身是大名鼎鼎的Zen codin。前端開發必備,HTML、CSS代碼快速編寫神器。

      使用方法:默認快捷鍵 Tab

      插件地址:https://github.com/sergeche/emmet-sublime

      輔助工具:PyV8 下載地址: https://github.com/emmetio/pyv8-binaries

      注意:Emmet 插件需要 PyV8 插件的支持,所以在安裝 Emmet 時,會自動安裝 PyV8 插件,如果安裝後 Emmet 不能正常保用,很有可能是因爲 PyV8 沒有安裝完全,Sublime Text 2 和 3 容易出現這個問題。你可以刪除它,然後手動下載,採用方法二安裝 PyV8 插件。

 

      使用方法示例:書寫代碼 ul#nav>li.item*8>a{Item*8>a{Item}

 

      然後把光標定在這行代碼的最後面,按 Tab 鍵,就會自動生成:

      <ul id=”nav”>

              <li class=”item1”><a href=”“>Item 1</a></li>

             <li class=”item2”><a href=”“>Item 2</a></li>

             <li class=”item3”><a href=”“>Item 3</a></li>

             <li class=”item4”><a href=”“>Item 4</a></li>

             <li class=”item5”><a href=”“>Item 5</a></li>

             <li class=”item6”><a href=”“>Item 6</a></li>

             <li class=”item7”><a href=”“>Item 7</a></li>

             <li class=”item8”><a href=”“>Item 8</a></li>

    </ul>

 

 

      更多更詳細的使用方法,請查閱 Emmet 官網:http://docs.emmet.io/

 

7、JsFormat 插件

      功能說明:JavaScript代碼格式化。

      使用方法:在打開的JavaScript文件裏點右鍵,選擇JsFormat。

      插件地址:https://github.com/jdc0589/jsformat

 

8、ColorHighlighter 插件

      功能說明:顯示所選顏色值的顏色,並集成了ColorPicker

      插件地址:https://github.com/Monnoroch/ColorHighlighter

 

      在16進制的顏色值上點右鍵,選擇“Choose color”,會彈性顏色拾色器,在需要的色塊上單擊。

 

 

      看看效果,顏色值和顯示顏色都相應做了改變。

 

9、Compact Expand CSS Command 插件

      功能說明:使CSS屬性展開及收縮,格式化CSS代碼。

      使用方法:按 Ctrl+Alt+[ 收縮CSS代碼爲一行顯示,按 Ctrl+Alt+] 展開CSS代碼爲多行顯示。

      插件地址:https://gist.github.com/vitaLee/2863474 或者:https://github.com/TooBug/CompactExpandCss

 

      快捷鍵 Ctrl+Alt+[ 收縮CSS代碼爲效果: 

 

      快捷鍵 Ctrl+Alt+] 展開CSS代碼爲多行顯示效果:

 

10、SublimeTmpl 插件

      功能說明:快速生成文件模板。

      使用方法: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 文件

      插件地址:https://github.com/kairyou/SublimeTmpl

 

      下圖爲按快捷鍵 Ctrl+Alt+h 新建的一個 html 文件。

 

      相應的模板爲tmpl格式的文件,它們保存在C:\Users\ usersName\AppData\Roaming\Sublime Text 3\Packages\SublimeTmpl\templates下。

 

      當然你可以根據自己的喜好來更改模板格式。例如把“html.tmpl”改爲早期的html標準格式後保存。

 

      現在按快捷鍵 Ctrl+Alt+H,新建一個 html 文件,其格式就和更改後模板格式完全一樣了。如下圖:

 

      新增語言:你還可以增加模板文件夾中沒有的文件模板,並做相應的設置來使用這一功能。具體可以參考它的中文文檔:http://www.fantxi.com/blog/archives/sublime-template-engine-sublimetmpl/

 

11、Alignment 插件

      功能說明:使代碼格式的自動對齊。

      使用方法:快捷鍵Ctrl+Alt+A,可能與QQ截圖衝突,二者中的一個要重置快捷鍵。

      插件地址:https://github.com/kevinsperrine/sublime_alignment

 

12、AutoFileName 插件

      功能說明:自動補全文件(目錄)名。

      插件地址:https://github.com/BoundInCode/AutoFileName

 

      安裝好後就可以來測試如何使用AutoFileName,先以<link>css檔案來示範,當輸入href=””的同時,Sublime Text就會將現在編輯檔案的路徑爲中心,判斷該路徑內的所有檔案。

      a)以這個檔案爲範本它會去抓取跟abc.html在同一層的檔案列表。

 

      像我們這次要link的是在css資料夾內的auto.css,所以我們直接銜接打上css/,就會跑出css資料夾內的檔案,整個用法以此類推

 

      b)像是<img src=””>的部分也是一樣的方式,沒什麼困難了,弄懂一下路徑就好了。

 

     c)再來看看是css檔中要用url,也是用同樣方式,只不過因爲要連到上一層的images資料夾內的arrow.png,所以就前面打..(上層),依序去選擇路徑即可。

 

13、DocBlockr 插件

      功能說明:快速生成JavaScript (including ES6), PHP, ActionScript, Haxe, CoffeeScript, TypeScript, Java, Groovy, Objective C, C, C++ and Rust語言函數註釋。

      使用方法:在函數上面輸入/** ,然後按 Tab 就會自動生成註釋。

      插件地址:https://github.com/spadgos/sublime-jsdocs

 

      在函數上面輸入/** ,然後按Tab 就會自動生成註釋。

 

14、SublimeCodeIntel 插件

      功能說明:智能提示。

      插件地址:https://github.com/SublimeCodeIntel/SublimeCodeIntel

 

15、HTML-CSS-JS Prettify 插件

      功能說明:HTML、CSS、JS格式化。

      插件地址:https://github.com/victorporof/Sublime-HTMLPrettify

      安裝方法:安裝這個套件前必須先安裝node.js,指定 node.exe 的執行檔所在位置。進而安裝HTML-CSS-JS Prettify。

      使用方法一:View -> Show console 或者使用快捷鍵(Ctrl + `),在命令列的地方輸入:view.run_command(“htmlprettify”)然後按下Enter。

 

      使用方法二:默認快捷鍵:Ctrl+Shift+H

                       你也可以自行設置快捷鍵,菜單 “Preferences—> Key Bindings – User” 裏新增:

{ 
"keys": ["ctrl+shift+o"], "command": "htmlprettify" }

 

       完成後保存,以上代碼設定執行此插件的快捷鍵是:Ctrl+Shfit+O,自己設定的話就要測試一下,不要跟其他快捷鍵衝突。

 

      格式化前:

 

      格式化後:

 

16、SideBarEnhancements 插件

      功能說明:側欄菜單擴充功能。

      插件地址:https://github.com/titoBouzout/SideBarEnhancements/tree/st3

 

17、View In Browser 插件

      功能說明:Sublime Text保存後網頁自動同步更新。

      插件地址:https://github.com/adampresley/sublime-view-in-browser

      使用方法:在打開的文檔任一處點右鍵,選擇“View In Browser”,就會用默認的瀏覽器自動打開該文件。

 

      如果你電腦裝有多個瀏覽器,你想換其它的作爲此操作的默認瀏覽器,你可以按以下方法設置:

 

      打開“View In Browser.sublime-settings”,寫入以下代碼:

{
    "browser": "chrome64"
}

 

      這樣你就把它默認設置爲“Chrome”瀏覽器了,當然你還可以改成“Firefox”、“Safari”等等,前提是你的電腦事先已安裝好了這些瀏覽器。

 

18、LiveReload 插件

      功能說明:調試網頁實時自動更新。

      使用說明:快捷鍵 Ctr+Alt+V

      插件地址:https://github.com/dz0ny/LiveReload-sublimetext2

 

      同時Chrome瀏覽器也要安裝LiveReload 的擴展插件。

 

19、TortoiseSVN 插件(win下需要安裝有TortoiseSVN客戶端支持)

      功能說明:版本控制工具。

      插件地址:https://github.com/dexbol/sublime-TortoiseSVN

 

20、Theme-Soda 插件

      功能說明:最受歡迎的 Sublime Text 主題之一。

      插件地址:https://github.com/buymeasoda/soda-theme

      安裝完成後,點菜單 Preferences—>Settings - User,根據需要的主題效果,添加如下代碼。

      Soda 亮色主題請添加:

{
    "soda_classic_tabs": true,
"theme": "Soda Light 3.sublime-theme",
}

     

      Soda 暗色主題請添加:

{
    "soda_classic_tabs": true,
    "theme": "Soda Dark 3.sublime-theme",
}

 

 

      要達到圖中的效果,你還需要下載與之搭配的 color scheme。下載地址:http://buymeasoda.github.com/soda-theme/extras/colour-schemes.zip,如果你喜歡 Soda Dark 和 Monokai,我建議你使用 Monokai Extended。這個 color scheme 是 Monokai Soda 的增強,再配合 Markdown Extended ,將大大改善 Markdown 的語法高亮。

 

      如果加代碼 “soda_classic_tabs”:true,文件標籤頁形狀會如下顯示:

 

      如果不添加此行代碼,文件標籤頁形狀會如下顯示:

 

21、Theme-Flatland 插件

      功能說明:最受歡迎的 Sublime Text 主題之一。

      插件地址:https://github.com/thinkpixellab/flatland

 

22、Theme-Nexus 插件

      功能說明:最受歡迎的 Sublime Text 主題之一。

      插件地址:https://github.com/EleazarCrusader/nexus-theme

 

 

六、插件列表

    快捷鍵 Ctrl+Shift+P,在對話框中輸入“list”,選擇“Package Control:List Packages”。

 

      會列出所有已安裝的插件。這樣可以很方便地瞭解自己已經安裝了哪些插件。

 

七、移除插件

      有時候我們需要移除自己不想要的插件,具體操作如下:快捷鍵 Ctrl+Shift+P,在對話框中輸入“remove”,選擇“Package Control: Remove Packages”。

 

      然後在出現的插件列表中點選你要移除的插件。

 

八、Sublime Text 的窗口操作

1、分屏

      Sublime Text有多種分屏形式,讓我來具體地看一看。菜單 “View-àLayout”就可以選擇你的分屏樣式。

 

      對應的快捷鍵與分屏情況如下:

      Alt+Shift+1       Single             獨屏

      Alt+Shift+2       Columns:2      縱向二欄分屏

      Alt+Shift+3       Columns:3      縱向三欄分屏

      Alt+Shift+4       Columns:4      縱向四欄分屏

 

      Alt+Shift+8       Rows:2          橫向二欄分屏

      Alt+Shift+9       Rows:3          橫向三欄分屏

 

      Alt+Shift+5       Grid              四格式分屏

 

2、創建新窗

      快捷鍵Ctrl+Shift+N 創建一個新窗口。

 

九、使用技巧薈萃

 (未完待續。。。。。。)

 

 

 

 

 

 

 

 

 

十、Sublime Text 快捷鍵列表

      快捷鍵按類型分列如下:

1、通用

      ↑↓← →    上下左右移動光標

      Alt    調出菜單

      Ctrl + Shift + P    調出命令板(Command Palette)

      Ctrl + `    調出控制檯

2、編輯

      Ctrl + Enter    在當前行下面新增一行然後跳至該行

      Ctrl + Shift + Enter    在當前行上面增加一行並跳至該行

      Ctrl + ←/→    進行逐詞移動

      Ctrl + Shift + ←/→    進行逐詞選擇

      Ctrl + ↑/↓    移動當前顯示區域

      Ctrl + Shift + ↑/↓    移動當前行

3、選擇

      Ctrl + D    選擇當前光標所在的詞並高亮該詞所有出現的位置,再次 Ctrl + D 選擇該詞出現的下一個位置,在多重選詞的過程中,使用 Ctrl + K 進行跳過,使用 Ctrl + U 進行回退,使用 Esc 退出多重編輯

      Ctrl + Shift + L    將當前選中區域打散

      Ctrl + J    把當前選中區域合併爲一行

      Ctrl + M    在起始括號和結尾括號間切換

      Ctrl + Shift + M    快速選擇括號間的內容

      Ctrl + Shift + J    快速選擇同縮進的內容

     Ctrl + Shift + Space    快速選擇當前作用域(Scope)的內容

4、查找&替換

      F3    跳至當前關鍵字下一個位置

      Shift + F3    跳到當前關鍵字上一個位置

      Alt + F3    選中當前關鍵字出現的所有位置

      Ctrl + F/H    進行標準查找/替換,之後:

      Alt + C    切換大小寫敏感(Case-sensitive)模式

      Alt + W    切換整字匹配(Whole matching)模式

      Alt + R    切換正則匹配(Regex matching)模式

      Ctrl + Shift + H    替換當前關鍵字

      Ctrl + Alt + Enter    替換所有關鍵字匹配

      Ctrl + Shift + F    多文件搜索&替換

5、跳轉

      Ctrl + P    跳轉到指定文件,輸入文件名後可以:

      @ 符號跳轉    輸入@symbol跳轉到symbol符號所在的位置

      # 關鍵字跳轉    輸入#keyword跳轉到keyword所在的位置

      : 行號跳轉    輸入:12跳轉到文件的第12行。

      Ctrl + R    跳轉到指定符號

      Ctrl + G    跳轉到指定行號

6、窗口

      Ctrl + Shift + N    創建一個新窗口

      Ctrl + N    在當前窗口創建一個新標籤

      Ctrl + W    關閉當前標籤,當窗口內沒有標籤時會關閉該窗口

      Ctrl + Shift + T    恢復剛剛關閉的標籤

7、屏幕

      F11    切換至普通全屏

      Shift + F11    切換至無干擾全屏

      Alt+Shift+1       Single             切換至獨屏

      Alt+Shift+2       Columns:2      切換至縱向二欄分屏

      Alt+Shift+3       Columns:3      切換至縱向三欄分屏

      Alt+Shift+4       Columns:4      切換至縱向四欄分屏

      Alt+Shift+8       Rows:2          切換至橫向二欄分屏

      Alt+Shift+9       Rows:3          切換至橫向三欄分屏

      Alt+Shift+5       Grid              切換至四格式分屏

 

本教程爲原創精品教程,轉載請註明出處:http://www.cnblogs.com/wind128/p/4409422.html


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章