代碼美化的藝術

Ng-Matero 中文版文檔已經發布 點擊查看

前言

本來只是想簡單的聊一下代碼格式化的問題，無奈本文拖沓了好久，在此期間，我又思考了不少，我愈來愈以爲代碼格式化是一門藝術。爲了陪襯「藝術」二字，可能叫「代碼美化」更貼切一點，可是本文的深度遠沒有標題那麼宏大。

在我看來，代碼質量不只體如今邏輯上，也要體如今形式上。尤爲前端代碼，在日漸複雜的單頁面開發中，代碼格式化不只是爲了美觀，也是爲了更好的閱讀及檢查。關於代碼的格式化並無統一的標準，每一個人都有本身的看法，因此本文的目的以探討和推薦爲主。

可能不多有人會去考慮這方面的問題，畢竟美化插件都是現成的，好比經常使用的 Prettier，只要一個快捷鍵就能夠迅速格式化，可是代碼格式化插件的標準並不必定是最好的。

本文範例主要以 Angular 爲主，可是代碼美化的建議一樣適用於 React 和 Vue。

歡迎關注基於 Angular Material 的中後臺管理框架 Ng-Matero

每行代碼多少字符合適？

關於代碼字符數一直是一個爭論不休的問題。在 Python編碼風格指導(PEP8) 規定了每行不超過 80 個字符。Prettier 默認也是 80 個字符。

同意這條規範的人認爲 80 個字符緊湊美觀，在大屏顯示器也能夠分多欄顯示。以下圖所示：

我最開始也是同意 80 個字符的建議，可是當我遵循這條規範寫了近一年的 Angular 代碼以後，我發現這條規範有一些缺陷。

首先這條規範是 Python 編碼風格的建議，而 Python 的代碼是以縮進表明代碼塊，類、函數等在定義時也沒有大括號及小括號，算上括號前的空格，這就比通常的代碼少幾個字符。

其次現代的編程模式大可能是面向對象的風格，類的繼承、接口實現等均可能致使代碼很長，在 Angular 中可能還會實現多個鉤子函數的接口。

另外，Angular 的風格指南建議不要爲了精簡變量命名而損失易讀性，因此不少時候函數命名可能很長，再加上類型系統及鏈式調用等，單行代碼很容易超過 80 個字符，這樣就會形成過多的折行。

下面是一段使用 80 字符寬度格式化的 TS 代碼：

咱們再看一下擴大到 100 字符以後的效果：

這段代碼或許還不是最典型的例子，可是也能看出二者的不一樣，在實際的業務當中，相似的折行可能更多，而從我我的的角度來看，過多的折行反而破壞了代碼的完整度。目前經常使用的代碼寬度有三種，分別是 80、100、120，很顯然，80 過短，120 太長，以中庸之道，取 100 恰好。

模板格式化

代碼寬度對模板（html）的影響也很大，下面咱們重點聊一下關於模板的格式化問題。如下是使用 Prettier 的默認設置格式化的效果。

上面這種格式化方案很是廣泛，可是我我的並不喜歡這種格式化的效果，緣由有如下幾點：

• 開始標籤末尾的尖括號看上去有點突兀。
• 全部屬性所有換行，總體有些鬆散，模板代碼可能變得很長。
• 標籤和屬性的區分度不高。

我比較喜歡下面的格式化方案，整齊緊湊，屬性之間對齊，標籤一目瞭然。

簡單說一下上面這種格式化效果的方法：須要使用 VSCode 默認的 HTML 格式化插件。在 首選項-設置-擴展-HTML，設置 Wrap Attributes 屬性，選擇 preserve-aligned（保留屬性的包裝，但對齊），這個選項容許多個標籤單行顯示。

Prettier 好像沒法實現（有了解的朋友能夠留言）。

屬性排序及建議

最近在格式化代碼的過程當中，我總結了一套排序規則及格式化建議，你們能夠參考一下。

屬性排序

給元素屬性排序是一個無關緊要的操做，可是合理的屬性順序一樣有利於代碼的閱讀及檢查。這和排列 CSS 屬性順序幾乎是同樣的。在編寫 CSS 的時候，我會刻意的按照如下順序排列屬性：

1. Positioning
2. Box model
3. Typographic
4. Visual
5. Misc

詳情參考 Code Guide，如下是元素屬性排序建議：

• 模板引用變量
• class
• 結構型指令
• 屬性型指令
• 雙向綁定
• 屬性綁定
• 事件綁定

格式化建議

• 五個及五個如下屬性儘可能不要強制換行
• 某些屬性建議放在一塊兒，好比 ngModel和 name，label和 value
• 元素標籤儘可能對齊（除單行元素外）
• 插值表達式儘可能換行
• 和type 有關的屬性儘可能前置

如下是根據以上規則格式化後的代碼

函數格式化

我以爲模板和函數很是相似，模板屬性就比如函數參數。若是使用 Prettier 進行格式化，函數字符超出限制以後，全部參數默認所有折行顯示，這種方式的潛在問題和模板屬性折行的問題很是相似，我以爲函數參數若是也能用 preserve-aligned 可能會更好，可是 VSCode 沒法作到這一點。

谷歌推薦 clang-format 進行格式化，初步試了一下，並無達到滿意的效果，可能配置文件有點問題。我以爲關於函數的格式化問題暫時能夠沒必要深究。

總結

代碼美化只是一種形式，它不會對邏輯產生任何影響，可是好的代碼格式會間接影響咱們編碼的速度，甚至影響到代碼的質量。

本文篇幅有限，也有不少不當之處，若是讀者對代碼美化有更好的建議，歡迎留言評論。