善用工具提昇開發效率

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

從此可以看出任何工具都會隨著科技進步而跟著演化，寫程式也是一樣的道理，我們隨時都必須觀察是否有更實用的工具來提升寫 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 秒不到就可以打出來了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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 分鐘的工作時，就有優化的空間 (申請文件範本、自動化銀行帳單繳款取代臨櫃)