Sublime Text使用配置介紹

這篇文章不少內容都是來源自網絡,發佈這裏看成本身留個底,之後不用處處去找

對於文本編輯器，我用過notepad二、notepad++、Editplus、UltraEdit、Vim、TextPad，都沒有以爲哪一款編輯器用得很是上手，直到遇到Sublime Text,它不單能簡單的編輯文本文件,在下載了相應插件後html,css,javascript,nodejs,python,php甚至於java和C#都能進行快速編寫。今天就來說一下如何將Sublime Text打形成一款好用的IDE，雖然它只是一款編輯器，可是它有豐富的擴展插件，足以讓咱們把它變成好用的IDE。

一.下載和安裝

下載以前首先要說明的是先sublime text有兩個版本 sublime text 2和sublime text 3,這兩個版本在文件位置,安裝插件等不少地方都不兼容,因此事先選擇好你要下載的版本,反正我是兩個都裝了…

Sublime Text是一款開源的軟件，不須要註冊便可使用（雖然沒有註冊會有彈窗，可是基本不影響使用）.下載地址：sublime text，請自行根據系統版本進行下載。下載好以後直接安裝便可。

二.一些必備的插件

再次強調…2和3一些插件的版本並不兼容,或者說一些插件2支持,3並不支持,或者3支持,2並不支持

下面來介紹一些Sublime Text中必備的經常使用插件。

Sublime Text 安裝的插件和全部預置的插件所有在Packages文件下，能夠直接經過」preferences「—>」Browse Pakcages「來訪問。

Sublime Text 2安裝插件有兩種方法：

簡單的安裝方法：

從菜單 View - Show Console 或者 ctrl + ~ 快捷鍵，調出 console。將如下 Python 代碼粘貼進去並 enter 執行，不出意外即完成安裝。如下提供 ST3 和 ST2 的安裝代碼：

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

手動安裝：

可能因爲各類緣由，沒法使用代碼安裝，那能夠經過如下步驟手動安裝Package Control：

1.點擊Preferences > Browse Packages菜單

2.進入打開的目錄的上層目錄，而後再進入Installed Packages/目錄

3.下載 Package Control.sublime-package 並複製到Installed Packages/目錄

4.重啓Sublime Text。

Package Control 主文件下載地址：https://github.com/wbond/sublime_package_control 

用Package Control安裝插件的方法：

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

或者也能夠菜單欄選擇 Preferences->Package Control彈出插件管理面板,選擇Install Package

下面就是我經常使用到的一些插件

ConvertToUTF8 (GBK Encoding Support)

最好先安裝GBK Encoding Support 再安裝 ConvertToUTF8

解決Sublime不支持GBK、GB2312編碼的問題，支持Sublime打開GB2312編碼的文件並提供其輸入並編輯中文，在打開GB2312文件後會將其轉換爲UTF8編碼（這不會修改原始文件編碼），對於輸入和編輯的中文字符在使用Sublime保存後好像會將其轉換爲原始編碼後再進行保存。

Emmet

這個不用多說,前端開發人員必備插件,不少IDE工具都集成了這項功能.試試在html中輸入下面一段代碼以後按tab鍵

div#container>div.logo+ul.nav>li.item$*5>a{item $}

就能直接生成下面的html代碼

<div id="container">
        <div class="logo"></div>
        <ul class="nav">
            <li class="item1"><a href="">item 1</a></li>
            <li class="item2"><a href="">item 2</a></li>
            <li class="item3"><a href="">item 3</a></li>
            <li class="item4"><a href="">item 4</a></li>
            <li class="item5"><a href="">item 5</a></li>
        </ul>
    </div>

若是不是太清楚的,能夠直接查看(前端開發必備！Emmet使用手冊)這一篇博客

DocBlockr

若是你遵循的編碼的風格很嚴格，這款插件可以使你的任務更容易。DocBlokr 幫助你創造你的代碼註釋，經過解析功能，參數，變量，而且自動添加基本項目。

Markdown Preview & Markdown Editing

一看這兩個插件的名字就知道,能夠支持markdown文件的預覽了編寫,稍微注意的是,沒有直接的快捷鍵支持Markdown預覽,須要使用ctrl + alt + p 彈出插件管理界面,而後在界面上輸入 markdown就能直接找到和markdown相關的操做了

JS Format

一個JS代碼格式化插件。

Bracket Highlighter

高亮代碼匹配，能夠匹配括號，引號，標籤等各類

SublimeLinter

注意：此插件須要手動安裝並切換到 sublime-text-3 分支。

SublimeLinter 是一個代碼校驗插件，它能夠幫你找出錯誤或編寫不規範的代碼，支持 C/C++、CoffeeScript、CSS、Git Commit Messages、Haml、HTML、Java、JavaScript、Lua、Objective-J、Perl、PHP、Puppet、Python、Ruby 和 XML 語言。

