Sublime Text3 使用總結

時間 2019-11-16

原文原文鏈接

1、簡介：

　　Sublime Text 3是一款強大而精巧的文本編輯器 [點擊下載]。它的界面友好、功能非凡、性能極佳可令代碼高亮、語法提示、自動完成更重要的是，它支持衆多插件擴展——錦上添花、強之又強本文着重介紹Sublime Text 3可助力前端開發的優秀插件。javascript

2、Package Control插件管理

　　提到Sublime Text插件安裝，就不得不提Package Control [官方文檔]，簡而言之，它是用來管理插件的插件，因此，首次使用前也是須要安裝的，使用Ctrl+`（Esc鍵下方）快捷鍵或者經過View->Show Console菜單打開命令行php

將如下代碼複製後粘貼到如上圖中「<代碼粘貼處>」，而後按Enter(回車)，稍等片刻css

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp =

sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) );

open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

若是安裝成功，就能夠在Preferences菜單下看到Package Settings和Package Control兩個菜單。html

最後重啓Sublime Text 3前端

3、安裝soda主題

Soda主題是sublime上一款很著名的清爽型主題，在install package中搜索html5

安裝後打開Preferences -> Settings-User，默認：java

{node

　　"ignored_packages":
　　[
　　"Vintage"
　　]python

}git

添加"theme": "Soda Light3.sublime-theme",

{

"theme": "Soda Light 3.sublime-theme",

"ignored_packages":

[

"Vintage"

]

}

保存後主題立馬更改成soda light

另外還能夠在此處配置一些其餘內容，網上有人推薦以下配置(部分配置需安裝對應插件才能生效)：

{
"caret_extra_bottom": 1, //光標樣式距離下一行設置
"caret_extra_top": 1, //光標樣式距離上一行設置
"caret_extra_width": 3,//光標樣式寬度
"color_scheme": "Packages/User/SublimeLinter/Monokai (SL).tmTheme",
"draw_white_space": "all", //顯示空格字符
"font_size": 11,
"ignored_packages":
[
"Vintage"
],
"theme": "Soda Light 3.sublime-theme", //主題
"word_wrap": true //自動換行
}

4、配置高亮色彩

1. 在Sublime Text中用package control安裝BracketHighlighter；

2. 安裝完成後，打開Preferences-> package settings -> Bracket Highlighter -> Bracket Settings – User，而後添加以下代碼：

{
"bracket_styles": {
"default": {
"icon": "dot",
// "color": "entity.name.class",
"color": "brackethighlighter.default",
"style": "highlight"
},

"unmatched": {
"icon": "question",
"color": "brackethighlighter.unmatched",
"style": "highlight"
},
"curly": {
"icon": "curly_bracket",
"color": "brackethighlighter.curly",
"style": "highlight"
},
"round": {
"icon": "round_bracket",
"color": "brackethighlighter.round",
"style": "highlight"
},
"square": {
"icon": "square_bracket",
"color": "brackethighlighter.square",
"style": "highlight"
},
"angle": {
"icon": "angle_bracket",
"color": "brackethighlighter.angle",
"style": "highlight"
},
"tag": {
"icon": "tag",
"color": "brackethighlighter.tag",
"style": "highlight"
},
"single_quote": {
"icon": "single_quote",
"color": "brackethighlighter.quote",
"style": "highlight"
},
"double_quote": {
"icon": "double_quote",
"color": "brackethighlighter.quote",
"style": "highlight"
},
"regex": {
"icon": "regex",
"color": "brackethighlighter.quote",
"style": "outline"
}
}
}

3. 找到Sublime text3安裝目錄下的Packages中的Color Scheme – Default.sublime-package

默認路徑：C:\Program Files\Sublime Text 3\Packages\Color Scheme – Default.sublime-package

添加後綴名Color Scheme – Default.sublime-package.zip，雙擊此zip文件（注意不要解壓），在壓縮包軟件內找到Monokai.tmTheme（顏色主題），選擇編輯器進行修改

4.Monokai.tmTheme中添加以下代碼：，和裏面的dic標籤t並列排便可。

<dict>
<key>name</key>
<string>Bracket Default</string>
<key>scope</key>
<string>brackethighlighter.default</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#FFFFFF</string>
<key>background</key>
<string>#A6E22E</string>
</dict>
</dict>

<dict>
<key>name</key>
<string>Bracket Unmatched</string>
<key>scope</key>
<string>brackethighlighter.unmatched</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#FFFFFF</string>
<key>background</key>
<string>#FF0000</string>
</dict>
</dict>

<dict>
<key>name</key>
<string>Bracket Curly</string>
<key>scope</key>
<string>brackethighlighter.curly</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#FF00FF</string>
</dict>
</dict>

<dict>
<key>name</key>
<string>Bracket Round</string>
<key>scope</key>
<string>brackethighlighter.round</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#E7FF04</string>
</dict>
</dict>

<dict>
<key>name</key>
<string>Bracket Square</string>
<key>scope</key>
<string>brackethighlighter.square</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#FE4800</string>
</dict>
</dict>

<dict>
<key>name</key>
<string>Bracket Angle</string>
<key>scope</key>
<string>brackethighlighter.angle</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#02F78E</string>
</dict>
</dict>

<dict>
<key>name</key>
<string>Bracket Tag</string>
<key>scope</key>
<string>brackethighlighter.tag</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#FFFFFF</string>
<key>background</key>
<string>#0080FF</string>
</dict>
</dict>

<dict>
<key>name</key>
<string>Bracket Quote</string>
<key>scope</key>
<string>brackethighlighter.quote</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#56FF00</string>
</dict>
</dict>

5. 而後再降修改完成的文件放到壓縮包Color Scheme – Default.sublime-package.zip裏邊，最後更名Color Scheme – Default.sublime-package放回C:\Program Files\Sublime Text 3\Packages中；

效果圖：

5、sublime插件推薦

Emmet插件

Emmet插件能夠說是使用Sublime Text進行前端開發必不可少的插件

它讓編寫HTML代碼變得極其簡單高效

基本用法：輸入標籤簡寫形式，而後按Tab鍵

關於Emmet的更多介紹，請查看官方文檔

這份速查表，能夠幫你快速記憶簡寫形式

JsFormat插件

這是一款將JS格式化的插件

一樣使用Package Control安裝JsFormat插件後

便可在JS文件中經過鼠標右鍵->JsFormat或鍵盤快捷鍵Ctrl+Alt+F對JS進行格式化

使用效果以下圖

SideBarEnhancements插件

SideBarEnhancements是一款很實用的右鍵菜單加強插件

在安裝該插件前，在Sublime Text左側FOLDERS欄中點擊右鍵

只有寥寥幾個簡單的功能

經過Package Control安裝SideBarEnhancements插件後

能夠看到，文件夾欄右鍵菜單立刻加強很多

安裝此插件後配置方法爲

重啓Sublime text 3後

打開任意一個JS文件，按ctrl+shift+space

這時候第一次運行會去下載對應的類庫

能夠按ctrl+`（也就是調出控制檯）來看進度

