開發者常用的 Sublime Text 3 插件




1、官網下載 Sublime Text 3 (已有安裝包的,請忽略)
Sublime Text 官網下載地址 : http://www.sublimetext.com/ 2、打開 Sublime Text 3 --> help --> Enter License 3、百度注冊碼 !!! 下面提供一個 —– 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 —— 4、安裝 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安裝插件的方法: 1、按下 Ctrl+Shift+P 調出命令面板 2、輸入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 

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

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

好吧,大概就這些,如果你有常用的插件或者擴展,歡迎推薦。部分內容是借鑒其它博客,如有冒犯您的版權,請聯系我 。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM