Sublime text配置

一個前端程序猿的Sublime Text3的自我修養

發表於 2015-12-26   |   分類於 前端技術   |   66條評論   |    3823

詳細設置 && 20+插件

本文章會在本人有插件或者設置更新時，進行不定時更新

2015-12-31更新：NO. 21 側邊欄同步編輯窗口底色插件。
2016-04-06更新：代碼片斷：better-completions；主題：Material,Seti_UI；代碼格式化：HTML-CSS-JS Prettify；vue語法高亮：Vue Syntax Highlight；Terminal與MarkdownEditing個性化定製
GitSavvy 、
2016-07-03更新：自定義代碼片斷；livereload：保存自動刷新瀏覽器；WakaTime:記錄你的編程時間

爲何要選擇Sublime Text3？

• Sublime Text3 自動保存，打開圖片
• 跨平臺啓動快!!!!多行遊標，太好用。
• 插件，簡直選不過來。
• 代碼片斷
• VIM兼容模式

菜單欄基礎功能介紹

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

快捷鍵

• line相關：
  • Ctrl+Shift+D：複製當前行
  • Ctrl+Shift+K：刪除當前行
  • Ctrl+j 合併一行
  • Ctrl+Enter：在當前行下添加新行。After
  • Ctrl+Shift+Enter：在當前行上添加新行。Before
  • Ctrl+Shift+上、下：移動當前行
• 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+鼠標右鍵：向下拖動，產生多個光標。

設置

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

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

// User/Preferences.sublime-settings //我以爲自帶字體挺好的。 { "color_scheme": "Packages/Material Theme/schemes/Material-Theme-Darker.tmTheme",//主題， "theme": "Material-Theme-Darker.sublime-theme",//側邊欄樣式，須要安裝該主題纔可使用 "draw_minimap_border": true, // 右側縮略圖邊框 "font_face": "Monaco",//字體 "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：我的對於快捷鍵的設置。一樣會覆蓋默認的設置。例如：

1 2 3 4

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

構建系統實現快捷調用瀏覽器

構建系統可讓您經過外部程序來運行文件，並能夠在Sublime Text查看輸出。

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

1 2 3 4 5

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

以後再進入剛剛的的地方，選擇第一個Automatic，修改內容後按Ctrl+B，能夠看到自動調用chrome而且是修改後的內容。在sublime Text的console中能夠看到輸出的信息。更多功能請查看這裏

上面是一些基礎功能的介紹

2016-07-03 更新：自定義sublime代碼片斷

咱們在開發中有不少代碼是須要重複編寫的，每一次都去複製粘貼顯然是一件效率極其低下的事情，sublime的自定義代碼片斷功能就很好的解決了這個問題。下面就來看一下如何在sublime中自定義代碼片斷

首先在菜單欄選擇：Tools ->developer -> New Snippet能夠看到新建一個xml類型的描述文件，以下：

1 2 3 4 5 6 7 8 9

<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>

註釋已經很是詳細了，content 裏面就是代碼模版：${序號：默認值} ，序號相同的地方光標會同時停在那能夠多處同時編輯。序號大小就是 tabindex。在實際使用代碼的時候，可使用 tab 切換光標位置。

以hexo新建一篇博客頭部爲例：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<snippet> <content> <![CDATA[ title: ${1:標題} date: ${2:2015-12-26 15:26:17} tags: [${3:標籤}] categories: [${4:分類}] ]]> </content> <!-- 可選：快捷鍵，利用Tab自動補全代碼的功能 --> <tabTrigger>hexoH</tabTrigger> <!-- 可選：使用範圍，不填寫表明對全部文件有效。附：source.css和test.html分別對應不一樣文件。 --> <!-- <scope>source.md</scope> --> <!-- 可選：在snippet菜單中的顯示說明（支持中文）。若是不定義，菜單則顯示當前文件的文件名。 --> <description>hexo博客頭部生成</description> </snippet>

設置完畢，最後還差一步，要想代碼片斷生效，還必須保存到sublime的文件目錄\Data\Packages\User，文件名任意，但文件後綴必須爲.sublime-snippet。

如今輸入hexoH試試，你想要的代碼片斷是否是已經有了呢？

插件的安裝與使用

安裝package control。

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

