Sublime Text 3 全程詳細圖文原創教程（持續更新中。。。）

時間 2019-11-10

標籤 sublime text 全程詳細圖文原創教程持續更新欄目 HTML 简体版

原文原文鏈接

1、前言javascript

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

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

2、 Sublime Text 特色html

一、Sublime Text 是一款跨平臺代碼編輯器，在Linux、OS X和Windows下都可使用。前端

二、Sublime Text 是可擴展的，幷包含大量實用插件，咱們能夠經過安裝本身領域的插件來成倍提升工做效率。java

三、Sublime Text 分別是命令行環境和圖形界面環境下的最佳選擇，同時使用二者會大大提升工做效率。node

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

3、下載與安裝git

一、下載：目前官方的正式版本爲v2.0.2，咱們打開官網下載連接http://www.sublimetext.com/3，下載Sublime Text 3 Build 3083。github

其中「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位編輯器包。

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

三、安裝完畢，雙擊桌面「Sublime Text 3」快捷圖標，打開程序，就能夠見到「Sublime Tex的廬山真面目了。

四、若是你不是把「Sublime Text 3」安裝在默認路徑，好比你把它安裝在D盤，請你添加環境變量。

4、設置字體及字體大小

點菜單「Preferences--->Setting - User」，打開「Preferences.sublime-settings」。

以下圖添加所需代碼，根據本身的喜愛進行設置。設置字體用"font_face":"字體名稱"，設置字體大小用"font_size":"字體大小"，注意它們之間須要用逗號隔開。

5、安裝插件

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

當咱們在搜索框中輸入插件的關鍵字，相關的插件就會在下面實時顯示出來，咱們就能夠選擇本身想要的插件進行了解。

一、安裝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」項，說明插件管理包已安裝成功。

二、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」安裝插件。

三、BracketHighlighter 插件

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

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

四、LESS 插件

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

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

五、sublime-less2css 插件

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

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

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

六、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 $}

而後把光標定在這行代碼的最後面，按 Tab 鍵，就會自動生成：

</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

6、插件列表

快捷鍵 Ctrl+Shift+P，在對話框中輸入「list」，選擇「Package Control:List Packages」。

會列出全部已安裝的插件。這樣能夠很方便地瞭解本身已經安裝了哪些插件。

7、移除插件

有時候咱們須要移除本身不想要的插件，具體操做以下：快捷鍵 Ctrl+Shift+P，在對話框中輸入「remove」，選擇「Package Control: Remove Packages」。

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

8、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 建立一個新窗口。

9、使用技巧薈萃

（未完待續。。。。。。）

10、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 跳轉到指定行號

六、窗口

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

歡迎加入QQ羣 279422298 進行更多交流

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。