sublime text3 配置插件包記錄

前言：

不少插件已經開始放棄支持ST2了，因此推薦使用ST3，大量的最新插件和最新功能已經再也不支持st2了。

下載地址戳這裏：http://www.sublimetext.com/3

一、全部插件

 

易用性：
Monokai Extended 主題，推薦使用
HTML5，HTML5標籤拓展
Js​Format，javascript格式化
CSS Format，CSS格式化
Tag，HTML格式化
Brackethighlighter，標籤對標記
Side​Bar​Enhancements ，加強型側邊欄
BufferScroll，代碼摺疊狀態保留
StyleToken , 標記顏色代碼

 

功能：
Emmet，前端神器
TortoiseSVN，SVN你懂的
Quote​HTML，把HTML拼接成js插入字符串，神器
Clipboard Manager，加強型剪貼板，可訪問歷史剪貼板記錄
FileHeader，文件模板 , 可自動更新修改時間
AutoPrefixer，瀏覽器私有屬性前綴補全 (Node.js依賴)
ColorConvert，RGBA顏色轉換，十六進制顏色轉換爲RGBA顏色
Better Completion，全能代碼提示
LiveStyle，雙向更改無刷新實時預覽 , 包含chrome插件 Emmet LiveStyle
SFTP , 須要激活 ，看這裏 http://mooring.iteye.com/blog/2067269
*jQuery，jQuery 代碼提示（SublimeCodeIntel已可替代此插件）
*Sass以及SASS Build，使用Sass必備，ctrl+b執行編譯
*yui compressor，JS和CSS壓縮 (JRE依賴)，ctrl+b執行編譯

 

推薦使用面向將來的前端自動化工具（相對成熟的Grunt，以及後起之秀 Gulp ，還有百度 FIE），以上兩個星標插件均可被自動化工具所取代。

 

其餘：
ConvertToUTF8，GBK編碼兼容
IMESupport，輸入法不跟隨時安裝
TrailingSpaces，多餘空格標記，強迫症患者福音
Hasher，符號轉義，ctrl+shift+p 選擇 Entity Encode
PackageResourceViewer，插件修改必備，ctrl+shift+p 調用 Open Resource

二、配置

1）用戶配置

trim_trailing_white_space_on_save，自動移除行尾多餘空格，處女座更安心了。

ensure_newline_at_eof_on_save，文件末尾自動保留一個空行，懂的人天然知道它的用處。

font_face 設置字體。Microsoft YaHei Mono 是一款混合字體，專爲代碼優化，看起來很舒服。固然你也可使用你本身喜歡的字體，或者刪掉本行，使用默認字體。

disable_tab_abbreviations 設置爲 true ，禁用 Emmet 的 tab 鍵功能（請使用 ctrl+e），系統自帶的 tab 功能仍是可圈可點的。固然你也能夠不設置它，以徹底使用 Emmet 的 tab 補全功能。

translate_tabs_to_spaces 很明白就是把代碼 tab 對齊轉換爲空格對齊，tab_size 配合設置空格數。這個需求因人而異了，不喜歡能夠去掉。

draw_minimap_border，用於右側代碼預覽時給所在區域加上邊框，方便識別。

save_on_focus_lost，窗口失焦當即保存文件，嘛嘛不再用擔憂你忘記保存了。

highlight_line，當前行高亮

word_wrap，設置自動換行。

fade_fold_buttons，默認顯示行號右側的代碼段閉合展開三角號。

bold_folder_labels，側邊欄文件夾顯示加粗，區別於文件。

highlight_modified_tabs，高亮未保存文件。

default_line_ending: 「unix」, 使用 unix 風格的換行符。

auto_find_in_selection: true ，開啓選中範圍內搜索（而不是整個文檔

Microsoft YaHei Mono 字體下載 sutep 

2) 默認快捷鍵修改

3)  默認HTML補全修改

ST3自帶了HTML代碼補全機制，前面配置的 disable_tab_abbreviations 禁用了 Emmet 的 tab 功能，只是由於我以爲自帶的HTML補全用起來更順手。我就再也不說一遍固然什麼鬼的了…
ctrl+shift+p，輸入 Open Resource，回車，選擇HTML，回車，選擇 html_completions.py ，回車便可修改。
替換以下內容（也許大約在第170行 ：

 

