前端工程師的神器Sublime Text使用介紹

TP_funny發表於2014-12-24


語法高亮
一晃已經接近2015年,過去數年裡前端開發的發展日新月異:瀏覽器裡充斥著新增加的CSS特性(以及這些特性的N種實現),JavaScript也不像原來那樣只用作給單一頁面加點特效或者提交Ajax請求這麼簡單,我們手邊有了Jade,Sass,TypeScript等等一打甚至更多種能生成HTML,CSS,JavaScript的語言,預設安裝的Sublime Text已經完全無法提供這些新的語言、新的特性所需要的語法高亮和智慧感知。這一節介紹了一些Package來輔助Sublime Text實現更好地語法高亮。

JavaScript Next
JavaScript Next 提供了比預設JavaScript Package更好的語法高亮,而且他完美支援ECMAScript 6,如果你知道ECMAScript 6,或許也感受過預設安裝的Sublime Text不支援modules,succinct methods, arrow functions, classes, generators, and accessors 帶來的不便。


CSS3
嗯是的,就是CSS3,預設安裝的Sublime Text對CSS3的支援讓人抓狂,幀動畫?別開玩笑了你只會看到一片白色的純文字一樣的程式碼。事實上不光CSS3,我建議用CSS3 Package完全替代原來的CSS Package來完成語法高亮。


SCSS
Sass的開發人員們,我建議你們使用SCSS Package,是的我也覺得有.sass和.scss是很腦殘的設定,但是我想大多數Sass開發人員實際上寫的都是.scss,畢竟.scss更“像”我們熟悉的原生CSS。

當然Stylus和LESS也是寫CSS的好工具,事實上我更喜歡LESS。

其他Package
CoffeeScript的開發人員少不了Better-Coffescript,這個Package比Package Control裡官方的CoffeeScript Package要好得多,後者已經很久沒有維護更新了。嗯,TypeScript也是個不錯的選擇,當然我想Visual Studio或許是更好地TypeScript工具。
Haml Package為預設的工具增加了巢狀語言的支援,包括JavaScript,CSS,Sass等等,語法高亮比以前更方便。Slim和Jade也提供了各自的語法高亮支援,這兩種語言我還不是非常瞭解,如果有更好的外掛提供請一定分享出來。

外掛
Sublime Text有無數有趣又有用的外掛,社群的支援也是我一直用Sublime Text的原因。如果我們找一打工程師坐下來討論Sublime Text的外掛,哦算了我們還是聊聊宇宙和平吧…… 前端工程師常用的外掛比如CTag不再贅述,這裡說幾個有趣的。

Color Highlighter
這個外掛我等了很久了,我最早用Sublime Text寫CSS時候就在想“這堆顏色碼誰知道是什麼顏色”… Color Highlighter這個外掛會檢測CSS檔案中的顏色碼,不論是Hex碼或者RGB碼都能很好的顯示。Color Highlighter能夠設定成用背景色或者邊框提示顏色,我一般在Settings裡做這樣的設定:
language-http" { "ha_style": "filled", "icons": false }
這樣設定之後的效果是這樣的:

更讚的是最近這個外掛也支援了Sass、LESS以及Stylus,這也使他成為我的必備外掛之一。

Emmet
嗯,我個人不喜歡Emmet這個名字,反倒是以前他叫做Zen Coding的時候更容易被人記住。大量使用Emmet只有一個壞處,那就是你可能會忘記把標籤成對打兩遍的好習慣。
用Emmet寫HTML很快,真的很快。簡單的把標籤和需要的class名稱寫清,巢狀結構和閉合標籤他會幫你搞定的。Jade、Slim或者Haml的支援也很好。


Sublime Linter
經常對程式碼做lint是個好習慣,這不一定是為了檢測語法錯誤,還能減少潛在的衝突、不相容等。後端工程師有CLint一類的工具,Sublime Text中對JavaScript的Lint支援也很好。Sublime Linter可以在編譯時就很方便的幫助我們lint程式碼。雖然我們通過grunt等構建工具,也可以在構建網站時強制進行lint檢測,但是在編輯時的實時監測總是方便很多。

主題/配色
我想合適的主題和配色是能夠潛在提高工程師效率的重要工具,雖然用白底黑字的記事本也能寫出穩固高效的程式碼,但是為了我們的心情和眼睛,還是選幾款好的配色比較好。前端工程師對設計和美學更加敏銳,雖然不是設計師,但我們知道“什麼是美的”。在Sublime Text中改變視覺效果有兩部分設定,分別是程式碼高亮的“配色”以及編輯器本身的“主題”(包括了Tab欄、側邊欄以及Command視窗等)。順便插播一下,最新版本的Sublime Text 3能夠指定側邊欄的檔案圖示了~
記得知乎上有為什麼大部分程式設計師都喜歡用黑色介面這樣的問題,嗯…… 不管你使用亮色系還是暗色系的主題(事實上我在不同的編輯器分別用了這兩種),下面這幾種都非常值得推薦:

Solarized Dark
Solarized在事實上設計了一套配色的標準,而非單純的幾個編輯器配色檔案。我們可以在官網上找到大量流行IDE的Solarized配色方案,在GitHub等開源網站上更多!幾乎所有數的出來的編輯器、終端工具等都可以找到Solarized風格的配色。很多頂級工程師的工具和部落格也使用了這一套配色。


Cobalt2
Cabalt2這套主題是本文原作者Wes Bos推薦的主題,這套主題經過了5年以上的修改和演進。它的特點在於通過高對比度的方案吸引使用者的眼球,把注意力放在需要注意的地方。


Seti UI
黑,很黑,用來形容Seti UI不算過分,這套主題的藍色很挑眼,我推薦這款主題只是因為這篇文章太長了需要點兒亮色~


Goto Anything
如果你之前用過Coda、Textmate或者Dreamweaver你可能對側邊欄上的檔案導航及其依賴。Sublime Text帶來了Goto Anything特性,只需要按下簡單的 ⌘ (Ctrl on Windows) + P 就可以前往任何你想到達的位置,這是你能想到的開啟檔案的最快的方法。智慧感知的提示框提供了模糊匹配,我們不需要記住準確的檔名,也不需要記住他在哪層資料夾裡。
Goto Anything不光支援檔名,事實上他還支援前往某行,你可以使用“jquery.js:205:15”來前往jquery.js檔案的205行15列。使用“@”可以前往檔案裡的函式、方法等等成員,再方便不過。

來自:碼農網
評論(1)

相關文章