Sublime Text 3私人配置

Sublime Text 3.jpg

sublime介紹、下載與安裝

中文官網：http://www.sublimetext.com/

Sublime Text：一款具有代碼高亮、語法提示、自動完成且反應快速的編輯器軟件，不僅具有華麗的界面，還支持插件擴展機制，用她來寫代碼，絕對是一種享受。

基本操作菜單中英文對照

中文 英文
首選項 Preference
設置 Settings
插件 Preference
按鍵 Keywords
用戶 User

Sublime自身設置

寫在前面：

  • 注意逗號作為分隔符，教程中有的逗號在實際中需要根據具體情況添加**
  • 注意每個配置文件都有自己的格式，需要根據具體情況刪除一部分"{}"、"[]"符號和增加","具體格式可以參考默認的配置文件格式
  • 注意所用的配置文件都應在用戶配置文件中復制修改以覆蓋默認配置

自動保存

失去焦點后會自動保存正在編輯的文本：也就是說，把鼠標點擊到其他程序上，你的文本會自動保存。 打開『首選項』- 「設置-用戶」配置文件，在{ code here }中間添加

{
    "save_on_focus_lost": true,
}

自帶格式化縮進代碼功能

位置在『首選項』-「按鍵綁定-用戶」中, 添加如下代碼，為其設置快捷鍵：Ctrl+Shift+a

[
    {
        "keys": ["ctrl+shift+a"],
        "command": "reindent",
        "args": {
        "single_line": false,
        }
    },
]

光標所在行高亮

在首選項-設置-用戶里面添加

{
    "highlight_line": true,
}

顯示/隱藏行號

Sublime Text 默認是沒有顯示或隱藏行號的快捷鍵，但我們可以自己設置快捷鍵：

比如，把如下設置代碼復制粘貼到『首選項』- 「設置-用戶」打開的配置文件中添加下面這些代碼，這樣你就可以按ALT+L來切換顯示行號了。

[
    {
        "keys": ["alt+l"],
        "command": "toggle_setting",
        "args":{"setting": "line_numbers"}
    },
]

自帶代碼段snippet快速復制

我們在編寫代碼的時候，總會遇到一些需要反復使用的代碼片段。這時候就需要反復的復制和黏貼，大大影響效率。我們利用Sublime Text的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:name}代碼${2}片段
    放在${1:name}這里
    ]]></content>

    <!-- 可選項↓: 設置輸入的文字調用該代碼塊 -->
    <tabTrigger>abcdef</tabTrigger>
    <!-- 下面不用管 -->
    <!-- <scope>source.python</scope> -->
</snippet>

${1:name}表示代碼插入后，光標所停留的位置，可以同時控制多個相同的內容輸入。其中:name為可選自定義參數（即默認的文本）

${2}表示代碼插入后，按Tab鍵，光標會根據順序跳轉到相應位置（以此類推）。（shift+tab向上跳轉）

比如說我自己編寫的一個實例：

<snippet>
   <content>
       <![CDATA[
<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8" />
   <title>${1:this}</title>
</head>

<body>
   <h1>${1:this}</h1>
   <address><span class="original">原創</span><time>${2}</time><span class="author">莫淺北</span><span class="SubscriptionAccounts">未央暮城</span></address>
   <img src="${3}" alt="" class="cover" />
   <div class="foreword">

   </div>
   <div class="content">

   </div>
   <div class="end">

   </div>
</body>
</html>
]]>
</content>
   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
   <tabTrigger>myhtml</tabTrigger>
</snippet>

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

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

snippet+time.gif

補充：除了利用快捷鍵Tab出代碼之外，我們還能通過菜單來加載，打開『工具』-「代碼段」，選擇想使用的代碼段，同樣可以插入

快速插入當前時間

首先，在『工具』-「新插件」，刪除默認，添加下面的代碼。

import datetime
import sublime_plugin
class AddCurrentTimeCommand(sublime_plugin.TextCommand):
    def run(self, edit):
        self.view.run_command("insert_snippet",
            {
                "contents": "%s" % datetime.datetime.now().strftime("%Y-%m-%d")
                #這里的格式可以自行修改"%Y-%m-%d %H:%M:%S"
            }
        )

然后保存為current time.py

設置其快捷鍵

在『工具首選項』-「按鍵綁定-用戶」中添加以下代碼

