前臺研發工具Sublime

溝通交流羣 【極客Online : 546653637】　　歡迎您！

 

今天一個朋友@我，問有沒有好的IDE推薦一下，其實如今有不少文本工具可供選擇，像Nodepad++、Editplus之類的，以前我使用Editplus比較多，用了不少年，可能也是習慣了。

後來還用過一段時間的WebStorm，感受也很不錯，再後來就是使用Sublime，喜歡這個工具的緣由主要是乾淨、輕量級、右側縮略圖，還有就是豐富的插件等。

簡單的作一下介紹，包括安裝、基本配置，還有幾個 我的感受必須的插件：

一.下載安裝：

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

　　根據你的平臺（OS、windows仍是Ubuntu），分x64和x86的，仔細看看，下載安裝仍是很簡單的。

二.基本配置

　　Sublime有不少插件，安裝和管理這些插件的必備神器：Package Control [地址：https://packagecontrol.io/installation]

　　這個是必需要安裝的，安裝方式：

　　打開Sublime，經過Menu->View->Show Console打開控制檯（或快捷鍵Ctrl+`)，以下圖：

　　

　　根據本身的版本，選擇下面的內容，直接粘貼在圖中所示的位置，而後回車便可（稍等之後，就能夠安裝完成了）：

>> Sublime Text 2 :

import urllib2,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; 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()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

　　

>>Sublime Text 3:　　

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)

三. 安裝插件

若是以上的步驟都成功了， 那接下來安裝插件就很簡單了。

經過Menu->Preferences->Package Control，打開Package Control管理器（或者快捷鍵：Ctrl+Shift+P）,輸入"IP"，以下圖：

選擇第一個「Package Control:Install Package」，以下圖：

在輸入框內輸入你想要搜索的插件名稱，而後點擊安裝就能夠了，如安裝Html5插件，能夠輸入Html，下面會自動顯示Html5，選擇一個你想要的，就能夠安裝了。

四.幾個小插件

EMMET：

　　你應該早就據說過Zen Coding，沒錯，就是這個東西，能幫助你快速的構建模板和編寫html、js、css代碼，好比你打開一個空白頁，而後輸入：html:5，直接Tab，會自動生成Html5格式的HTML頁面模板。

ConvertToUTF8：

　　若是不安裝這個，有時候顯示的中文會是亂碼，因此也是必需要安裝的

autofilename:

　　文件路徑引導插件

AllAutocomplete:

　　自動補全（在所有文檔搜索）

SublimeCodeIntel：

　　關鍵字自動補全插件

 

DocBlockr：

　　添加註釋助手插件

 

其餘的插件，還有不少，看我的需求，就不一一介紹了。

能夠百度一下，或者看看這幾個地方（有挺可能是重複的）：

http://www.php100.com/html/it/focus/2014/1128/7935.html

http://www.oschina.net/translate/20-powerful-sublimetext-plugins