關於Sublime text3 配置及插件整理

Package Control組件在線安裝

1. 按Ctrl+`調出console（注：避免熱鍵沖突）
2. 粘貼以下代碼到命令行並回車：

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

　3. 重啟Sublime Text 3。

　4. 如果在Perferences->package settings中看到package control這一項，則安裝成功。

用Package Control安裝插件的方法：

 

1. 按下Ctrl+Shift+P調出命令面板
2. 輸入install 調出 Install Package 選項並回車，然后在列表中選中要安裝的插件 

1. ChineseLocalizations

一種讓sublime漢化的插件

2. Emmet（原名 Zen Coding）

一種快速編寫html/css的方法

3. BracketHighlighter

類似於代碼匹配，可以匹配括號，引號等符號內的范圍。

4.Autoprefixer

CSS3 私有前綴自動補全插件，顯然也很有用哇

5.HTML-CSS-JS Prettify

使用說明：快速格式化html css js

快捷鍵：ctrl+shift+h

6.Colorpicker

使用一個取色器改變顏色

快捷鍵：ctrl+shift+c

7.SyncedSidebarBg

自動同步側邊欄底色為編輯窗口底色

8.sideBarEbhancements加強側邊欄

  SideBarEnhancements的GitHub地址為:https://github.com/sidebarenhancements-org/sidebarenhancements ,詳細的英文介紹請看這里。

• SideBarEnhancements安裝

  我這里只講解命令行安裝，因為根本沒有必要進行手動安裝，如果命令行安裝有問題，那么就換一個網絡環境，實在不行用4G的熱點也是可以的，反正至今我沒有遇到過命令行安裝行不通的呢！

  1.用快捷鍵shift + command + P調出命令面板，輸入install，並點擊Intstall Package選項。（如圖_2_1）

  

  圖_2_1

  2.輸入SideBarEnhancements，並點擊SideBarEnhancements選項。（如圖_2_2）

  

  圖_2_2

  3.安裝成功后重啟Sublime，菜單Sublime Text → Preferences → Package Settings （放在），發現多了一項Side Bar，說明已經安裝SideBarEnhancements成功。（如圖_2_3）

  

  圖_2_3

• SideBarEnhancements配置

  右鍵Side Bar中的文件，此時和之前普通的Side Bar比，新增了好多功能（如圖_3_1），有的功能的實現很簡單不需要配置，但有的功能的實現需要配置。下面我針對一個對於Web前段工程師很重要的功能（快速預覽）進行配置。

  

  圖_3_1

  點擊Open/Run選項。則只打開了該文件如圖；若Open In Browser → 右側任意一欄（點擊），則在瀏覽器中預覽。（如圖_3_2）

  

  圖_3_2

  • 設置默認預覽瀏覽器，文件（右鍵單擊） → Open In Browser → Default（點擊）時，會以默認的瀏覽器打開，如果我們想自己設置默認瀏覽器，我們應該進行如下配置：
    ①.菜單Sublime Text → Preferences → Package Settings → Side Bar → Settings User（點擊），則打開了Side Bar.sublime-settings文件。
    ②.復制下面的代碼，粘貼到Side Bar.sublime-settings中，並保存。

    {
    "default_browser": "firefox" //one of this list: firefox, aurora, chrome, canary, chromium, opera, safari
    }

  • 設置瀏覽器預覽的服務器路徑（在安裝過服務器環境的基礎上），當我們需要以服務器路徑預覽網頁時，需要進行如下配置。
    ①.文件（右鍵單擊） → Project → Edit Preview URLS（點擊），則打開SideBarEnhancement.json文件。（如圖3_3）
    ②.復制下面的代碼，粘貼到SideBarEnhancement.json中，並保存。

    *服務器入口的路徑、服務器地址因人而異，不要照搬。另外，json文件中代碼不能加注釋。

    {
    "/Applications/MAMP/htdocs/":{
        "url_testing": "http://localhost:80/",
        "url_production": "http://www.jianshu.com/"
    }
    }

    

    圖3_3

  • 設置用快捷鍵進行快速預覽，當我們需要快速預覽網頁時，需要進行如下配置。
    ①.菜單Sublime Text → Preferences → Key Bindings（點擊），則打開了Defult(OSX).sublime-keymap — User文件。
    ②.復制下面的代碼，粘貼到Defult(OSX).sublime-keymap — User的中括號中，並保存。（如圖3_4）

    { "keys": ["control+1"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "/Applications/Safari.app"} },
    { "keys": ["control+2"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "/Applications/Firefox.app"} }, 
    { "keys": ["control+3"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "/Applications/Google Chrome.app"} },
    { "keys": ["command+1"], "command": "side_bar_open_in_browser", "args": { "paths": [], "type": "testing", "browser": "safari"}  },
    { "keys": ["command+2"], "command": "side_bar_open_in_browser", "args": { "paths": [], "type": "testing", "browser": "firefox"}  },
    { "keys": ["command+3"], "command": "side_bar_open_in_browser", "args": { "paths": [], "type": "testing", "browser": "chrome"}  },

    *control+1/2/3分別對應Safari,Firefox,Chrome瀏覽器，並只打開文件，其中 "application"對應的必須是應用的的路徑。

    *command+1/2/3，同樣也是分別對應Safari,Firefox,Chrome瀏覽器，但是是瀏覽器預覽。

    

    圖_3_4

原文地址：http://whosmall.com/?post=370

                http://blog.csdn.net/littlesmallless/article/details/69488655

                http://www.cnblogs.com/liuchaoH/p/6370008.html