[
    {
        "keys": ["ctrl+f5"], 
        "command": "add_current_time" 
    },
]

這樣，使用快捷鍵Ctrl+F5就可以插入當前的時間

對于以上的代碼段和插入當前時間插件如果想修改其中的代碼，只要打開源文件修改即可

插件主題相關設置

插件安裝與卸載

流風清音版本的sublime已經集成了一些常用的插件，但在使用過程中需要對這些插件刪除或增加。

插件安裝與卸載類似，首先一次選擇菜單中的『首選項』-「插件控制」，選擇install package或remove package來安裝/卸載插件，插件會自動安裝/卸載。

package control.jpg

主題刪除

在Sublime Text 3安裝路徑\Packages\Color Scheme - Default.sublime-package，復制后將后綴名改為zip，用壓縮軟件打開，刪除其中的主題即可，然后再改回原來的后綴名“sublime-package”即可

主題推薦

blackboard.jpg
dawn.jpg
monokai.jpg
sanakan.jpg
twilight.jpg

利用Emmet插件去快速生成HTML代碼

Emmet是一款Web前端開發工具Sublime非常有用的插件，使用仿CSS選擇器的語法來生成代碼，大大提高了HTML和CSS代碼編寫的速度。只需按住Tab鍵即可把一個簡寫展開成HTML和CSS的代碼塊，如下圖所示，大部分標簽都可自動生成。

emmet基本使用.gif

注意這里需要打開的文件為html格式或在sublime編輯器右下角設置文件格式為html

例如輸入html:5按下Tab鍵即可生成HTML文件完整的結構，但是很多人在安裝完成后輸入html:5然后按住Tab鍵并沒有反應，這是什么原因導致的呢？原來Emmet默認的快捷鍵是Ctrl+E，我們需要將其設置成常用的Tab鍵。

在菜單欄選擇『首選項』-「插件設置」- Emmet - [KeyBindings- User]，將以下信息粘貼進去即可。

[
    {
        "keys": ["tab"],
        "args": {"action": "expand_abbreviation"},
        "command": "run_emmet_action",
        "context": [{"key": "emmet_action_enabled.expand_abbreviation"}]
    },
]

流風清音版本的sublime Text 3不需要此步驟

重啟Sublime Text3此時我們便可以進行代碼補全操作了，在新創建的文件上輸入html:5，按下Tab鍵即可看到如下的代碼。

emmet使用html:5.gif

emmet插件標簽閉合

我們在寫 html代碼的時候會發現，類似 img,link,source,input等單標簽不會閉合，沒有斜杠。這些不符合w3school的嚴格標準。下面我們就來看看如何設置，讓這個斜杠出現。

標簽閉合對比.jpg

選擇菜單欄里的『首選項』-「插件設置」~ Emmet - [settings- User]中添加下面的代碼

{
    "syntaxProfiles": {
        "html": "xhtml","xml": {
            "tag_case": "upper",
            "attr_quotes": "single",
        }
    }
}

利用html-css-js prettify插件代碼格式化

該插件該版本沒有提供，需要自行安裝。安裝方法見前面。

另外，該插件需要依賴nodejs文件，可以到官網下載nodejs文件，

官網：https://nodejs.org/en/download/

nodejs下載.jpg

windows用戶選擇zip格式，然后將其全部解壓到你想應用的文件夾中，比如我的exe文件路徑："E:\Sublime Text 3\node\node.exe"

然后設置該插件的依賴路徑：在『首選項』-「插件設置」- html-css-js prettify - [Plugin Options - User]中添加如下代碼：

{
        "node_path":{
            "windows": "E:/Sublime Text 3/node/node.exe",
            "linux": "/usr/bin/nodejs",
            "osx": "/usr/local/bin/node",
        },
}

用戶配置將合并到最大4行，使文件更加容易分區顯示

{
    "all":{
        // Maximum number of line breaks to be preserved in one chunk (0 disables)
        "max_preserve_newlines": 4,
    }
}

修改默認快捷鍵；

在其插件按鍵設置中添加下面的代碼：

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

忽略元素縮進

如果不想table內的元素換行，可以在其配置文件中添加如下代碼，屏蔽相應標簽的縮進；