1

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+` 打開控制檯窗口，粘貼上面的代碼，回車，而後就是等待安裝了，須要必定的時間。安裝完成後重啓 。

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

安裝主題

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

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

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

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

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

2016-04-6 更新

安利兩款主題：

兩款主題都有側邊欄圖標顯示：我在這裏說不清到底誰好誰差，全憑我的的喜愛吧！

1. Material：

1. Seti_UI：

安裝方法仍是和上面同樣，最好是根據它的README描述來進行設置。

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

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

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

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

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

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

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

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

配置設置：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

[ { "keys": ["f1"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",//你的瀏覽器路徑 "extensions": ".*" //匹配任何文件類型 } }, { //firefox "keys": ["f2"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "D:\\瀏覽器\\火狐\\firefox.exe", "extensions": ".*" } }, { //ie "keys": ["f3"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "C:\\Program Files\\Internet Explorer\\iexplore.exe", "extensions": ".*" } } ]

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

NO.4 Doc​Blockr：代碼塊註釋。

能夠快速的對函數進行註釋。保持代碼規範。支持多種語言。（我的以爲brackets的這個插件比Sublime Text作得好多了。）

• /*:回車建立一個代碼塊註釋
• /**:回車在自動查找函數中的形參等等。

它會生成 JSDoc 格式的註釋。若是你從沒有使用過相似的工具，DocBlockr 會讓你以爲之前沒有它是如何寫代碼的。幫助你創造你的代碼註釋，經過解析功能，參數，變量，而且自動添加基本項目。

NO.5 SublimeLinter-jshint:語法校驗

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

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

例如：

1 2 3 4

//建議使用===，不使用時會有提示。 { "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：代碼格式化 使用 HTML-CSS-JS Prettify，下面介紹：

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

NO.9 jQuery：jQuery的API代碼片斷

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

$.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.10 BracketHighlighter:符號高亮

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

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

NO.11 JavaScript Next：完美支持ECMAScript 6

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

NO.12 CSS3:CSS3語法高亮

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

NO.13 Color Highlighter ：CSS顏色高亮

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

1 2 3 4

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

效果以下：

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

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

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

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

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

1 2 3 4 5 6 7 8 9

{ // "瀏覽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就能夠打開瀏覽器預覽markdown，而且它們的安裝還會讓編寫markdown時支持一些快捷鍵。

不進行這些配置的話，由於咱們在前面 構建系統 使用了一些操做，按ctrl+b,就會在當前文件目錄下，建立一個同名的html文件。

選中該htnl文件，再次按ctrl+b能夠達到一樣的預覽效果，不過仍是F6簡單不是嗎？

2016-04-06 更新

我知道大家都忍不了那默認的白色背景，醜爆了好嗎？ 如今咱們找到
preference–>package Settings–>MarkdownEditing–>Markdown GFM Settings-users，把下面這個複製進去：

1 2 3

{ "color_scheme": "Packages/Material Theme/schemes/Material-Theme-Darker.tmTheme", }

而後你就會發現世界又回到了春天-。-（這裏使用的我上面介紹的Material）,更多的設置就觸類旁通啦！

NO.16 AutoFileName：文件路徑自動提示

這個直接安裝就能夠用了，挺方便的。

NO.17 Terminal：在Sublime Text直接打開命令行

2016-04-06 更新

默認快捷鍵 Ctrl+Shift+T。

在windows下默認會打開Windows PowerShell，那界面簡直醜到不行好嗎！！

根據上面的經驗一樣找到preference–>package Settings–>Terminal–>Terminal Settings-users：進行下面的設置：

1 2 3 4 5

{ "terminal": "C:\\WINDOWS\\system32\\cmd.exe", //"terminal": "C:\\Program Files\\cmder\\Cmder.exe", "parameters": ["/START", "%CWD%"] }

而後人生就煥發了第二春 -。-（強烈建議你們去搜索使用被我註釋掉的Cmder，這纔是一個shell的樣子嘛！）

NO.18 CSScomb : CSS屬性排序

• 使用參考:點擊查看
• CSS屬性排序 CSScomb 插件配置參數大全

NO.19 JavaScript Completions和Java​Script & Node​JS Snippets。輸入提示，代碼補全

• 看我的喜愛咯，不用代碼補全，能夠鍛鍊英語！！

NO.20 SyncedSidebarBg:自動同步側邊欄底色爲編輯窗口底色。

有人反映說安裝主題後側邊欄顏色不更改，其實有兩個方法，一個在\Data\Packages\主題修改主題配置。

比較麻煩，就不說了，直接安裝這個插件就行了，記得重啓刷新。

2016-04-06 更新

NO.21 HTML-CSS-JS Prettify: HTML-CSS-JavaScript 代碼格式化

其實有了這個代碼格式化插件，就能夠刪除上面的代碼格式化插件了。由於功能確實強大！

• 官網插件配置
• FED社區：sublime text 3 插件：HTML-CSS-JS Prettify

其實我把官網的配置趴下來以後就改了兩個地方：

• "selector_separator_newline": false： 不須要每一個CSS選擇器單獨佔一行
• "allowed_file_extensions": ["..這是老的，新增在-->","vue"],：將vue的組件當成html來進行格式化
• 默認快捷鍵：Ctrl+Shift+H

更多的個性化定製你們本身去實現吧！

NO.22 better-completions: 涵蓋了html, jquery，javascript，Bootstrap的代碼片斷。

• 官網詳細配置;

官網介紹的很詳細。
這個插件要是包含的類型多，固然在每一種語言上的匹配確定是不如上面介紹。不過爲了少按幾個插件，仍是用了它，把上面的幾個代碼片斷插件刪了。
不過它也是支持加載自定義代碼片斷的，若是有須要的話，那就本身編寫吧^_^。

NO.23 liveReload：文件保存瀏覽器即時刷新！

該插件在window下，有不少問題會致使不能使用，mac下能夠正常使用

• 需安裝對應的chrome插件：chrome商店下載，完成後需勾選容許訪問文件網址
• 爲了不每一次啓動實時刷新在sulime裏面啓動一遍插件，可在插件設置中增長以下字段：

1 2 3 4 5 6

{ "enabled_plugins": [ "SimpleReloadPlugin", "SimpleRefresh" ] }

這時就只須要在瀏覽器端點一下小圓圈就行了

其餘：

• SideBar Folders：更好的管理側邊欄文件夾
• IMESupport ：輸入法不跟隨時安裝
• FileHeader ：自動更新保存時間，文件模板
• Quote​HTML ：把HTML拼接成js插入字符串，字符串拼接的痛
• CSS Format ：CSS格式化
• AutoPrefixer ：瀏覽器私有屬性前綴補全 (Node.js依賴)
• ConvertToUTF8：GBK編碼兼容
• Vue Syntax Highlight：vue文件的語法高亮
• WakaTime：記錄你的編程時間
• rem-unit：px單位自動轉rem，移動端開發必備

參考以下：

• 慕課網視頻：前端開發工具技巧介紹—Sublime篇
• 慕課網視頻：快樂的sublime編輯器
• Sublime Text手冊：點擊查看
• Github資源合集jikeytang/sublime-text
• 知乎Sublime Text專題點擊查看