SublimeCodeIntel

SublimeCodeIntel 是一個代碼提示、補全插件，支持 JavaScript、Mason、XBL、XUL、RHTML、SCSS、Python、HTML、Ruby、Python三、XML、Sass、XSLT、Django、HTML五、Perl、CSS、Twig、Less、Smarty、Node.js、Tcl、TemplateToolkit 和 PHP 等語言，是 Sublime Text 自帶代碼提示功能的很好擴展。它還有一個功能就是跳轉到變量、函數定義的地方，十分方便

Nodejs

Nodejs語言支持,前提固然是你已經安裝了nodejs

SublimeText2-安裝Nodejs

這個安裝稍微麻煩一點,首先下載nidejs插件包（https://github.com/tanepiper/SublimeText-Nodejs）

1.直接下載壓縮包後解壓到sublime text的package目錄中。查看package目錄在哪能夠經過菜單欄中的Preferences–>瀏覽程序包Browse Packages直接打開package目錄。 2.將解壓縮文件夾名字稍微改簡短一點,解壓縮以後文件名應該是SublimeText-Nodejs-master能夠將其改成Nodejs 3.修改編譯選項，在package目錄下的Nodejs目錄中，打開Nodejs.sublime-build,將其改成下面這樣:

{ "cmd": ["node", "$file"], "file_regex": "^[ ]*File \"(...*?)\", line ([0-9]*)", "selector": "source.js", "shell":true, "encoding": "cp936", "windows": { "cmd": ["taskkill","/F", "/IM", "node.exe","&","node", "$file"] }, "linux": { "cmd": ["killall node; node", "$file"] } }

其實就修改了兩處地方。 a.一個是編碼，爲了不亂碼code，須要改爲cp936； b.另一個是cmd命令，自己若是隻是想簡單的運行nodejs程序的話，windows下面的cmd能夠直接 「cmd」: [「node」, 「$file」]，可是這樣很是不利於開發環境，由於這樣的話每次build都會從新啓動一個node.exe進程，且會佔用一個端口，這確定是咱們不但願的。上文中的cmd本來是想在啓動node.exe以前講node.exe進程都殺掉，而後再啓動node.exe，可是這個命令寫的不對，直接使用的話是編譯不成功的。對cmd命令須要作簡單的處理

3.重啓sublime text以後，配置就算完成了。

直接編寫一個js文件,使用快捷鍵 ctrl + b就能直接運行了

sublime text 3使用nodejs

sublime text 3已經預裝了nodejs插件

打開Sublime Text編輯器，點擊「Tools —> Build System —> New Build System」， { 「cmd」 : [「node」,」$file」] }

將以上代碼另存爲JavaScript.sublime，而後點擊」Tools —> Build System「，咱們就能夠看到Build System中多了一項」JavaScript「。選中」JavaScript」爲Build System。 

配置好之後，咱們就能夠在Sublime Text中，按快捷鍵Ctrl+B直接運行JavaScript代碼。

其餘的插件都很簡單了…通常直接下載下來就能使用,還有不少,好比HTML Beautiful,Alignment,SideBarEnhancements,jQuery插件,angularJS插件等等…這些你們在百度上搜索常見的sublime text 插件,而後在Package Control中自行搜索相關的插件就好了

配置

sublime還能自定義界面外觀,並且能夠直接下載一些界面主題,固然還能調整字體大小等等.

點擊preferences－setting user，我的設置以下：

{ //字體大小 "font_size": 14.0, //字體類型(此字體需下載) "font_face": "YaHei Consolas Hybrid", //界面樣式 "theme": "Soda Dark 3.sublime-theme", //界面顏色樣式 "color_scheme": "Packages/User/glacier (SL).tmTheme", // 設置每一行到頂部，以像素爲單位的間距，效果至關於行距 "line_padding_top": 2, // 設置每一行到底部，以像素爲單位的間距，效果至關於行距 "line_padding_bottom": 2, // html和xml下突出顯示光標所在標籤的兩端，影響HTML、XML、CSS等 "match_tags": true, // 是否顯示代碼摺疊按鈕 "fold_buttons": true, // 代碼提示 "auto_complete": true, // 默認編碼格式 "default_encoding": "UTF-8", // 左邊邊欄文件夾動畫 "tree_animation_enabled": true, //刪除你想要忽略的插件 "ignored_packages": [ "Vintage", "YUI Compressor" ] }

Theme – Soda

Soda Theme 是最受歡迎的 Sublime Text 主題。

安裝後你還須要在你的配置文件（菜單 Preferences -> Settings - User）中加入」theme」: 「Soda Light.sublime-theme」 或 「theme」: 「Soda Dark.sublime-theme」。要達到圖中的效果，你還須要下載與之搭配的 color scheme。