開發者經常使用的 Sublime Text 3 插件



一、官網下載 Sublime Text 3 (已有安裝包的,請忽略)
Sublime Text 官網下載地址 : http://www.sublimetext.com/ 二、打開 Sublime Text 3 --> help --> Enter License 三、百度註冊碼 !!! 下面提供一個 —– BEGIN LICENSE —– TwitterInc 200 User License EA7E-890007 1D77F72E 390CDD93 4DCBA022 FAF60790 61AA12C0 A37081C5 D0316412 4584D136 94D7F7D4 95BC8C1C 527DA828 560BB037 D1EDDD8C AE7B379F 50C9D69D B35179EF 2FE898C4 8E4277A8 555CE714 E1FB0E43 D5D52613 C3D12E98 BC49967F 7652EED2 9D2D2E61 67610860 6D338B72 5CF95C69 E36B85CC 84991F19 7575D828 470A92AB —— END LICENSE —— 四、安裝 Sublime Text 3插件的方法: 直接安裝 : 安裝Sublime text 2插件很方便,能夠直接下載安裝包解壓縮到Packages目錄(菜單->preferences->packages)。 使用Package Control組件安裝 : 也能夠安裝package control組件,而後直接在線安裝: 按Ctrl+`調出console(注:安裝有QQ輸入法的這個快捷鍵會有衝突的,輸入法屬性設置-輸入法管理-取消熱鍵切換至QQ拼音) 粘貼如下代碼到底部命令行並回車: 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()) 若是順利的話,此時就能夠在Preferences菜單下看到Package Settings和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') 手動安裝 可能因爲各類緣由,沒法使用代碼安裝,那能夠經過如下步驟手動安裝Package Control: 1.點擊Preferences > Browse Packages菜單 2.進入打開的目錄的上層目錄,而後再進入Installed Packages/目錄 3.下載Package Control.sublime-package並複製到Installed Packages/目錄 4.重啓Sublime Text 3。 用Package Control安裝插件的方法: 一、按下 Ctrl+Shift+P 調出命令面板 二、輸入install 調出 Install Package 選項並回車,而後在列表中選中要安裝的插件. ( Preferences --> Package Control -->install package --> 輸入插件名(包名)) 不爽的是,有的網絡環境可能會不容許訪問陌生的網絡環境從而設置一道防火牆,而Sublime Text 2貌似沒法設置代理,可能就獲取不到安裝包列表了。反正我用 Sublime Text 3 尚未出現過這種狀況啦,我的仍是建議用 Sublime Text 3 。 好,方法介紹完了,下面是本文正題,一些開發經常使用的 Sublime Text 3 插件: · Emmet Emmet的前身是大名鼎鼎的Zen coding,若是你從事Web前端開發的話,對該插件必定不會陌生。它使用仿CSS選擇器的語法來生成代碼,大大提升了HTML/CSS代碼編寫的速度。不知道ZenCoding的同窗強烈推薦去看一下:《Zen Coding: 一種快速編寫HTML/CSS代碼的方法》。 PS: Zen Coding for Sublime Text 2插件的開發者已經中止了在Github上共享了,如今只有經過Package Control來安裝。 · SublimeCodeIntel 代碼自動提示,一個全功能的 Sublime Text 代碼自動完成引擎 ,支持的語言挺多的(JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, Sass, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP.) · Alignment 用於代碼格式的自動對齊,等號對齊(Ctrl+Alt+A)。Sublime Text 3 已經集成。只須要經過Package Control來安裝就可。 快捷鍵會有衝突 從新在Alignment > Key Bindings – User 配置快捷鍵 ctrl+alt+f · SublimeLinter 代碼校驗插件,支持多種語言,這個是主插件,若是想檢測特定的文件須要單獨下載,一個支持linter語法的插件,能夠高亮linter認爲有錯誤的代碼行,也支持高亮一些特別的註釋,好比「TODO」,這樣就能夠被快速定位。 · SideBarEnhancements 側邊欄右鍵增效插件,提升頁面處理速度,加強右鍵菜單文件操做功能 。 · All Autocomplete Sublime Text 默認的 Autocomplete 功能只考慮當前的文件,而 All Autocomplete 插件會搜索全部打開的文件來尋找匹配的提示詞。 · AutoFileName    自動提示路徑插件,快速幫助你在文件中寫路徑,總體來講這個插件還不錯。 · HTML5 Sublime Text 3 支持 HTML5 · Sass Sublime Text 3 支持 Sass · Less Sublime Text 3 支持 Less ·SublimeTmpl 使用: 菜單欄, File-New File (SublimeTmpl), 選擇列表裏的相應菜單, 可直接使用模版新建文件。 默認快捷鍵: ctrl+alt+h --> html ctrl+alt+j --> javascript ctrl+alt+c --> css ctrl+alt+p--> php ctrl+alt+r--> ruby ctrl+alt++shift+p --> python 關閉默認快捷鍵: Package Settings > SublimeTmpl > Settings - User, 增長disabled_keymap_actions配置: "disabled_keymap_actions": "html, css" // 關閉html/css語法的快捷鍵(多個逗號分隔) "disabled_keymap_actions: "all" //關閉全部語法快捷鍵 · BracketHighlighter 配置文件的高亮設置,讓你的代碼有不一樣的顏色區分,該插件提供配對標籤,或大括號或字符引號的配對高亮顯示,算是對系統高亮的增強吧。相似於代碼匹配,能夠匹配括號,引號等符號內的範圍。成對匹配加強,並修改括號等的顏色。 · jQuery Sublime Text 3 支持jQuery,若是你離不開jQuery的話,這個是必備的 · DocBlockr 快速註釋,DocBlockr很好用,不只僅能夠自動生成註釋,還能夠手動編輯註釋的格式。 DocBlockr自定義配置: Preference -> Package Settings -> DocBlockr -> Settings - User 配置成以下內容: { "jsdocs_extra_tags":[ "@Author Hybrid", "@DateTime {{date}}", "@copyright ${1:[copyright]}", "@license ${1:[license]}", "@version ${1:[version]}" ], "jsdocs_function_description": false } · DetectSyntax 這是一個語法識別、代碼檢測插件。 · Autoprefixer 這個插件主要應用css的瀏覽器兼容書寫,自動分析你的css文件,解析出新的css文件,能夠配置你要兼容的瀏覽器,不過這個插件要在以前安裝nodejs。 · BufferScroll 你能夠輕鬆書寫一個文件多個位置,之後須要多個文件一塊兒改一樣的代碼時就能夠用這個,提升寫代碼的速率。 · ChineseLocalizations 各國的語言包都有哦,漢化 Sublime Text 3. · Color Highlighter 顏色功能,提示當前是什麼顏色。會直接在代碼上顯示出來。 · ColorPicker 調色盤,顏色獲取。 · JsFormat js序列化插件 · CSS Format css序列化插件,支持默認多種序列方案,還可自定義配置。 · CSS3 css3語言提示插件 · HTML-CSS-JS Prettify 全能序列化 · JavaScript Completions js最基本的api快查片斷 · Keymaps 快速查找全部插件的快捷鍵 · LiveStyle LiveStyle是Chrome中提升開發效率的一款CSS編輯器插件。 · Placeholders 故名思意,佔位用,包括一些佔位文字和HTML代碼片斷,實用。 · Clipboard History 粘貼板歷史記錄,方便使用複製/剪切的內容。 · Nettuts Fetch Nettuts Fetch可讓你設置一些須要同步的文件列表,而後保存更新。 · JsMinifier 該插件基於Google Closure compiler,自動壓縮js文件。 · CSScomb CSS屬性排序 · YUI Compressor 壓縮JS和CSS文件 · Hex to HSL 自動轉換顏色值,從16進制到HSL格式,快捷鍵 Ctrl+Shift+U · ConvertToUTF8 將文件編碼從GBK轉換成UTF8,UTF8轉換。 · Git 該插件基本上實現了git的全部功能。提供Git經常使用的命令集合。 · Can I Use 能夠直接調整到caniuse看到當前屬性的瀏覽器支持狀況。 · InsertDate 插入時間,項目文件存在CDN的時候,須要改變時間戳纔會看到效果,這個是個好東西。 · FileDiffs 查找文檔不一樣

    · Terminal 

  
在當前目錄打開命令行的插件
 
五、新建 Sublime Text 3 項目
 
    -- 在你須要的目錄新建文件夾
    -- 拖拽到 Sublime Text 3 中
    -- 新建文件  ctrl+n   輸入文件名
    -- ctrl+s 保存文件
    
六、安裝  Sublime Server

    使用 sublime server 啓動本地服務器進行調試
    
    -- 打開 Package Control,選擇 install package , 搜索 sublime server進行安裝
    -- 使用sublime server插件: Tools --> start sublime server
    -- 在你須要瀏覽的頁面文件中,鼠標右鍵,View in  sublime server    

好吧,大概就這些,若是你有經常使用的插件或者擴展,歡迎推薦。部份內容是借鑑其它博客,若有冒犯您的版權,請聯繫我 。
相關文章
相關標籤/搜索