分享一下我裝在 Atom 的 Packages/ Themes (+後話)


一次過看,詳情看下面

用了 Atom 差不多一年了

差不多一年前開始因為寫網頁的關係,覺得 notepad++ 不太能滿足我的要求了,因為小弟的記憶力不好,記不了不同 framework, library 的 API,而 notepad++ 上的 Snippet 支援不多,極其量就是 HTML auto close bracket 等等,而且主題換來換去都是一個樣子(換主題一直是我的癖好,哈哈。想一下對著不會跟你互動的東西,每次看都一個樣子真的會悶死)。

因此就開始適用不同的 Text Editor 了,從 notepad++ 到 sublime text 到 bracket 到 Atom ,最後都留在 Atom 的世界裡咯~~(身邊的神人經常遊說我用 VIM/ Emacs ,哇~要是叫我學那些 commands 不如學一套新的語言,學變成都這麼難,還要學怎麼用 vim/ emacs   🙈 )。

Sublime Text – 效能完勝,但收費的

要是 sublime Text 是免費的,或者稍微便宜一點(哇, USD70,待我畢業了說吧),我可能就在用它呢~ 測試過這麼多軟件,除了 notepad++ ,沒有一個剛才提過的 text editor 可以瞬間開到 >1MB 的 txt 檔,或者 mySQL 的 backup file。從效能角度排名, notepad++/ sublimeText > Atom >>>>>> Bracket (Bracket 效能真的爛死了,加了 插件就根本不能用,裝在 SSD 也沒差,真拿它辦法)。

插件方面, Sublime Text 有 package manager 可以裝,所以蠻方便的,而且 community 很大,所以插件的數目也很多,什麼 bootstrap snippet, linter 等等都有。

Bracket: Adobe 的出品,華而不實,跟它的老兄們一起用比較現實

直接在 PSD 上工作,變成網頁代碼

我想主要用來跟 photoshop 相連一起用比較能發揮它的優勢,主要給 designer 可以直接用 PSD 檔。這點簡直是它的絕對優勢。

最近在一家公司工作,其中我所在的 tech team 遇到跟 designer 溝通最大的問題是,他的 CSS (non-standard,只是可以說是 CSS 上的 pseudocode) 經常跟他自己 render 的圖片有很大出入,問了他就說跟最新的 CSS 做。但幹嘛他寫的 CSS 真的好奇怪,跟著做除了沒有 responsive design (e.g. 從來只用 px 做 margin, padding),而且還破破爛爛的,有時候我的 supervisor 真的忍不住說 “looks like shit" 😂。

所以就有了 bracket 這軟件的出現,designer 不用強逼自己寫 CSS,developer 不用猜來猜去~這就不用再起爭議啦!!

Atom 上的 Packaes

Atom 這軟件都是最近才更新成正式版 1.0,之前的版本效能不太好(雖然都比 bracket 好),至少不能用來開 mySQL 的備份檔的 (~2MB)(測試環境: MacBook Air 13″ 無升級 任何東西),所以讓很多用家都退出了 atom。

而我呢,因為它可以換主題這原因(作為選擇 text editor 的主要因素有點怪怪的,哈哈),讓我留步了。然後一直用,同時 效能也一直有改善,到現在因為效能好了,用戶多了,而且是 open source的,很多 package 跟我最重視的主題就出現了。

好了,終於可以開始介紹裝了的 packages 咯

