為什么要選擇Sublime Text3？

為什么要選擇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中可以看到輸出的信息。更多功能請查看這里

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

插件的安裝與使用

安裝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.10 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.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里做這樣的設置：

1 2 3 4

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

效果如下：

 

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

使用方法: ctrl + shift + c，快捷鍵有沖突，需修改。可以通過ctrl+shift+p：搜索Colorpicker調用

 

NO.16 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.17AutoFileName：文件路徑自動提示

這個直接安裝就可以用了，挺方便的。

NO.18 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.19 CSScomb : CSS屬性排序

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

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

• 看個人喜好咯，不用代碼補全，可以鍛煉英語！！

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

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

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

2016-04-06 更新

NO.22 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.23 better-completions: 涵蓋了html, jquery，javascript，Bootstrap的代碼片段。

• 官網詳細配置;

官網介紹的很詳細。
這個插件要是包含的類型多，當然在每一種語言上的匹配肯定是不如上面介紹。不過為了少按幾個插件，還是用了它，把上面的幾個代碼片段插件刪了。
不過它也是支持加載自定義代碼片段的，如果有需要的話，那就自己編寫吧^_^。

圖片查看

                ImagePaste 

其他：

• liveReload：瀏覽器即時刷新！（這里有很多坑，以后填吧）
• IMESupport ：輸入法不跟隨時安裝
• FileHeader ：自動更新保存時間，文件模板
• Quote​HTML ：把HTML拼接成js插入字符串
• CSS Format ：CSS格式化
• AutoPrefixer ：瀏覽器私有屬性前綴補全 (Node.js依賴)
• ConvertToUTF8：GBK編碼兼容
• Vue Syntax Highlight：vue文件的語法高亮