前端代碼風(fēng)格自動化系列（四）之Prettier

wangjuntytl 發(fā)布于2019-08-23 14:33 / 548人閱讀

摘要：這里有個官網(wǎng)的例子格式化之后讓我們專注于業(yè)務(wù)邏輯，無需再糾結(jié)代碼風(fēng)格，配合其它工具，實現(xiàn)了代碼提交到倉庫前，統(tǒng)一格式化。

Prettier是一個支持多語言的代碼格式工具，如常用的：js、jsx、Vue、Flow、Ts、HTML、CSS等，非常全面，將代碼解析為AST，然后重新組裝，目的是最終輸出風(fēng)格統(tǒng)一的代碼，對比eslint對error的fix要強(qiáng)一些，如最大長度的改動，eslint只是對有問題的地方進(jìn)行格式化修改，不改動源代碼風(fēng)格，而prettier是對全量的代碼進(jìn)行格式化。

安裝

npm install --save-dev prettier

配置

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,json,css,md}": ["prettier --write", "git add"]
  }
}

這里我們結(jié)合之前用到的husky、lint-staged，默認(rèn)prettier是直接標(biāo)準(zhǔn)輸出到終端的，--write，這個配置代表直接改寫文件。

這里有個官網(wǎng)的例子

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

格式化之后

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

prettier讓我們專注于業(yè)務(wù)邏輯，無需再糾結(jié)代碼風(fēng)格，配合其它工具，實現(xiàn)了代碼提交到倉庫前，統(tǒng)一格式化。

云服務(wù)器 GPU云服務(wù)器系列之系列之二架構(gòu)之坑系列代碼風(fēng)格

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/100790.html

相關(guān)文章

前端代碼風(fēng)格自動化系列（五）之共同出擊

摘要：我們在前面的四篇中介紹了這些工具，可以完成以最小的代價在提交到遠(yuǎn)程倉庫前，格式化為統(tǒng)一風(fēng)格的代碼，大家都很熟悉這里就不列舉了。下面舉一個配置。這里對于項目里分別做了提交前格式化操作，對于提交規(guī)范做了校驗。我們在前面的四篇中介紹了husky、commitlint、lint-staged、prettier這些工具，可以完成以最小的代價在Git提交到遠(yuǎn)程倉庫前，格式化為統(tǒng)一風(fēng)格的代碼，es...

pumpkin9 2019-08-23 14:33 評論0 收藏0
更新版-梳理前端開發(fā)使用eslint和prettier來檢查和格式化代碼問題

摘要：整個代碼檢查和格式化流程應(yīng)該規(guī)范為如下步驟使用并且嘗試自動修復(fù)所有問題有提示，可以進(jìn)行修復(fù)，按照配置文件來進(jìn)行修復(fù)。參考文檔如何花分鐘解決產(chǎn)生的各種錯誤的記憶現(xiàn)場本文轉(zhuǎn)載自我的更新版梳理前端開發(fā)使用和來檢查和格式化代碼問題更新版，之前的版本可以看這里：梳理前端開發(fā)使用eslint和prettier來檢查和格式化代碼問題一、問題痛點在團(tuán)隊的項目開發(fā)過程中，代碼維護(hù)所占的時間比重...

GitChat 2019-08-26 12:02 評論0 收藏0
我為什么推薦Prettier來統(tǒng)一代碼風(fēng)格

摘要：但是，有條原則應(yīng)該是對的少數(shù)服從多數(shù)用工具統(tǒng)一風(fēng)格。我曾經(jīng)以為，程序員有自己獨特的代碼風(fēng)格挺好的。業(yè)界有一些流行的代碼風(fēng)格，比如和。你也可以使用來統(tǒng)一風(fēng)格。比如，的配置，只能統(tǒng)一示例的代碼風(fēng)格，而不能統(tǒng)一后面兩者。相比于代碼風(fēng)格，我更推薦。譯者按: 關(guān)于代碼風(fēng)格，不同的人有不同的偏好，其實并沒有什么絕對的對錯。但是，有 2 條原則應(yīng)該是對的：少數(shù)服從多數(shù)；用工具統(tǒng)一風(fēng)格。原文...

YJNldm 2019-08-23 16:11 評論0 收藏0
使用ESLint+Prettier來統(tǒng)一前端代碼風(fēng)格

摘要：但是關(guān)于代碼風(fēng)格，我們很難區(qū)分誰對誰錯，不同的人有不同偏好，唯有強(qiáng)制要求才能規(guī)避爭論。所以，團(tuán)隊關(guān)于代碼風(fēng)格必須遵循兩個基本原則少數(shù)服從多數(shù)用工具統(tǒng)一風(fēng)格。本文將介紹，如何使用來統(tǒng)一我們的前端代碼風(fēng)格。加分號還是不加分號？tab還是空格？你還在為代碼風(fēng)格與同事爭論得面紅耳赤嗎？正文之前，先看個段子放松一下：去死吧！你這個異教徒！想起自己剛?cè)胄械臅r候，從svn上把代碼checko...

Corwien 2019-08-22 18:07 評論0 收藏0
梳理前端開發(fā)使用eslint-prettier檢查和格式化代碼

摘要：梳理前端開發(fā)使用檢查和格式化代碼問題痛點在團(tuán)隊的項目開發(fā)過程中，代碼維護(hù)所占的時間比重往往大于新功能的開發(fā)。使用格式化所有代碼。參考文檔如何花分鐘解決產(chǎn)生的各種錯誤的記憶現(xiàn)場原文轉(zhuǎn)載梳理前端開發(fā)使用檢查和格式化代碼線上猛如虎，線下慫如鼠梳理前端開發(fā)使用eslint-prettier檢查和格式化代碼問題痛點在團(tuán)隊的項目開發(fā)過程中，代碼維護(hù)所占的時間比重往往大于新功能的開發(fā)。因此編...

yangrd 2019-08-22 17:01 評論0 收藏0