TrailingSpaces插件

有時候，在代碼結尾打多了幾個空格或Tab

並無任何顯示效果

TrailingSpaces這款插件能高亮顯示多餘的空格和Tab

SublimeCodeIntel

SublimeCodeIntel 做爲一個代碼提示和補全插件，支持 JavaScript、Mason、XBL、XUL、RHTML、SCSS、Python、HTML、Ruby、Python三、XML、Sass、XSLT、Django、HTML5、Perl、CSS、Twig、Less、Smarty、Node.js、Tcl、TemplateToolkit 和 PHP 等全部語言，是 Sublime Text 自帶代碼提示功能基礎上一個更好的擴展，自帶代碼提示功能只可提示系統代碼，而SublimeCodeIntel則能夠提示用戶自定義代碼。SublimeCodeIntel支持跳轉到變量、函數定義的功能，另外還有自動補全的功能，十分方便

CssComb插件

CssComb是爲CSS屬性進行排序和格式化插件 [官網]

使用Package Control安裝CssComb插件後，你可能發現它並不能運行

它依賴於Node.js [官網]

若您的計算機已安裝過NodeJS環境，可跳過此步驟

若您的計算機中還沒有安裝過Node.js環境

應該到Node.js官網中 [下載] 並安裝相應版本的Node.js，以下圖示

安裝NodeJS後，便可使用CssComb插件

使用方法：菜單Tools->Run CSScomb或在CSS文件中按快捷鍵Ctrl+Shift+C

使用前，CSS可能雜亂無章

使用後，CSS屬性按照做用類別出現

還能夠選中一部分CSS代碼進行排序

使用前，選中須要排序的CSS代碼

使用後，選中部分代碼已排好序

美中不足的是，CssComb彷佛不支持IE hark

Autoprefixer插件

這是一款CSS3私有前綴自動補全插件

該插件使用CanIUse資料庫，能精準判斷哪些屬性須要什麼前綴

與CssComb插件同樣，該插件也須要系統已安裝Node.js環境

使用方法：在輸入CSS3屬性後（冒號前）按Tab鍵，以下圖示

Alignment

Aligment插件讓開發者自動對齊代碼，包括PHP、CSS、JavaScript語言。使得代碼看起來更整齊美觀，更具可讀性。

6、sublime快捷鍵

Sublime Text 3很是實用，可是想要用好，一些快捷鍵不可或缺，因此轉了這個快捷鍵彙總。

用慣了vim，有些快捷鍵也懶得用了，尤爲是在win下面，還有圖形界面，因此我的以爲最有用的仍是搜索類，對於閱讀和修改代碼來講，很是實用。

選擇類

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