sublime前端開發經常使用插件

爲了方便安裝其餘插件，首先安裝Package Control，安裝方法以下

Sublime Text 2:

import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

Sublime Text 3：

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

將上面代碼在sublime view -- show console( ctrl + ` )便可成功安裝[快捷鍵可能會被佔用]

通常狀況下，插件均可以知足正常使用的需求，少數默認操做可能不符合本身的習慣，能夠經過 菜單 -- Preferences -- Browse Packages打開對應的安裝包，進行配置。

1.HTML-CSS-JS Prettify[依賴nodejs]
對HTML CSS JS 進行美化
安裝完成後，還要對插件進行設置：
右鍵點擊sublime -- HTML CSS JS Prettify -- Set plugin option，將設置裏的nodejs路徑填寫正確便可開始使用，使用方法：
control+shift+h

2.autofilename
填寫背景圖片路徑，圖片路徑，引用JS，CSS等行爲時，能夠提示路徑。

3.Inc Dec Value
增長或減小數字，日期,和十六進制顏色。
將光標放置到須要調整的數值的中間或者兩邊，按住alt，將光標放置到須要調整的數值的中間或者兩邊，經過上下鍵或者鼠標滾輪加大或者減少數值

4.emmet
快速生成想要的代碼，輸入基礎代碼，而後按tab
示例
基礎代碼：!
生成：HTML

基礎代碼：ul.className>.liClassName
生成：

<ul class="className">
        <li class="liClassName"></li>
    </ul>

基礎代碼：a.className[data-key="value"]{連接文本}
生成：

<a href="" class="className" data-key="value"></a>

基礎代碼：input:button[value=肯定]
生成：

<input type="button" value="肯定">

基礎代碼：div.className*3
生成：

<div class="className"></div>
<div class="className"></div>
<div class="className"></div>

舉一反三，以上三個例子包含了類型，屬性，文本數量，能夠自行組合

6.autoprefixer
自動補全樣式前綴，安裝成功後須要進行快捷鍵配置
Preferences -- Key Bindings – User
添加代碼

[
    { "keys": ["ctrl+alt+shift+p"], "command": "autoprefixer" }
]

而後根據本身設置的快捷鍵進行修改。

再對須要兼容的版本進行設置
Preferences -- Package Settings -- Autoprefixer -- Settings - User
進行以下設置。

{
    "browsers": ["last 1 version"]
}

以上僅僅是舉例，具體適配內容根據下面內容自行設置

last 2 versions    每個主要瀏覽器的最後2個版本
last 2 Chrome versions    谷歌瀏覽器的最後兩個版本
> 5%    市場佔有量大於5%
> 5% in US    美國市場佔有量大於5%
ie 6-8    ie瀏覽器6-8
Firefox > 20    火狐版本>20
Firefox >= 20    火狐版本>=20
Firefox < 20    火狐<20
Firefox <= 20    火狐<=20
iOS 7    指定IOS 7瀏覽器