Sublime的插件介紹

時間 2019-11-17

標籤 sublime 插件介紹简体版

原文原文鏈接

詳細設置 && 20+插件css

爲何要選擇Sublime Text3？html

Sublime Text3 自動保存，打開圖片前端
跨平臺啓動快，多行選擇。git
插件，簡直選不過來。github
代碼片斷ajax
VIM兼容模式chrome

菜單欄基礎功能介紹

File：文檔相關，新建文件,打開文件或文件夾等。npm
Edit：文件編輯相關，複製，剪切等（CVS大法好）。除此以外還有一些強大的功能。json
Selection：選擇相關，幫助選擇代碼。sublime-text
Find：查找替換相關。這個和其它編輯器區別好像不大。
- Ctrl+F查找、Ctrl+H替換等。
View：對Sublime_Text編輯器自己的一些配置。
- SideBar:開啓側邊欄Ctrl+k,b
- Show console：打開控制檯窗口，安裝package control須要使用.
Goto：快捷導航：下面介紹。Goto Anything
tools:工具，一些命令。
- new Snippet：自定義代碼片斷，保存到user下
Project: 項目相關，用的少。
Preferences：對於sublime_text進行一些個性化定值。
Help：如同名字。註冊在這裏

快捷鍵

line相關：
- Ctrl+Shift+D：複製當前行
- Ctrl+Shift+K：刪除當前行
- Ctrl+j 合併一行
- Ctrl+Enter：在當前行下添加新行。After
- Ctrl+Shift+Enter：在當前行上添加新行。Before
Comment註釋：
- Ctrl+/：行註釋。
- Ctrl+Shift+/：塊註釋
Ctrl+Shift+P：調用命令面板，快速查找，例如：改變語法模式等。
- 模糊匹配，能夠減小對快捷鍵的記憶。
Shift+Alt+1，2，3，4，5：開啓對應數字的多欄編輯

`Ctrl+P`：Goto Anything

Ctrl+P: 查找項目中的文件：
- 直接輸入名稱：在不一樣文件中切換，支持級聯的目錄模式
- :：+ 行號：Ctrl+G 定位到具體的行。
- @：+ 符號：Ctrl+R定位到具體的符號，例如：JS函數名，CSS選擇器名。
- #：+ 關鍵字：Ctrl+;匹配到具體的匹配的關鍵字。主要是模糊匹配。

多行遊標

Ctrl+D：選中當前光標所在位置的單詞。連續使用時，進行多光標選擇，選中下一個同名單詞。
Ctrl+K：配合Ctrl+D能夠跳過下一個同名單詞。
Ctrl+L：選擇當前光標所在位置的行。連續使用時，繼續選中下一行。
Ctrl+Shift+L：在多行選中後，在全部選中的行後產生遊標。
Alt+F3：選中文檔中全部的同名單詞。
Shift+鼠標右鍵：向下拖動，產生多個光標。

設置

