Sublime Text3使用詳解

本文轉載自查看原文 2016-08-04 09:44 1800 編輯器

Sublime Text簡介

Sublime Text - 性感的代碼編輯器、程序員之必備神器

Sublime Text 是一個代碼編輯器，也是HTML和散文先進的文本編輯器。Sublime Text具有漂亮的用戶界面和強大的功能，例如代碼縮略圖，Python的插件，代碼段等。還可自定義鍵綁定，菜單和工具欄。SublimeText的主要功能包括：拼寫檢查，書簽，完整的 Python API ， Goto 功能，即時項目切換，多選擇，多窗口等等。SublimeText是一個跨平台的編輯器，同時支持Windows、Linux、Mac OS X等操作系統。

安裝Sublime Text 3插件的方法：

直接安裝

安裝Sublime text 3插件很方便，可以直接下載安裝包解壓縮到Packages目錄（菜單->preferences->packages）。

使用package control安裝

網址(https://packagecontrol.io/installation#Simple)

package control 是用來安裝其它插件的插件，為了方便管理插件的插件，可以安裝刪除其他插件

這個特殊的“插件包”，可以很容易地安裝、升級、刪除，甚至非常方便地查看您已經安裝在SublimeText中的包或插件的列表。它通過菜單和對應的行為使這些過程變得非常容易和有組織。

1. 按Ctrl+`或View > Show Console調出console

2. 粘貼以下代碼到底部命令行並回車：

import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; 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)

3. 重啟Sublime Text 3。

4. 如果在Perferences->package settings中看到package control這一項，則安裝成功。在Perferences下面會多出package settings和package control兩個選項。

如果由於某種原因，控制台安裝不成功（如在您的網絡上有一個代理），請執行以下步驟來手動安裝Package Control：

1. 點擊Preferences > Browse Packages…

2. 瀏覽文件夾，進入Installed Packages/

3. 下載 Package Control.sublime-package 復制到Installed Packages/

4. 重啟 Sublime Text

用Package Control安裝插件方法：

首先進入package control 的官網(https://packagecontrol.io/),找到自己想要的插件，將插件的名字復制下來，然后去sublime里面去安裝

1. 按下Ctrl+Shift+P調出命令面板

2. 輸入install 或package調出 Install Package 選項並回車，輸入剛才找好的插件名稱，然后在列表中選中要安裝的插件。

常用Sublime Text 3插件：

1. Emmet

編輯器中最流行的插件之一。Emmet，前身Zen Coding也是web開發者提高生產力最有效的方法之一。按下Tab鍵，Emmet就能把一個縮寫展開成一個HTML和CSS代碼塊，Emmet的使用方法(http://docs.emmet.io/cheat-sheet/), Emmet官網, Emmet package control.

解決Sublime提示 Sublime Text Error while loading PyV8 binary:exit code 1 Try to manually install Pyv8 form https://github.com/emetio/pyv8-binaries

1. 去gihub下載 PyV8,連接地址：https://github.com/emmetio/pyv8-binaries

2. 解壓文件至Packages\PyV8文件夾內(Preferences – Browser Packages)，重啟解決。

2. SyncedSidebarBg

側邊欄顏色與主題一致

3. SideBarEnhancements

這個插件可以給SublimeText的邊欄菜單帶來擴充的功能，包括：在當前工程文件夾中新建文件，移動文件或文件夾，產生文件或文件夾的副本，在新窗口或瀏覽器中打開，刷新等。

4. AutoFileName

自動補全文件路徑-非常方便。

5. ColorPicker

如果你經常要查看或設置顏色值，這個插件可以很方便地調用你本機的調色板應用。

Sublime text3 插件ColorPicker(調色板)不能使用快捷鍵的解決方法

convertToUTF8和ColorPicker快捷鍵會產生沖突，convertoUTF8的默認轉換GBK的快捷鍵和 ColorPicker打開調色板的快捷鍵都是ctrl+shift+c 。如果你兩個插件都安裝了的話，就需要進行自定義了。

解決方法：打開Sublime Text --> Preferences --> Browse Packages，找到ConvertToUTF8文件夾並進入，找到對應操作系統的Default.sublime-keymap文件，直接修改成

[
{ "keys": ["ctrl+shift++alt+c"], "command": "convert_to_utf8", "args": {"encoding": "GBK", "stamp": "0" } }
]

6. Theme - Soda

現在我正在使用的主題與配色

使用方法

Open your User Settings Preferences file Sublime Text -> Preferences -> Settings - User
Add (or update) your theme entry to be "theme": "Soda Light 3.sublime-theme" or "theme": "Soda Dark 3.sublime-theme"

7. Piatto

piatto light配色方案很好看

8. Spacegray

9.Theme - Nil

10. ConvertToUTF8

通過本插件，您可以編輯並保存目前編碼不被 Sublime Text 支持的文件，特別是中日韓用戶使用的 GB2312，GBK，BIG5，EUC-KR，EUC-JP 等。ConvertToUTF8 同時支持 Sublime Text 2 和 3。

11. IMESupport

還在糾結 Sublime Text 中文輸入法不能跟隨光標嗎？試試「IMESupport 」這個插件吧！目前只支持 Windows，在搜索等界面不能很好的跟隨光標。

12. jQuery

提供jquery的一些snippets片段，方便直接調用

13. Material Theme

配色方案很好看,但是有一點暗了

14. html5

該插件提供許多 html5相關的標簽等snippets，也非常實用。

crtl+shift+p 輸入相關內容，可以看到有代碼片段，后面是其快捷鍵

15. JsFormat

在你寫javascript代碼時,按下 Ctrl+Alt+f 快捷鍵后,js代碼自動格式化對齊,趕快試一試吧!

16. JavaScript Completions

17. BracketHighlighter

括號以及標簽層級顯示，不用擔心選中的代碼屬於哪個代碼塊，一目了然。

19. All Autocomplete

Sublime Text 默認的 Autocomplete 功能只考慮當前的文件，而 AllAutocomplete 插件會搜索所有打開的文件來尋找匹配的提示詞。

20. Color Highlighter

21. PHPCS

22. SublimeLinter-php

23. DocBlockr

可以生成優美的注釋，高效的注釋

24. AngularJS

AngularJs 補全

25. SVG-Snippets

SVG-Snippets - 設置自定義的SVG片段。

26. CSS Format

有多種css格式化風格

使用方法，安裝完成后，在Edit中找到CSS Format,選擇相應格式

27. A File Icon

文件圖標

28. SublimeLinter-jshint

可以讓sublime有javascript語法檢查。

安裝方法：

1. 安裝SublimeLinter插件（通過Package Control 來安裝）

2. 安裝Node.js

　　node -v 輸出版本信息，驗證安裝是否成功。

3. 安裝jshint

　　SublimeLinter-jshint 是基於 nodeJS 下的 jshint 的插件，實際上 SublimeLinter-jshint 調用了 nodeJS 中 jshint 的接口來進行語法檢查的。

　　在命令行下輸入如下代碼：npm install -g jshint 完成安裝

4. 安裝好了上面的依賴后，在Package Control中搜索SublimeLinter-jshint插件，然后確認安裝。

29. SublimeLinter-csslint

SublimeLinter-csslint是用來檢查css錯誤的，安裝方法類似於SublimeLinter-jshint

安裝方法：

1. 安裝SublimeLinter插件（通過Package Control 來安裝）

2. 安裝Node.js

3. 安裝csslint

　　在命令行下輸入如下代碼：npm install -g csslint完成安裝

4. 安裝好了上面的依賴后，在Package Control中搜索SublimeLinter-csslint插件，然后確認安裝。

30. Emmet Css Snippets

Emmet Css Snippets是可以自動提示CSS、LESS和SASS語法的sublime text插件。

它的特點有：

可以自動提示CSS、LESS和SASS語法。
有兩個版本：has-Prefix 或 no-Prefix。
智能自動完成。
可以提示偽元素。
可以提示擴展屬性。

語法參考：http://p233.github.io/Emmet-Css-Snippets-for-Sublime-Text-2/

31. Terminal

在當前文件打開終端

32. Vue Syntax Highlight

使vue后綴的代碼文件高亮

33. MarkdownEditing

markdown編輯支持高亮

34. scss

支持scss高亮

Sublime Text 如何關閉自動更新？

點擊菜單欄“Preferences”=> "Settings-User" 進入個人參數設置頁面；在大括號"｛｝"里面插入下面代碼："update_check": false, 保存就行了

Sublime主題

在設置一個新的主題時，需要設置color_scheme和theme兩個方面，前者決定了打開不同類型文件的配色，后者決定了Tab欄，SideBar大小和圖標，以及相應字體的大小設置。

sublime 主題(theme)與配色方案(color_scheme),激活主題，不激活主題，使用的只是配色文字，Sublime Text -> Preferences -> Settings - User

Add (or update) your theme entry to be "theme": "XXX.sublime-theme"

查看已安裝插件

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

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

Disable Package：禁用插件

enable Package：啟用插件

Install Package：安裝插件

List Package：查看已安裝插件列表

Remove Package：移除插件

Upgrade Package：升級插件

移除插件

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

自定義Sublime

Perferences - Settings-Default中是sublime的默認設置，Settings-user是用戶用來自定義設置的，自定義只需復制Settings-Default中的值，粘貼在Settings-User中改變其值就行了，

如復制"line_numbers": true,粘貼在Setttings-User將true改為false保存則行號消失。

側邊欄的顯示與隱藏

剛安裝好的sublime側邊欄是不顯示的，顯示的方法是：View > Side Bar > Show Open Files.

Sublime改變默認字體

sublime text的默認字體是Consolas

改變默認字體: Preferences－Settings－User

如改變字體為微軟雅黑添加："font_face": "Microsoft YaHei",

Sublime中增加格式化代碼的快捷鍵

其實在sublime中已經自建了格式化按鈕：

Edit -> Line -> Reindent

只是sublime並沒有給他賦予快捷鍵，所以只需加上快捷鍵即可

Preference -> Key Bindings -user
中括號內添加(比如添加：ctrl + alt + f)
{ "keys": ["ctrl+alt+f"], "command": "reindent" }

創建可復用的代碼片段

我們在編寫代碼的時候，總會遇到一些需要反復使用的代碼片段。這時候就需要反復的復制和黏貼，大大影響效率。我們利用Sublime Text的snippet功能，就能很好的解決這一問題。通俗的講，就是把我們常用的代碼分別保存起啦，然后通過插件的形式來反復調用。

在菜單上點擊Tools -> New Snippet，會新建一個xml文件頁簽：

這時你會看到如下示例代碼：

<snippet>

      < content > <![CDATA[

Hello, ${1:this} is a ${2:snippet}.

]]> </ content >

      

      

      

      

</ snippet >

content 里面就是代碼模版：${序號：默認值} ，序號相同的地方光標會同時停在那可以多處同時編輯。序號大小就是tabindex。在實際使用代碼的時候，可以使用tab切換光標位置。

tabTrigger是指輸入該字符串后tab就是在光標插入content中的內容。

scope是指在何種文件類型中使用,如 < scope >text.html</ scope

>則定義了僅在html文件中使用，所以此時如果我們打開的是css或其他格式的文件，那將無法插入代碼段。

現在，你應該有了個大致的了解。那我們就開始自己動手編寫一個實例：

<snippet>
<content><![CDATA[
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="author" content="loveyunk" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>${1}</title>
</head>
<body>
Hello, ${2:this} is a ${3:snippet}.
</body>
</html>
]]></content>

<tabTrigger>html5</tabTrigger>


</snippet>

創建完畢以后，保存在\Packages\User目錄下（例 X:\Sublime Text\Data\Packages\User），后綴名 .sublime-snippet。

此時我們打開一個html文件，輸入html5，再按Tab鍵，剛才我們所編寫的代碼段，就插入了進來。並且此時的光標停留在我們所標記的${1}位置處，如果我們再按下Tab，那么光標就跳轉到${2}的位置。this會被選中。

Sublime Text 小技巧

1. 一般推薦下載便攜版本（Portable version），這樣拿來拿去很方便，也不用安裝，而且插件和主體在一個目錄下，便攜。

2. 查找打開過的文件：Ctrl+P，然后輸入最近的文件名通過上下箭頭鍵就可以即時預覽到文件內容。

3. 快速切換語法模式：CTRL+SHIFT+P，輸入JS，回車切換語法模式為JS模式，css回車，則切換為css模式，主要是找到set Syntax：選項

4. 文件嵌套較多時用GoTo Anything（快捷鍵 ctrl + p）來查找,符號功能：css文件中輸入@搜出所有的css，在css中添加屬性可以采用模糊匹配的方法（其中的幾個字母），js中@可以查找函數

5. Ctrl+D ：選擇游標所在單詞，連續Ctrl+D 實現多行選擇（選擇與第一次選擇相同的單詞）Ctrl+K Ctrl+D 跳過當前選擇，選擇下一個，ctrl+D-->Atl+F3全選匹配內容

6. Soda 主題+ Piatto Light 配色方案

7. 按住鼠標中鍵往下拉，可同時進行多行編輯

sublime代碼折疊展開

Ctrl+Shift+[ 折疊代碼
Ctrl+Shift+] 展開代碼

Sublime Text 3快捷鍵

選擇類

Ctrl+D 選中光標所占的文本，繼續操作則會選中下一個相同的文本。
Alt+F3 選中文本按下快捷鍵，即可一次性選擇全部的相同文本進行同時編輯。舉個栗子：快速選中並更改所有相同的變量名、函數名等。
Ctrl+L 選中整行，繼續操作則繼續選擇下一行，效果和 Shift+↓ 效果一樣。
Ctrl+Shift+L 先選中多行，再按下快捷鍵，會在每行行尾插入光標，即可同時編輯這些行。
Ctrl+Shift+M 選擇括號內的內容（繼續選擇父括號）。舉個栗子：快速選中刪除函數中的代碼，重寫函數體代碼或重寫括號內里的內容。
Ctrl+M 光標移動至括號內結束或開始的位置。
Ctrl+Enter 在下一行插入新行。舉個栗子：即使光標不在行尾，也能快速向下插入一行。
Ctrl+Shift+Enter 在上一行插入新行。舉個栗子：即使光標不在行首，也能快速向上插入一行。
Ctrl+Shift+[ 選中代碼，按下快捷鍵，折疊代碼。
Ctrl+Shift+] 選中代碼，按下快捷鍵，展開代碼。
Ctrl+K+0 展開所有折疊代碼。
Ctrl+← 向左單位性地移動光標，快速移動光標。
Ctrl+→ 向右單位性地移動光標，快速移動光標。
shift+↑ 向上選中多行。
shift+↓ 向下選中多行。
Shift+← 向左選中文本。
Shift+→ 向右選中文本。
Ctrl+Shift+← 向左單位性地選中文本。
Ctrl+Shift+→ 向右單位性地選中文本。
Ctrl+Shift+↑ 將光標所在行和上一行代碼互換（將光標所在行插入到上一行之前）。
Ctrl+Shift+↓ 將光標所在行和下一行代碼互換（將光標所在行插入到下一行之后）。
Ctrl+Alt+↑ 向上添加多行光標，可同時編輯多行。
Ctrl+Alt+↓ 向下添加多行光標，可同時編輯多行。

編輯類

Ctrl+J 合並選中的多行代碼為一行。舉個栗子：將多行格式的CSS屬性合並為一行。
Ctrl+Shift+D 復制光標所在整行，插入到下一行。
Tab 向右縮進。
Shift+Tab 向左縮進。
Ctrl+K+K 從光標處開始刪除代碼至行尾。
Ctrl+Shift+K 刪除整行。
Ctrl+/ 注釋單行。
Ctrl+Shift+/ 注釋多行。
Ctrl+K+U 轉換大寫。
Ctrl+K+L 轉換小寫。
Ctrl+Z 撤銷。
Ctrl+Y 恢復撤銷。
Ctrl+U 軟撤銷，感覺和 Gtrl+Z 一樣。
Ctrl+F2 設置書簽
Ctrl+T 左右字母互換。
F6 單詞檢測拼寫

搜索類

Ctrl+F 打開底部搜索框，查找關鍵字。
Ctrl+H 查找與替換。
Ctrl+shift+F 在文件夾內查找，與普通編輯器不同的地方是sublime允許添加多個文件夾進行查找，略高端，未研究。
Ctrl+P 打開搜索框。舉個栗子：1、輸入當前項目中的文件名，快速搜索文件，2、輸入@和關鍵字，查找文件中函數名，3、輸入：和數字，跳轉到文件中該行代碼，4、輸入#和關鍵字，查找變量名。
Ctrl+G 打開搜索框，自動帶：，輸入數字跳轉到該行代碼。舉個栗子：在頁面代碼比較長的文件中快速定位。
Ctrl+R 打開搜索框，自動帶@，輸入關鍵字，查找文件中的函數名。舉個栗子：在函數較多的頁面快速查找某個函數。
Ctrl+：打開搜索框，自動帶#，輸入關鍵字，查找文件中的變量名、屬性名等。
Ctrl+Shift+P 打開命令框。場景栗子：打開命名框，輸入關鍵字，調用sublime text或插件的功能，例如使用package安裝插件。
Esc 退出光標多行選擇，退出搜索框，命令框等。