善用工具提昇開發效率

洧杰 已發佈 2019-10-16

在石器時代,原始人必須很辛苦用鑽木取火的方式來生火,而古代的人開始會用打火石。隨著時代的演進,也開始有打火機、火柴等工具,而在現代,只要有瓦斯充足,你的火源想燃燒多久都可以,且不費吹灰之力。

從此可以看出任何工具都會隨著科技進步而跟著演化,寫程式也是一樣的道理,我們隨時都必須觀察是否有更實用的工具來提升寫 Code 效率。

程式編輯器的演化史

以編輯器來說好了,它就是一個很好觀察出科技在進步的過程,在十幾年前大家寫 HTML 都是用記事本來撰寫,接著開始有「可視化」的編輯器,像是 FrontPage、Dreamweaver,讓想學網頁的人不會因為看到密密麻麻的程式碼而卻步。直到近幾年才又開始有 Sublime Text 3、Atom、Visual Studio Code 這類的文字編輯器,與記事本相比,這種專門寫程式的編輯器可是強大的多了,每位開發者都可以為編輯器寫套件,讓其它人都可以安裝套件,你可以自己打造適合自己開發習慣的編輯器介面、熱鍵、顏色高亮、Coding Style、自動除錯等等。

它幫助開發者能夠聚焦在程式開發上,甚至能用自動化檢查的方式幫助你自動除錯,就以我自己來說 我的網頁編輯器操作歷史則是 FrontPage > Dreamweaver > Sublime Text 2、3 > Visual Studio Code,幾乎每隔兩三年我就會換編輯器來讓自己變得更強。

持續優化自己的模版架構

一開始學前端的時候,HTML 結構非常單純,頂多有插入一隻 CSS,網頁也只有一兩頁,但隨著你會的東西越來越多,架構也會跟著變大,如果每次在開發時,都要從零開始慢慢建構不是很辛苦嗎?首先要新增 HTML、CSS 檔,去 JS 框架官網下載最新版本,CSS 又必須重新寫過,每個細節如果不小心漏掉就又很麻煩。

所以你可以思考建構自己的 boilerplate,什麼是 boilerplate 呢?就是設計一個乾淨的開發環境,每當有新專案時,你就複製那個開發環境下來,裡頭就有你慣用的 JS 框架、前端任務工具 (Gulp、Webpack)、以及常用的 Sass Mixin 結構等等,讓你能夠專心在開發新程式上面,不會覺得每次開發都像是重新開始一樣。觀念又很像是你在大學上繳交報告給教授時被退回,因為你沒 follow 他的 Word 標準格式,例如標題要 18px,行距要 1.5倍,所以教授提供給你一個 Word 範例,裡面的各個設定都設好了,不要自己慢慢建立,只要遵守規範就有符合教授作業的規則是一樣的。

像是在 GitHub 上你關鍵字搜尋 boilerplate ,也可以看到許多開發者的建構環境,而我也會建議你在 GitHub 上面試著放自己的 boilerplate,當你有新專案時便透過 Git 指令 clone 下來就方便多了。

不要有鄙視心態,自己用的順手最重要

業界會有個鄙視鍊的玩笑,就以編輯器來說,連結裡也附註一段:「用 Vim 的工程師鄙視用 Emacs 的工程師,用 Emacs 的工程師鄙視用 Vim 的工程師,無論是用 Vim 或 Emacs 的工程師都鄙視所有用其他編輯器的工程師;用 Atom、Notepad++、Sublime Text 的工程師鄙視用 Windows 記事本的工程師。」。

這裡會建議不要鄙視別人用的工具,有些時候工程師用起來就是很不順手,像是以前我用 Dreamweaver 時,那時我就在想該選 Notepad++ 還是 Sublime Text 2,後來我用了一陣子覺得 Sublime 用得比較順手,但周遭也有人選擇了 Notepad++,這中間其實又關係到自己的人格特質、喜好偏愛、操作習慣等等。

我自己也常遇到這種問題,例如有時候別人推薦的工具我聽他講完也覺得非常讚,但是我實際去用總是覺得哪裡卡卡的,最後硬用幾天宣告放棄,過幾天後發現另外個類似服務,一使用發現喜歡得不得了,甚至就直接註冊付費版,但真要我說兩者的差異我自己也說不上來。所以真的自己用得順手最重要。

工具用得好,工作效率自然高

不要小看這些工具運用的累積效用,就以 HTML 標籤來說,目前的熱門編輯器都有支援一個強大的套件叫做 Emmet,你可以思考看看自己打以下程式碼需要多少時間,如果自己手打起碼也要一分鐘以上吧?但我用 Emmet 只要 10 秒不到就可以打出來了。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="all.css">
  <script src="all.js"></script>
</head>
<body>
  <div class="wrap">
    <div class="header">
      <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
      </ul>
    </div>
  </div>
</body>
</html>

如果一整年我跟你每天都會打一次這個語法,我就比你還多了整整五個小時做其它的事情,你說驚不驚人?專業的工程師為了讓自己更懶惰,自然會去找各種工具來提升寫 Code 效率,讓自己擁有更多的時間專注在他想投入的事情上。

那麼到底該如何觀察自己的哪些環節可以用工具來輔助呢?最後也丟出一些檢核列表給你參考:

  • 每個專案都會寫到的功能,但手寫又很花時間的就可以設計成 snippet (程式碼片段)
  • 思考日常生活中會花你超過五分鐘以上的工作,就思考如何讓它自動化完成 (推薦連結)
  • 如果每次在寫一個程式都會卡在一個抽象觀念上時,你就必須花時間瞭解它整體脈絡
  • 思考一個禮拜或一個月的頻率上都固定會去做一件 30 ~ 60 分鐘的工作時,就有優化的空間 (申請文件範本、自動化銀行帳單繳款取代臨櫃)

關於筆者

暱稱:洧杰

介紹:六角學院校長,熱愛分享與交流的前端工程師,目前專注於兼容桌面/移動網頁前端開發,期間已協助數百位平面設計師,網頁設計師導入標準網頁設計。