使用 Ctrl+`調出console面板輸入sublime.log_commands(True)，能夠獲得當前使用的命令面板進行設置的值。方便進行快捷鍵的綁定。

下面這些均可以經過命令面板快捷查找

Settings-User：我的對於sublime_text的定製。使用JSON格式，會直接覆蓋掉Settings-Default默認設置中的內容。

// User/Preferences.sublime-settings
//我以爲自帶字體挺好的。
{
    "color_scheme": "Packages/User/SublimeLinter/Dawn (SL).tmTheme", //主題
    "draw_minimap_border": true, // 右側縮略圖邊框
    "font_size": 10, // 字體大小
    "highlight_line": true, // 當前行標亮
    "save_on_focus_lost": true, // 當前行標亮
    "theme": "Spacegray Eighties.sublime-theme", //主題相關
    "word_separators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?", // 雙擊選中中劃線
    "word_wrap": true, //自動換行
    "trim_trailing_white_space_on_save": true, //自動移除行尾多餘空格
    "ensure_newline_at_eof_on_save": true, //文件末尾自動保留一個空行
    "disable_tab_abbreviations": true, //禁用 Emmet 的 tab 鍵功能（請使用 ctrl+e）
    "translate_tabs_to_spaces": true, //把代碼 tab 對齊轉換爲空格對齊
    "tab_size": 4, //空格數
    "fade_fold_buttons": false, //顯示代碼塊的倒三角
    "bold_folder_labels": true, //側邊欄文件夾加粗
    "auto_find_in_selection": true //開啓選中範圍內搜索
}

key - Bindings-User：我的對於快捷鍵的設置。一樣會覆蓋默認的設置。例如：

//自動改變縮進格式
    { "keys": ["shift+tab"], "command": "reindent","args":{"single_line":false} }

實現保存自動刷新

tools:工具下的Build System選擇新建一個選項後，進行以下設置（注意後綴），保存到user目錄下：

//這樣設置。。地址是你的瀏覽器位置
{
  "cmd" :["C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe","$file"],
  "selector":["text.html"]
}

並且選擇第一個auto，修改內容後按Ctrl+B，能夠看到自動打開了chrome而且是修改後的內容。

插件的安裝與使用

安裝`package control`。

這裏我使用的是sublime_text3， 2的話上官網查詢代碼。
首先打開package control的官方網站。
複製下面這一段代碼:

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; 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)

在上面說的View-->Show console打開控制檯窗口，粘貼上面的代碼，回車，而後就是等待安裝了，須要必定的時間。安裝完成後重啓

使用Ctrl+Shift+P,打開控制面板，輸入PC，效果以下，說明安裝成功了。

安裝主題

按照上面的步驟，打開圖片中的安裝插件就好了，其實默認配色真的挺好看的
推薦在安裝前，先去官方網站查看樣式。的樣式，以及設置方法,說明文檔。通常安裝成功後，會自動彈出。
以Theme - Spacegray爲例：

先使用Ctrl+Shift+P 輸入PCI，回車選擇 Install Package 。須要等待一會加載時間，輸入Theme-Spacegray。其實不輸入完也會模糊匹配出來的。

回車等待安裝就好，成功後會彈出一個使用設置的頁面，把其中的以下代碼拷貝到Settings-User，保存，你會發現，默認的主題已經變成了剛剛咱們查看過的主題了。

"color_scheme": "Packages/Theme - Spacegray/base16-eighties.dark.tmTheme",  
"theme": "Spacegray Eighties.sublime-theme"

固然，你也能夠經過菜單欄，進行主題的選擇。會有相同的效果。它會自動在Settings-User進行設置。

我的經常使用插件及使用方法：

NO.1 `AdvancedNewFile`：快速新建文件。

假設有文件夾file。咱們正在輸入代碼，又想在新的子目錄下新建html文件的話用傳統方式得不少步，新建目錄，新建文件，保存等等等。
可是有了該插件以後，事情就變得簡單了許多，只須要按下Ctrl+Shift+N，輸入文件夾以及文件名，你就會看到以下效果:（回車，你會發現已經子目錄下的文件已經新建完成了！）

NO.2 `Nettuts+ Fetch`：管理類庫。

安裝成功後輸入Ctrl+Shift+P打開命令面板，輸入Fetch，能夠看到如下：

選擇file能夠看到設置的文件。選擇下載
配合剛剛上面的插件使用，簡直完美..

NO.3 `Sidebar Enhancements`：加強側邊欄。

必裝插件，無比強大，就不過多介紹了。能夠在瀏覽器中打開，還能夠配置不一樣文件的打開方式。
單單下面這一個功能就必須安裝了！快捷在不一樣瀏覽器打開：參考：SideBarEnhancements快捷鍵設置

可選SyncedSideBar：每次打開文件，側邊欄都會同步顯示該文件所在目錄樹中的位置

NO.4 `DocBlockr`：代碼塊註釋。

能夠快速的對函數進行註釋。保存代碼規範
支持多種語言。（我的以爲brackets的這個插件比Sublime Text作得好多了。）
/*:回車建立一個代碼塊註釋
/**:回車在自動查找函數中的形參等等。
它會生成 JSDoc 格式的註釋。若是你從沒有使用過相似的工具，DocBlockr 會讓你以爲之前沒有它是如何寫代碼的。幫助你創造你的代碼註釋，經過解析功能，參數，變量，而且自動添加基本項目。

NO.5 `SublimeLinter-jshint`:語法校驗

需先安裝SublimeLinter。
需先安裝Node.JS及npm。
在cmd輸入 npm install -g jshint，等待安裝成功就行了。

安裝成功後，重啓就能夠測試代碼的風格了。
固然還能夠自定義校驗規則，在該目錄下使用Ctrl+Shift+N建立文件.jshintrc，在其中使用JSON格式配置校驗風格。
例如：

//建議使用===，不使用時會有提示。
{
  "eqeqeq":true
}

而且在左下角會有錯誤提示。須要注意的是內容有更改時，纔會當即生效。
詳細自定義規則：自定義Hint校驗

NO.6 `Git` :版本控制

可視化的操做：幫助你與你的Git repo協議進行交互。它支持不少命令像init, push, pull, branch, stash,等等。瞭解更多關於你在Sublime Text裏面究竟能使用哪些Git功能，以提升您的工做流程。
使用參考

GitGutter:
Sublime Text 有了 Git 插件以後，GitGutter 更好的幫助開發者查看文件以前的改動和差別，提高開發效率。

NO.7 `Emmet`：不解釋。

中文文檔：地址
 前端開發必備！Emmet使用手冊

NO.8 `JsFormat`：代碼格式化

JsFormat 基於 JS Beautifier，能夠幫助你自動格式化 JavaScript 和 JSON。這對於閱讀代碼是很是有用的。
快捷鍵：Ctrl + Alt + f 或者，你也可使用菜單欄。
可定製喜歡的格式：在 SublimeText 3 中 Preferences -> Package Settings -> JsFormat -> Settings - Default 能夠調整這些配置。

NO.10 `jQuery`：JQuery的API代碼片斷

我知道目前在不少地方 jQuery 看似已經落伍了，可是若是你不是創建一個交互性很強的網站或者你只是想在已有應用上添加功能，它仍然是很是有用的。

好比，輸入 $.a就可讓我選擇$.ajax()，而後自動擴展成如下代碼：

$.ajax({
  url: '/path/to/file',
  type: 'default GET (Other values: POST)',
  dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
  data: {param1: 'value1'},
})
.done(function() {
  console.log("success");
})
.fail(function() {
  console.log("error");
})
.always(function() {
  console.log("complete");
});

NO.11 `BracketHighlighter`:符號高亮

該插件提供行數列高亮的各類配對的語法符號，顯示在行號上。效果以下：

配置方法參考sublime text3下BracketHighlighter的配置方法

NO.12 `JavaScript Next`：完美支持ECMAScript 6

JavaScript Next 提供了比默認JavaScript Package更好的語法高亮，並且他完美支持ECMAScript 6。
建議徹底使用 JavaScript Next代替JavaScript Package。

NO.13 `CSS3`:CSS3語法高亮

默認安裝的Sublime Text對CSS3的支持讓人抓狂，幀動畫？別開玩笑了你只會看到一片白色的純文本同樣的代碼。
事實上不光CSS3，我建議用CSS3 Package徹底替代原來的CSS Package來完成語法高亮。把原來的禁用了吧

NO.14 `Color Highlighter` ：CSS顏色高亮

這個插件我等了好久了（在使用breakets的時候發現的，好用到爆），我最先用Sublime Text寫CSS時候就在想「這堆顏色碼誰知道是什麼顏色」。。
仍是brackets的牛逼
Color Highlighter這個插件會檢測CSS文件中的顏色碼，不管是Hex碼或者RGB碼都能很好的顯示。
Color Highlighter可以設置成用背景色或者邊框提示顏色，我通常在Settings裏作這樣的設置：

{
  "ha_style": "filled",
  "icons": false
}

效果以下：

NO.15`Colorpicker`：使用一個取色器改變顏色

使用方法: ctrl + shift + c，快捷鍵有衝突，需修改。能夠經過ctrl+shift+p：來搜索調用

NO.16 `Markdown Editing` 和 `Markdown Preview`，實現預覽MD

當在 Sublime Text 中編寫 markdown 文件時，在瀏覽器中打開全是亂碼，由於尚未將 markdown 文件解析成相應的 HTML.
這兩個插件的功能就是能夠用瀏覽器瀏覽 Sublime Text 中編寫的 markdown文件。
配置：

打開 Preferences->Package Settings->Markdown Preview->Setting User 將下面這句話粘貼進去。

{
    // "瀏覽markdown的瀏覽器的路徑"
    "browser" : "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
}
//打開Preferences->Key Binding User，添加下面一句話。
{ "keys": ["f6"], "command": "markdown_preview", "args": {"target": "browser", "parser":"markdown"} },
//keys的值是以上面瀏覽器預覽markdown文件。

直接按F6就能夠打開了

不進行這些配置的話，由於咱們在前面實現保存自動刷新使用了一些操做，按ctrl+b,就會在該目錄下，建立一個同名的html文件。
選中該htnl文件，再次按ctrl+b能夠達到一樣的預覽效果，不過仍是F6簡單不是嗎？