[ST 插件]前端開發(fā) Sublime 插件整理

  1. sublimerge 非常神奇的代碼對比工具,支持和自己的snapShot對比,和clipboard快照對比
  2. WebInspector
  3. PlainTasks a todo-list plugin
  4. [css Format]這款插件和jsFormat類似,可以格式化css代碼(包括壓縮css)。個人覺得cssComb沒有什么作用只是調(diào)整了屬性而已。
  5. table Editor markdown中寫table的神器,網(wǎng)上各種教程(比如:https://vimeo.com/83939527),寫table速度大大提升了。但在sublime中請注意,tab可能會存在沖突的情況,請覆蓋到Key Bindings - User
  6. Color Highlighter
    該插件可以顯示在CSS文件中說使用的顏色的色值。包括HTML中嵌套的css樣式也可以顯示。
  7. sublimeServer 用Sublime做一個HTTP服務(wù),可以用瀏覽器訪問當(dāng)前Sublime打開的文件夾里的內(nèi)容,對于測靜態(tài)頁面比較方便 。
  8. DocBlockr 輕松寫jsdoc
  9. AutoFileName 在你在輸入文件名是提供自動提示,減少人為的輸入錯誤。
  10. Requester:用 sublime 發(fā)送請求

持續(xù)更新


摘引部分

轉(zhuǎn)載自如何優(yōu)雅地使用Sublime

文/晚晴幽草(簡書作者)原文鏈接:http://www.itdecent.cn/p/3cb5c6f2421c著作權(quán)歸作者所有,轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),并標(biāo)注“簡書作者”。

  • MarkDown EditingSublimeText不僅僅是能夠查看和編輯 Markdown 文件,但它會視它們?yōu)楦袷胶茉愀獾募兾谋尽_@個插件通過適當(dāng)?shù)念伾吡梁推渌δ軄砀玫赝瓿蛇@些任務(wù)。關(guān)于如何在SublimeText下高效些東西可參見文章:sublime text 2(3)下的Markdown寫作 抑或是前段時間寫下的追尋高效工作的一路折騰㈡

  • SideBarFolders打開的文件夾都太多了? 來用這個來管理文件夾,世界原來也可以這么美好。

    SideBarFolders

  • Sublime Terminal這個插件可以讓你在Sublime中直接使用終端打開你的項目文件夾,并支持使用快捷鍵。

  • ColorPicker通常,如果你想使用一個顏色選擇器則可能打開 Photoshop 或 GIMP。而在 Sublime Text 中,你可以使用內(nèi)置的顏色選擇器。安裝完成后,只要按下Ctrl / Cmd + Shift + C 快捷鍵。

  • SublimeREPL這可能是對程序員很有用的插件。SublimeREPL 允許你在 Sublime Text 中運行各種語言(NodeJS , Python,Ruby, Scala 和 Haskell 等等)。

  • Ctags插件有童鞋抱怨Sublime Text不能支持函數(shù)的跳轉(zhuǎn)(比如像Eclipse那樣,按住Control點擊該方法或者對象,即可跳轉(zhuǎn)到定義的地方; Alt+←即可回到原處)。其實Sublime Text也可以借助插件實現(xiàn)之(當(dāng)然,有些情況下:Can not find defination)畢竟這個也是借助正則來匹配完成的。因此這個也就要求代碼很規(guī)范。這個插件相對來講會有些麻煩,具體的可以參見:Sublime Text ctags 的配置.

  • SublimeLinter插件SublimeLinter 是前端編碼利器——Sublime Text 的一款插件,用于高亮提示用戶編寫的代碼中存在的不規(guī)范和錯誤的寫法,支持 JavaScript、CSS、HTML、Java、PHP、Python、Ruby 等十多種開發(fā)語言。這篇文章介紹如何在 Windows 中配置 SublimeLinter 進(jìn)行 JS & CSS 校驗。比如寫例如像lua這樣的弱語言腳本代碼,有這個可以規(guī)避掉很多不該有的低級錯誤吧?當(dāng)然這也需要你SublimeLinter安裝完畢之后再安裝一個SublimeLinter-lua
    即可。具體的使用可以參見:借助 SublimeLinter 編寫高質(zhì)量的 JavaScript & CSS 代碼

  • SideBarEnhancements插件SideBarEnhancements是一款很實用的右鍵菜單增強插件;在安裝該插件前,在Sublime Text左側(cè)FOLDERS欄中點擊右鍵,只有寥寥幾個簡單的功能;安裝了就相當(dāng)于給其豐了大胸一般。更強大的是,該插件還能讓我們自定義快捷鍵呼出某個瀏覽器以預(yù)覽頁面!這樣就不用到項目目錄下尋找和拖動到特定瀏覽器中預(yù)覽了。安裝此插件后,點擊菜單欄的preferences->package setting->side bar->Key Building-User,鍵入以下代碼:
    [ { "keys": ["ctrl+shift+c"], "command": "copy_path" }, //chrome { "keys": ["f2"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "C:\Users\jeffj\AppData\Local\Google\Chrome\Application\chrome.exe", "extensions":".*" } }]

這里設(shè)置按Ctrl+Shift+C復(fù)制文件路徑,按F2即可在Chrome瀏覽器預(yù)覽效果(如果需要的話,也可以根據(jù)自己的需要為Firefox,Safari,IE,Opera等加上),當(dāng)然你也可以自己定義喜歡的快捷鍵,最后注意代碼中的瀏覽器路徑要以自己電腦里的文件路徑為準(zhǔn)。

  • HTML-CSS-JS Prettify一款集成了格式化(美化)html、css、js三種文件類型的插件,即便html,js寫在PHP文件之內(nèi)。插件依賴于nodejs,因此需要事先安裝nodejs,然后才可以正常運行。插件安裝完成后,快捷鍵ctrl+shift+H完成當(dāng)前文件的美化操作。插件對html、css文件的美化不是非常滿意,但還可以,后面將說明如何修改css美化腳本。本人用起來超級爽的,鑒于篇幅,就不贅述,可以參見這篇介紹。
  • CSScomb CSS屬性排序:有時候看看自己寫的CSS文件,會不會覺得屬性很亂查找不易維護(hù)難?CSScomb可以按照一定的CSS屬性排序規(guī)則,將雜亂無章的CSS屬性進(jìn)行重新排序。選中要排序的CSS代碼,按Ctrl+Shift+C,即可對CSS屬性重新排序了,代碼從此簡潔有序易維護(hù),如果不款選代碼則插件將排序文件中所有的CSS屬性。當(dāng)然,可以自己自定義CSS屬性排序規(guī)則,打開插件目錄里的CSScomb.sublime-settings文件,更改里面的CSS屬性順序就行了。因為這個插件使用PHP寫的,要使他工作需要在環(huán)境變量中添加PHP的路徑,具體請看github上的說明。
  • SublimeTmpl 快速生成文件模板一直都很奇怪為什么sublime text 3沒有新建文件模板的功能,像html頭部的DTD聲明每次都要復(fù)制粘貼。用SublimeTmpl這款插件終于可以解脫了,SublimeTmpl能新建html、css、javascript、php、python、ruby六種類型的文件模板,所有的文件模板都在插件目錄的templates文件夾里,可以自定義編輯文件模板。SublimeTmpl默認(rèn)的快捷鍵:
    ctrl+alt+h htmlctrl+alt+j javascriptctrl+alt+c cssctrl+alt+p phpctrl+alt+r rubyctrl+alt+shift+p python

如果想要新建其他類型的文件模板的話,先自定義文件模板方在templates文件夾里,再分別打開Default (Windows).sublime-keymap、Default.sublime-commands、Main.sublime-menu、SublimeTmpl.sublime-settings這四個文件照著里面的格式自定義想要新建的類型,這里就詳細(xì)介紹了,請各位自己折騰哈~

SFTP:快速編輯遠(yuǎn)程服務(wù)器文件在Win下用Xftp和WinScp,被這種需要切換點擊or F5刷新的手動操作蛋疼到無語;故此一遇見這SFTP,頓覺這世界都美好了許多。當(dāng)然Sublime下面也有些其他同步插件,比如FtpSnyc,但是配置起來的錯誤提示一點都不人性化,就毫不留情的舍棄了。Sublime下有SFTP,只要Ctrl+S即可同步本地到服務(wù)器,妥妥的爽歪歪有么有?如何配置,請參見在 Sublime Text中使用 SFTP 插件快速編輯遠(yuǎn)程服務(wù)器文件;如欲使用FtpSync可參見Sublime使用及FtpSync遠(yuǎn)程同步;大道至簡,因簡而悅;開心壘碼,值得折騰。
WakaTime -- 記錄你的Code時間;WakaTime可以做到精確地統(tǒng)計到你花在某個項目上的時間;WakaTime針對不同的IDE,擁有不同的插件,在Sublime上安裝著插件,就能統(tǒng)計到我使用Sublime進(jìn)行的所有項目的行為??梢愿咝Ч芾砗椭獣宰约篶ode時間;并且,統(tǒng)計完善, 適合發(fā)朋友圈裝逼(如果你喜歡的話)~
Waka的基本設(shè)計和rescuetime類似。每個人注冊完將獲取一個key,裝一個客戶端,把key輸進(jìn)去(登陸是同一個道理),然后它就把本地的所有行為帶個key扔給服務(wù)器來統(tǒng)計,一段時間之后給你個報表。不過Waka做的真的很精準(zhǔn),精確到每一個文件用了多少秒,每一種語言用了多少時間。

安裝和使用都很簡單,請參見這里。另外一篇比較詳細(xì)的文章時間都去哪了?用RescueTime和WakaTime來記錄你的時間,對RescueTime和WakaTime有一個更為詳細(xì)的敘述,可以一讀。
剩下些許其他的可以按需安裝的插件,比如:
ConvertToUTF8 支持 GBK, BIG5, EUC-KR, EUC-JP, Shift_JIS 等編碼的插件
Bracket Highlighter 用于匹配括號,引號和html標(biāo)簽。對于很長的代碼很有用。安裝好之后,不需要設(shè)置插件會自動生效
DocBlockr 可以自動生成PHPDoc風(fēng)格的注釋。它支持的語言有Javascript, PHP, ActionScript, CoffeeScript, Java, Objective C, C, C++
Emmet(Zen Coding)生成HTML代碼段的插件,強大到無與倫比:可以超快速編寫HTML/CSS/JS,當(dāng)然這個插件還支持多種編譯環(huán)境,如常見的:Eclipse/Aptana、Coda、Notepad++、Adobe Dreamweaver、TextMate等,web開發(fā)必備?。?!
jsFormat 格式化js代碼,懂者自懂;強迫癥Coder必備!默認(rèn)快捷鍵Ctrl+Alt+F。
phpFormat 格式化php代碼,懂者自懂;強迫癥Coder必備!
CSS Compact Expand CSS屬性展開收縮:寫CSS的盆友,喜歡將其寫多行還是一行(個人喜歡將其格式化為多行)?如果閱讀別人的代碼不符合自己的習(xí)慣,可以用CSS Compact Expand這個插件將CSS格式化一下,按 Ctrl+Alt+[ 收縮CSS代碼為一行顯示,按 Ctrl+Alt+] 展開CSS代碼為多行顯示;強迫癥Coder必備!。
Autoprefixer插件:這是一款CSS3私有前綴自動補全插件;該插件使用CanIUse資料庫(當(dāng)然,SublimeText自然也有<font color="purple">CanIUse</font>這個插件咯),能精準(zhǔn)判斷哪些屬性需要什么前綴,與CssComb插件一樣,該插件也需要系統(tǒng)已安裝Node.js環(huán)境;使用方法:在輸入CSS3屬性后(冒號前)按Tab鍵即可。
YUI Compressor:壓縮JS和CSS文件,按F7鍵后,若壓縮當(dāng)前文件(demo.js),則壓縮后的文件(demo.min.js)保存在該文件的同級目錄,需要安裝java的JDK。使用方法:YUI Compressor
ClickableURLs:可點擊的URL使用小插件ClickableURLs可以讓文件中的URL能夠點擊。
終極王道:自己編寫專用的Sublime Text插件。雖然說各個方面比如移動端,Web前段,服務(wù)器端,非Coder的Writer所需要的方便已經(jīng)被集成在了不同的插件中。但譬如,需要快捷打開PC端的某個模擬器,便捷的進(jìn)行某些校驗,只要你想的到的基本都可以將其在插件內(nèi),以快捷鍵處理之。至于如何編寫SublimeText插件,請參看這里編寫自己的Sublime Text2 插件

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容