Sublime Text 3安裝配置、快捷鍵和插件使用全參考

1、簡介

關於Sublime的下載安裝，以及經常使用的快捷鍵能夠參考 Sublime Text 全程指引，這篇文件講解的很是詳細，各類經常使用的Sublime的快捷鍵都有Gif動圖顯示。

sublime的一個完整的教程能夠參考 HappySublime

官方文檔參考：https://docs.sublimetext.info/en/latest/index.html

關於打造一個可移植的Sublime，能夠參考文章打造一款便攜版的Sublime Text，不過文章中描述的場景是安裝了Sublime Text後不運行或者已經運行了Sublime但尚未安裝插件。須要補充的是，若是已經運行了Sublime且已經安裝了插件了，其實步驟也相似：

• 點擊菜單欄-Preferences-Browse Packages, 打開找到插件安裝包的位置，即%appdata%/Sublime Text 3/Installed Packages/，拷貝該目錄到其餘位置後，將該目錄刪掉。

• 找到Sublime Text 3的安裝位置，在安裝目錄下新建一個Data 文件夾(注意大小寫)。

• 拷貝插件安裝包目錄%appdata%/Sublime Text 3/下的全部文件夾到安裝目錄的Data文件夾中。

• 刪掉插件安裝目錄%appdata%/ 下面的Sublime Text 3目錄

• 重啓Sublime

 

2、經常使用快捷鍵摘要

sublime全部的默認快捷鍵，見菜單欄-Preferences-Setting Default。

通用（General）

• ↑↓←→：上下左右移動光標，注意不是否是KJHL！

• Alt：調出菜單

• Ctrl + Shift + P：調出命令板（Command Palette）

