整理個人愛用的Sublime外掛套件

整理個人愛用的Sublime外掛套件

因為工作需要,開始做一些Font-End的工作,雖然,Visuao Stduio已經非常好用,但是,就前端工程師來說用的比較多還是Sublime,Sublime好用這裡就不做介紹,我們知道它是一個輕量化的編輯軟體,很多功能都是你需要時候才透過Plugin方式來安裝,若是,你安裝Plug-in套件,這東西就跟筆記本沒啥兩樣,所以,外掛選用就變成是一件重要的東西。諷刺的是,若是外掛裝多,這東西也就龐大,當然效能也就變慢了,一個好的方式就是下載免安裝版本的sublime,依照在不同工作需求去產生不同的sublime執行資料夾,避免同一個sublime裝太多套件變慢了

紅框為可攜帶版本,也就是說套件裝好後,可以任意攜帶到其他電腦繼續使用,不需要重裝套件

要安裝套件時候,記得必須先安裝Package install panel套件,安裝方法可以參考 http://packagecontrol.io/installation

陸陸續續整理一些不錯的套件給大家使用,若是有好的套件也歡迎推薦給我

ChinesOpenConvert

主要是做繁體與簡體轉換,除了文字轉換,還會針對慣用語的轉換,慣用語轉換的準確度還算可以


SASS & SCSS

要用SASS寫CSS的話,兩個語法在原本sublime是沒有支援,必須額外安裝。不過,可以依照自己愛用哪一種語法去開發,安裝其中一個就可以


Html-CSS-JS Prettify

支援HTML & CSS & JS排版的套件,透過它可以美化程式版型,在使用之前,電腦必須安裝Node.JS,它是基於Node.jS下的運作的套件

未安裝前的格式

美化後的樣式

sidebarenhancements

讓Sublime的側邊功能加強

原本有的功能只有下面這樣,功能看起來少少的

安裝完畢後,可以發現側邊欄位的功能變成很多了

ConvertToUTF8

預設sublime並不支援utf8,避免後續出現亂碼,這套件幾乎是必須安裝的

Emmet

讓我們可以快速產生Html Tag的套件,透過這套件可以簡化很多打字的力氣

例如:你只要在空白頁面打入 ! + Tab,就會出現下面圖樣,Tag都幫你做好了

又或是你要打槽狀的Html Tag,可以這樣打div>p>span + Tab,這語法其實不需死記,因為這語法其實就是跟撰寫CSS是相同的,只要會撰寫CSS就可以快速建立這樣結構

更多語法可以參考http://docs.emmet.io

AutoFileName

當我們在使用一些Tag需要用到資料夾內的各個檔案路徑時候,會自動幫我們顯示出來

這樣好處在於,可以快速找到我們要的檔案,也可以省掉打一些路徑的時間