擁抱 prettier

prettier 是什麼？

prettier 是一個漂亮代碼格式工具。prettier 通過將JavaScript解析為AST來去除原來的代碼樣式，並且將其按照一致的格式的方式輸出。只要代碼的內容是一樣的，那麼輸出的代碼就將會是一致的。

prettier現在支持 JavaScript，TypeScript，CSS， Less， SCSS， Vue， JSON， GraphQL and Markdown。基本覆蓋了前端所有需要使用的文件。

為什麼使用？

代碼風格一項是團隊合作中比較麻煩的地方，不同的人有不同的使用方式。雖然有 eslint 之類的框架用來干這件事，但是 eslint 有很多很複雜的配置。而且 eslint 的 fix 很弱智，我們必須在寫代碼的時候就規定好格式，手工來進行格式的校正和 fix。

舉個例子：

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

這種長代碼並不好讀，eslint 雖然可以配置max-len，但是不知道如何解決他。為了美觀和易讀我們可能需要手工調整一下。下面這樣就會易讀很多。

foo( reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

這在 prettier 中會自動完成，即使你喜歡手工調整，eslit 也不能避免很多情況。下面這種情況 lint 並不會報錯，eslint 的 fix 經常會製造這樣的問題出來，看起來是錯的但是它並不能識別。往往需要手動調整。這種工作是對耐心和眼睛的考驗。

foo({ num: 3 }, 1, 2); foo( { num: 3 }, 1, 2); foo( { num: 3 }, 1, 2 );

eslint 存在多種正確答案，這對團隊合作來說是很不利的。

很多人喜歡這麼寫

myPromise .then(() => { // ... }) .then(() => { // ... }) .catch(() => { // .. });

但是也有人這樣寫：

myPromise.then(() => { // ...}).then(() => { // ...}).catch(() => { // ..});

在 eslint 中這都是 ok 的。這樣的例子有很多。團隊合作中這種代碼會造成很多摩擦。調整起來也很崩潰，lint 有很多複雜的規則，如果期望團隊中所有的人都能了解 eslint 規則，並且熟練的使用並不是很容易的事。

而 prettier 正適合用於這樣的環境，只要是AST一樣的代碼出來的格式就是一樣的。只要在 commit 之前格式化一下。所有的代碼樣式都會統一。不用擔心刪除一個空格提交，多餘一個空格需要提交，甚至引起衝突。只要業務改變了代碼才會不同，杜絕格式修改這種費眼睛的提交。

對於很多人來說代碼格式是很頭疼的事情。不同的團隊有不同的風格。如果使用 prettier，你可以隨心所欲的寫代碼，無論代碼多麼臟，你不喜歡寫分號，喜歡用雙引號或者不喜歡換行，這種不是問題，只要你寫完之後prettier一下，代碼就回變成統一的格式。無需關注細節，盡情的放縱自己寫骯髒的代碼，prettier會幫助你解決代碼風格問題。並且和同事的一模一樣。

即使是這种放飛的代碼，也可以變得漂亮。

// 格式前function foo () { var x = 5 var y = 6 var z = 7; return x + y + z }// 格式化後function foo() { var x = 5; var y = 6; var z = 7; return x + y + z;}

重要的是完全沒有學習成本，只要像原來一樣寫的就好了，寫完 prettier 一下就好了。

使用方式

命令行使用

1. 將 prettier 安裝到自己的項目

yarn add prettier --dev --exact

1. 格式化一個代碼文件

yarn prettier --write src/index.js

vscode 使用

如果是 vscode 可以安裝 prettier 插件來完成這個工作，可以直接取代原來的格式化工具。

使用起來體驗更佳。

所有主流的編輯器都已經支持了 prettier。

具體可以查看官網的說明 https://prettier.io/

與 eslint 配合

prettier 在一些規則上和 eslint 衝突，可以使用eslint-config-prettier 關閉衝突的所有的規則。