• Ctrl + `：調出控制檯

• Shift + Delete：刪除一行

• Ctrl + Insert and Shift + Insert ：複製一行並在該行下面插入粘貼。

• 右Ctrl與右win中間的鍵：鼠標右擊快捷菜單

• Ctrl + Shift + ↑↓ ： 兩行上下交換，術語swap_line_up和swap_line_down。

側邊欄(SideBar)

• Ctrl + K/B：顯示/隱藏側邊欄

• Ctrl + 0：聚焦到側邊欄，以後能夠用↑↓←→移動光標，按 Ctrl + 1 回到文本編輯區域。

跳轉（Jumping）

• Ctrl + P：跳轉到指定文件，輸入文件名後能夠：

  • @ 符號跳轉：輸入@symbol跳轉到symbol符號所在的位置，如函數

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

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

• Ctrl + R：跳轉到指定符號@

• Ctrl + ;：跳轉到指定符號#

• Ctrl + G：跳轉到指定行號：

窗口（Window）

• Ctrl + Shift + N：建立一個新窗口

• Ctrl + N：在當前窗口建立一個新標籤

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

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

編輯（Editing）

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

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

• Ctrl + ←/→：進行逐詞移動

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

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

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

選擇（Selecting）

• 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）的內容

查找&替換（Finding&Replacing）

• 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：多文件搜索&替換

屏幕（Screen）

• F11：切換普通全屏

• Shift + F11：切換無干擾全屏

• Alt + Shift + 2：進行左右分屏

• Alt + Shift + 8：進行上下分屏

• Alt + Shift + 5：進行上下左右分屏

• 分屏以後，使用Ctrl + 數字鍵跳轉到指定屏，使用Ctrl + Shift + 數字鍵將當前屏移動到指定屏

 

3、個人Sublime Text 3自定義配置

3.1 Setting-user

配置信息以下：

{
    "color_scheme": "Packages/User/SublimeLinter/Monokai (SL).tmTheme",
    "ignored_packages":
    [
        "Python",
        "Vintage"
    ],
    "font_size": 12,
    // 使光標閃動更加柔和
    "caret_style": "phase",
    // 高亮當前行
    "highlight_line": true,
    // 高亮有修改的標籤
    "highlight_modified_tabs": true,
    // 設置tab的大小爲4
    "tab_size": 4,
    // 使用空格代替tab
    "translate_tabs_to_spaces": true,
    // 顯示空白字符
    //"draw_white_space": "all",
    // 保存時自動去除行末空白
    "trim_trailing_white_space_on_save": true,
    // 保存時自動增長文件末尾換行
    "ensure_newline_at_eof_on_save": true

}

 

4、插件

個人一個前端插件集合

Emmet

詳細使用教程參考使用Emmet加速Web前端開發 和 emmet官方快捷鍵一覽

HTML-CSS-JS Prettify

詳細使用教程參考

SublimeREPL or Anaconda

詳細使用教程參考

HTML5

詳細使用參考

BrecketHighlighter

詳細使用參考

Git

詳細使用參考

C improved

詳細使用參考

ConvertToUTF8

詳細使用參考

IMESupport

詳細使用參考

Theam-Phoenix

詳細使用參考

SideBarEnhancements

詳細使用參考

SublimeCodeIntel

詳細使用參考 https://packagecontrol.io/packages/SublimeCodeIntel

SublimeLinter

用於高亮提示用戶編寫的代碼中存在的不規範和錯誤的寫法.

中文教程參考藉助 SublimeLinter 編寫高質量的 JavaScript & CSS 代碼

官方Doc見 Welcome to SublimeLinter 3

Nodejs

詳細使用參考

AngularJS

詳細使用參考

AngularJS Snippets

詳細使用參考

JQuery

詳細使用

JQuery Snippets pack

詳細使用

JQueryDocs

詳細使用教程參考

Bootstrap 3 Snippets

詳細使用教程參考

OmniMarkupPreviewer

詳細使用教程參考 http://blog.leanote.com/post/54bfa17b8404f03097000000

5、添加到右鍵菜單

Windows環境下配置右擊菜單

1. 在SublimeText3的安裝目錄，新建一個sublime_addright.inf的文件（重命名文件以前，須要先在工具--文件夾選項中，把隱藏已知文件類型的擴展名前邊的複選框不勾選）

2.打開sublime_addright.inf文件，拷貝以下代碼

[Version]
Signature="$Windows NT$"
 
[DefaultInstall]
AddReg=SublimeText3
 
[SublimeText3]
hkcr,"*\\shell\\SublimeText3",,,"用 SublimeText3 打開"
hkcr,"*\\shell\\SublimeText3\\command",,,"""%1%\sublime_text.exe"" ""%%1"" %%*"
hkcr,"Directory\shell\SublimeText3",,,"用 SublimeText3 打開"
hkcr,"*\\shell\\SublimeText3","Icon",0x20000,"%1%\sublime_text.exe, 0"
hkcr,"Directory\shell\SublimeText3\command",,,"""%1%\sublime_text.exe"" ""%%1"""

3. 右擊 sublime_addright.inf文件，選擇"安裝"便可安裝。

Windows環境下刪除右擊菜單

把如下代碼，複製到SublimeText3的安裝目錄，而後重命名爲：sublime_delright.reg，而後雙擊就能夠了。

PS:須要把裏邊的Sublime的安裝目錄，替換成實際的Sublime安裝目錄。

Windows Registry Editor Version 5.00
[-HKEY_CLASSES_ROOT\*\shell\SublimeText3]
[-HKEY_CLASSES_ROOT\Directory\shell\SublimeText3]

6、Vim模式

菜單欄中Preferences -> Setting - User 打開配置文件進行編輯，將 ignored_packages 項的["Vintage"]裏面內容清空：

"ignored_packages":[]

便可啓用 Vim 模式，按 Esc 退出編輯模式，便進入 Vim 模式。

Sublime 的vim 模式快捷鍵說明請查看 http://feliving.github.io/Sublime-Text-3-Documentation/vintage.html

Vi(Vim)鍵盤圖及其基本命令http://www.linuxidc.com/Linux/2015-07/119992.htm

7、Code Snippet

Snippet就是把咱們經常使用的代碼分別保存起，而後經過插件的形式來反覆調用。

建立方法：菜單欄中Tools > New Snippet

<snippet>
	<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<!-- <tabTrigger>hello</tabTrigger> -->
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<!-- <scope>source.python</scope> -->
</snippet>

而後咱們按住以下修改：

<snippet>
    <content>
        <![CDATA[
[${1:Display_Text}](${2:http://example.com/} ${3:"$2"})
]]>
    </content>
    <tabTrigger>mdlink</tabTrigger>
    <scope>text.html.markdown.multimarkdown, text.html.markdown</scope>
    <description>Insert Link</description>
</snippet>

建立完畢之後，按要求保存在\Packages\User目錄下，給snippet命名爲mdlink.sublime-snippet。

使用snippet的方法，輸入相應的‘tabTrigger‘即mdlink，而後按Tab鍵便可。

詳細方法見==> 手把手教你寫Sublime中的Snippet：http://www.jianshu.com/p/356bd7b2ea8e

參考&引用

• 《Sublime Text 全程指引》

• 官方文檔 https://docs.sublimetext.info/en/latest/index.html

• 視頻教程: 前端開發工具技巧介紹—Sublime篇

• SegmentFault中的資源

• Sublime Text的官網

• Package Control的官網

• 打造一款便攜版的Sublime Text

• 使用Emmet加速Web前端開發

• emmet官方快捷鍵一覽