我在這不附送連結了,反正安裝都要 Atom 的 Packager 裝的。

  1. angular-ui/angularjs: 主要為了 angularJS 的 snippet,因為最近開始大幅度使用 angularJS。這 package 最方便的是它的 angular attributes, 例如 ng-if, ng-hide ,還有 angularJS 的 module declaration autocomplete。除了這個,最近用的很多的 angular directives, factory,一直都記不了 declare 的方法,用這插件 就可以打 “ng…",打了 “ng" 就出現一大堆 這類的 function declaration 的 snippet ,爽死咯~~
  2. Glavin001/atom-beautify: 主要是因為在 HTML 加加減減那些 element ,懶得 re-indent,還有亂七八糟的 CSS ,就可以用這個一步整頓
  3. webBoxio/atom-bootstrap3: 作為一個
  4. mattberkowitz/autoclose-html: 一個大部分現在的 text editor 都有的功能,顧名思義了, web developer 必備
  5. thomaslindstrom/color-picker: web developer 必備——直接在 editor 裡右鍵開出 color picker選顏色,還可以選擇 rgba/ hsl/ hex/ …
  6. bruce/csscomb: 話說最正統的 CSS 是有特定的排序的,比如 font –> width –> transition …,但我太懶了,而且排次序這種功夫太無聊了,直接交給 package 做就最好不過了。但因為是正統的css,所有 “{" 都獨佔一行了,而且不同類別的 css 會隔行,太浪費空間了,閱讀時要一直掃,所以會配合 atom-brautify 一併使用。
  7. nikhilkalige/docblockr: 有點雞肋的 package,目前用到的功能只是 auto-complete 說明的 closing tag (e.g. /* … */),還有comment 下一行自動 comment 。
  8. DanBrooker/file-icons: 用來在sidebar 顯示不同檔案的圖示。但我現在很少用 sidebar 了,用 [ctrl+T]/ [command+T] 跟 global-scope find/replace 超方便!
  9. kevdotbadger/font-awesome-snippetset: font-awesome 超方便,加上一個 class 就直接有 向量的 icon 用。 (e.g. <i class=’fa fa-facebook’> 就會出現 facebook 的 icon 咯~)
  10. postcasio/grammar-token-limit: 今天才安裝的,所有沒有出現在截圖上。唯一功能就是解決 Atom 對於 syntax highlight 的每行字數限制。目前 atom 的限制是 100,就是過了 100 字就沒有 syntax highlight 了;據說這是為了效能考慮。但對於有一大堆 array 而言就不要方便了,結果我加到 500。
  11. richrace/highlight-line
  12. richrace/highlight-selected
  13. atom-community/linter: 因為在公司做開發的關係,所有 css/ js 都要寫的非常工整,而且 js 裡還用上 ‘use strict’ 呢~
  14. AtomLinter/linter-csslint
  15. AtomLinter/linter-jshint
  16. abe33/pigments: 直接在 hex code/ hsl/ rgba  上顯示不同的相應的顏色,對於寫 css 是非常方便的。
  17. mpeterson2/save-session: 用來救命的,可以不解釋,呵呵~

Atom 上的 Themes

愛到發噻狂既 Atom-Material 主題

所有 tab/ sidebar item 都有 material design 的 ripple 效果,真的超讚!而且主題顏色、 tab bar 大小 還可以調教呢~無敵讚!!!

 

後話(跟以上內容無關)—— developer [vs.] designer

話說之前聽一些 IT 行業的人說,跟 designer 合作真的好麻煩,因為好像有不同的語言似的,我開始也不覺得啊~但我現在察覺到了,雖然不是直接在我身上發生。我現在工作的公司,規模不大,但也很專業的雇用了一位設計師,專門負責公司網站的配色方案、網頁設計。

作為一個實習生的我,當然就按上級的要求做網頁的了。這點沒什麼問題的,他們(其實就是設計師)會把設計好的 外觀 render 成 jpg 檔案,一目了然,也同時會放上不正規 (pseudo css) 作為主要參考。

因為圖片要改的話很不方便,所以會改 CSS,因此 CSS 是最新的,就跟 CSS 做吧!

但問題是, 如果是修改了 CSS ,為什麼不 render 一個圖片出來呢?不 render 怎麼看效果?換句話說,就是憑空想像更新了的 CSS 麼?這個就是問題——

我跟我上司說:我直接跟 CSS 來做,但看起來好像有點問題耶~排除完全不 responsive 的設計、連字型跟顏色都有落差

我上司就是直腸直肚的人,直接就說 “It looks like shit~"。當然不是罵我,而是他們一直對 designer 的不滿,來了一個小爆發,因為真的是另一種風格,像 punk 在 音樂界的定位一樣,普通人不能理解的。

畢竟設計這門東西都是很主觀的,主要看誰的邏輯解釋的比較好,所以真的有理說不清。再者每次都問 經常旅遊在的 designer 的意見真的很浪費時間,加上我的設計功力還好(😳), 結果我上司就跟CEO 反映,不如提供更大的自由度給我,做出來有什麼要修改的就問 designer了。

但還未完!!!~~~

因為我野心太大了,而且老闆我放權,結果我丁點丁點修改了很多細節的東西, designer 的反應立馬很不爽的。看他跟我上司“討論”的表情,我的小心臟真的要跳出來了,還是自己不還修太大,還好上司跟我技術部門的同事都頂我的,但我還是覺得不太好意思。畢竟被人改設計是蠻惱人的~

結果呢,我上司直接拿設計給我的 CEO 看,CEO 也批准了,現在等 designer 回來看有什麼反應。唉~ designer 這次肯定直接找上我了,比較好“討論”吧⋯⋯

2 thoughts on “分享一下我裝在 Atom 的 Packages/ Themes (+後話)

塗牆

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s