1. 程式人生 > >開發者常用的 Sublime Text 3 插件

開發者常用的 Sublime Text 3 插件

sublime text 3


1、官網下載 Sublime Text 3 (已有安裝包的,請忽略)


Sublime Text 官網下載地址 : http://www.sublimetext.com/


2、打開 Sublime Text 3 --> help --> Enter License


3、百度註冊碼 !!! 下面提供一個


```

—– BEGIN LICENSE —–

TwitterInc200 User LicenseEA7E-8900071D77F72E 390CDD93 4DCBA022 FAF6079061AA12C0 A37081C5 D0316412 4584D13694D7F7D4 95BC8C1C 527DA828 560BB037D1EDDD8C AE7B379F 50C9D69D B35179EF2FE898C4 8E4277A8 555CE714 E1FB0E43D5D52613 C3D12E98 BC49967F 7652EED29D2D2E61 67610860 6D338B72 5CF95C69E36B85CC 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

查找文檔不同


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


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


本文出自 “12685261” 博客,請務必保留此出處http://12695261.blog.51cto.com/12685261/1976733

開發者常用的 Sublime Text 3 插件