("a\tTag", "a href=\"javascript:void(0);\">$0</a>"),
("iframe\tTag", "iframe src=\"$1\">$0</iframe>"),
("link\tTag", "link href=\"$1\" rel=\"stylesheet\" type=\"text/css\" />"),
("script\tTag", "script type=\"text/javascript\" src=\"$1\">$0</script>"),
("style\tTag", "style>$0</style>"),
("img\tTag", "img src=\"$1\" alt=\"$2\" />"),
("param\tTag", "param name=\"$1\" value=\"$2\">"),
("br\tTag", "br />"),
("input\tTag", "input type=\"$1\" />")

4)插件修改

而升級ST3後，插件的修改很大程度上依賴於 PackageResourceViewer ，使用 ctrl+shift+p，輸入 Open Resource，回車以查看全部插件目錄，下面的說明就不贅述這個步驟了。自行修改過的插件會在 Packages 文件夾裏自動生成相應的文件。

使用 @keyframes 時 Emmet 的自動前綴並還在…  通過一番谷歌以後，在一篇英文討論帖裏看到 Emmet 的 @keyframes 使用的是 snippets (能夠建立本身的snippets，對於經常使用的代碼很是高效，請自行谷歌）。

Open Resource 選擇 Emmet ，修改 emmet 文件夾裏的 snippets.json 。找到 「@kf」，替換成以下內容：

"@kf": "@keyframes ${1:identifier} {\n\t${2:from} { ${3} }${6}\n\t${4:to} { ${5} }\n}",

　　此後，在 CSS 裏，輸入 @k ，而後 ctrl+e 就能夠生成標準的 @keyframes 代碼塊。後面的事情就交給 AutoPrefixer 了。

5）其餘

一、雙向修改無刷新預覽

除了安裝 LiveStyle 插件，還須要相應的 Chrome 插件 Emmet LiveStyle 。鏈接被重置？ 呵呵，你必定是在逗我，自尋出牆路吧少年。另外，好像還有 Firefox 和 Safari 對應的插件

二、

FileHeader 是一個文件模板插件，能夠定製各類文件模板和文件頭部信息，保存時能夠自動更新文件的修改時間。

FileHeader 的配置文件也都保存在 Packages 文件夾，template 中的 body 對應文件模板，header 對應文件頭部，使用文件對應的格式命名，修改起來很簡單，下面的動態圖示例CSS自動更新文件修改時間。

三、 Side​Bar​Enhancements 

Open With 能夠設置快捷鍵程序打開，好比使用各瀏覽器打開的對應的快捷鍵，自行谷歌。

Edit Preview URLs ，編輯項目路徑及對應URL前綴（好像均不支持中文），用於配置默認打開的域名路徑設置

{
//
    "本地項目路徑":{
        "url_testing":"測試環境地址",
        "url_production":"正式環境地址"
    },
//以上內容刪除，包括本行，下面是示例
    "D:/xampp/htdocs/example/":{
        "url_testing":"http://localhost/example/",
        "url_production":"http://www.baidu.com/example/"
    }
}

　　

這裏的 「type」:」testing」 對應的就是上面的「測試環境地址」。你也能夠指定 「production」 打開「正式環境地址」。

設置完成以後，使用 F12 就能夠在本地測試環境下打開文件，很是方便

 

三、其餘

快捷鍵配置無非兩種。

1. 工具欄 Preferences – key Bindings-User 添加快捷鍵。

2. 直接修改插件配置文件。

方法1，能夠參照 Clipboard Manager 和 AutoPrefixer 配置，最主要的是 command 的值。這個通常能在插件的README 裏找到。不知道 README 在哪？ Open Resource 找到對應插件，你就能看到了。或者去插件的GitHub主頁（若是有的話 …

方法2，以 ConvertToUTF8 插件爲例，它解決了ST3原生不支持中文編碼文件的問題。可是，它有個默認的快捷鍵 ctrl+shift+c 

打開 Packages 文件夾找到插件目錄（不在 Packages 文件夾的插件請用 Open Resource ），能夠看到幾個 .sublime-keymap 的文件，找到對應你所使用操做系統名的文件，用 ST3 打開它 便可