{
    "html":{
    //這里增加了忽略縮進的標簽：tr|td|th
        "unformatted": [
            "tr", "th", "td", "a", "span", "img", "code", "pre", "sub", "sup", "em", "strong", "b", "i", "u", "strike", "big", "small", "pre", "h1", "h2", "h3", "h4", "h5", "h6"
         ],
    }
}

這里注意一定在"html":{code here}內

autofilename實現文件路徑提示

在src或href屬性后面自動顯示文件路徑以供選擇

autofilename.gif

如果你的插件無法實現該功能，請卸載后重裝插件即可。

只有保存好文件后才會有相應的提示，因為需要其對于文件的相對路徑

插件快捷鍵沖突

如果插件的快捷鍵沖突，可以到網上搜索哪些插件導致的沖突，然后修改對應插件的快捷鍵。

常用快捷鍵

快捷鍵 操作
Ctrl+N 新建文件
Ctrl+O 打開文件
F11 全屏（不隱藏菜單欄）
Shift+F11 無干擾模式
Alt+Shift+數字 分屏顯示
Alt+數字 切換打開第N個文件
Ctrl+PgUp /PgDn 切換打開上/下文件
鼠標的前進后退鍵 切換已打開的文件
Ctrl+Shift+[ 折疊代碼
Ctrl+Shift+] 展開代碼
Ctrl+K,Ctrl+0 展開所有代碼
Ctrl+G 跳轉到第幾行
Ctrl+W 關閉當前打開文件
Ctrl+Shift+W 關閉所有打開文件
Ctrl+F2 設置書簽
F2 下一個書簽
Shift+F2 上一個書簽
Ctrl+K,Ctrl+B 折疊/展開側邊欄
Ctrl+鼠標滾輪滾動 調整字體大小
Ctrl+S 保存文件
Esc 退出當前操作
按住鼠標滾輪或Shift+鼠標右鍵 矩形選擇
Ctrl+A 全部選擇
Ctrl+Shift+←/→ 進行逐詞選擇
Ctrl+←/→ 逐詞移動
Shift+←/→ 逐詞選中
shift+↑/↓ 選中光標至上/下一行光標的相同位置的所有內容
Ctrl+鼠標左鍵選擇 不連續選擇
Ctrl+鼠標左鍵拖動 復制所選文字到拖動的位置
home /end 行首和行尾（僅應用于當前顯示的行）
Ctrl+L 選擇整行（按住繼續選擇下行）
Ctrl+Shift+L 打散所選行并將光標定位于每行的行尾（此時所選行為選中狀態）
Ctrl+D 選擇當前光標所在的詞/鼠標選擇的詞，再次Ctrl+D選擇該詞出現的下一個位置
Alt+F3 選中所有光標所在的詞/鼠標選擇的詞
Ctrl+M 光標移動至最近的括號內開始或結束的位置
Ctrl+Shift+M 選擇括號內的內容（按住-繼續選擇父括號）
Tab 自動完成縮進
Shift+Tab 去除縮進
Alt+. 閉合當前標簽對
Ctrl+Shift+↑ / ↓ 與上/下行互換
Ctrl+Enter 在當前行下面新增一行然后跳至該行
Ctrl+Shift+Enter 在當前行上面增加一行并跳至該行
Ctrl+Shift+K 刪除整行（為該代碼行的所有文本）
Ctrl+K,Ctrl+Backspace/K 從光標處刪除至行首/尾
Ctrl+Shift+D 復制光標所在整行，插入在該行之前
Ctrl+J 合并為一行（已選擇需要合并的多行時）
Ctrl+K，Ctrl+U 改為大寫
Ctrl+K,Ctrl+L 改為小寫
Ctrl+/ （取消）注釋整行/選中的內容
Ctrl+Shift+/ 注釋已選擇內容
Ctrl+Z 撤銷
Ctrl+Y 恢復撤銷
Ctrl+X 剪切文本
Ctrl+C 復制文本
Ctrl+V 粘貼文本
Ctrl+F 查找
Ctrl+H 替換

快捷鍵自主配置

方式如下：在程序主界面，依次選擇『首選項』-「快捷鍵 - 用戶」打開一個配置文件，在這個配置文件里，輸入代碼，配置快捷鍵

可以在默認快捷鍵中使用查找方法來找到對應的快捷鍵，復制相應命令到用戶快捷鍵配置文件

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。