日韩国产精品99成人不卡在线无毒|狠狠躁夜夜爽一级二级精品|亚洲日日噜噜孕妇中文字幕|日韩久草中文三级片

作者：敘帝利 

鏈接：https://zhuanlan.zhihu.com/p/83249845

前言

原本只是想簡單的聊一下代碼格式化的問題，無奈本文拖沓了很久，在此期間，我又思考了很多，我越來越覺得代碼格式化是一門藝術(shù)。為了襯托“藝術(shù)”二字，可能叫“代碼美化”更貼切一點，但是本文的深度遠(yuǎn)沒有標(biāo)題那么宏大。

在我看來，代碼質(zhì)量不僅體現(xiàn)在邏輯上，也要體現(xiàn)在形式上。尤其前端代碼，在日漸復(fù)雜的單頁面開發(fā)中，代碼格式化不僅是為了美觀，也是為了更好的閱讀及檢查。關(guān)于代碼的格式化并沒有統(tǒng)一的標(biāo)準(zhǔn)，每個人都有自己的見解，所以本文的目的以探討和推薦為主。

可能很少有人會去考慮這方面的問題，畢竟美化插件都是現(xiàn)成的，比如常用的 Prettier，只要一個快捷鍵就可以迅速格式化，但是代碼格式化插件的標(biāo)準(zhǔn)并不一定是最好的。

本文范例主要以 Angular 為主，但是代碼美化的建議同樣適用于 React 和 Vue。

每行代碼多少字符合適？

關(guān)于代碼字符數(shù)一直是一個爭論不休的問題。在 Python編碼風(fēng)格指導(dǎo)(PEP8) 規(guī)定了每行不超過 80 個字符。Prettier 默認(rèn)也是 80 個字符。

贊成這條規(guī)范的人認(rèn)為 80 個字符緊湊美觀，在大屏顯示器也可以分多欄顯示。如下圖所示：

我最開始也是贊成 80 個字符的建議，但是當(dāng)我遵循這條規(guī)范寫了近一年的 Angular 代碼之后，我發(fā)現(xiàn)這條規(guī)范有一些缺陷。

首先這條規(guī)范是 Python 編碼風(fēng)格的建議，而 Python 的代碼是以縮進(jìn)代表代碼塊，類、函數(shù)等在定義時也沒有大括號及小括號，算上括號前的空格，這就比一般的代碼少幾個字符。

其次現(xiàn)代的編程模式大多是面向?qū)ο蟮娘L(fēng)格，類的繼承、接口實現(xiàn)等都可能導(dǎo)致代碼很長，在 Angular 中可能還會實現(xiàn)多個鉤子函數(shù)的接口。

另外，Angular 的代碼風(fēng)格建議不要為了精簡變量命名而損失易讀性，所以很多時候函數(shù)命名可能很長，再加上類型系統(tǒng)及鏈?zhǔn)秸{(diào)用等，單行代碼很容易超過 80 個字符，這樣就會造成過多的折行。

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

我們再看一下擴大到 100 字符之后的效果：

這段代碼或許還不是最典型的例子，但是也能看出兩者的不同，在實際的業(yè)務(wù)當(dāng)中，類似的折行可能更多，而從我個人的角度來看，過多的折行反而破壞了代碼的完整度。目前常用的代碼寬度有三種，分別是 80、100、120，很顯然，80 太短，120 太長，以中庸之道，取 100 剛好。

模板格式化

代碼寬度對模板（html）的影響也很大，下面我們重點聊一下關(guān)于模板的格式化問題。以下是使用 Prettier 的默認(rèn)設(shè)置格式化的效果：

上面這種格式化方案非常普遍，但是我個人并不喜歡這種格式化的效果，原因有以下幾點：

• 開始標(biāo)簽?zāi)┪驳募饫ㄌ柨瓷先ビ悬c突兀。

• 所有屬性全部換行，整體有些松散，模板代碼可能變得很長。

• 標(biāo)簽和屬性的區(qū)分度不高。

我比較喜歡下面的格式化方案，整齊緊湊，屬性之間相互對齊，標(biāo)簽一目了然。

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

Prettier 好像無法實現(xiàn)（有了解的朋友可以給我留言）。

屬性排序及建議

最近在格式化代碼的過程中，我總結(jié)了一套排序規(guī)則及格式化建議，大家可以參考一下。

屬性排序

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

1. Positioning

2. Box model

3. Typographic

4. Visual

5. Misc

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

• 模板引用變量

• class

• 結(jié)構(gòu)型指令

• 屬性型指令

• 雙向綁定

• 屬性綁定

• 事件綁定

格式化建議

• 五個及五個以下屬性盡量不要強制換行

• 某些屬性建議放在一起，比如 ngModel和 name，label和 value

• 元素標(biāo)簽盡量對齊（除單行元素外）

• 插值表達(dá)式盡量換行

• 和type 有關(guān)的屬性盡量前置

以下是根據(jù)以上規(guī)則格式化后的代碼：

函數(shù)格式化

我覺得模板和函數(shù)非常類似，模板屬性就好比函數(shù)參數(shù)。如果使用 Prettier 進(jìn)行格式化，函數(shù)字符超出限制之后，所有參數(shù)默認(rèn)全部折行顯示，這種方式的潛在問題和模板屬性折行的問題非常類似，我覺得函數(shù)參數(shù)如果也能用 preserve-aligned 可能會更好，但是 VSCode 無法做到這一點。

谷歌推薦 clang-format 進(jìn)行格式化，初步試了一下，并沒有達(dá)到滿意的效果，可能配置文件有點問題。我覺得關(guān)于函數(shù)的格式化問題暫時可以不必深究。

總結(jié)

代碼美化只是一種形式，它不會對邏輯產(chǎn)生任何影響，但是好的代碼格式會間接影響我們編碼的速度，甚至影響到代碼的質(zhì)量。