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

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

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

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

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

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

格式化之后

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100790.html

相關(guān)文章

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

摘要：我們?cè)谇懊娴乃钠薪榻B了這些工具，可以完成以最小的代價(jià)在提交到遠(yuǎn)程倉庫前，格式化為統(tǒng)一風(fēng)格的代碼，大家都很熟悉這里就不列舉了。下面舉一個(gè)配置。這里對(duì)于項(xiàng)目里分別做了提交前格式化操作，對(duì)于提交規(guī)范做了校驗(yàn)。我們?cè)谇懊娴乃钠薪榻B了husky、commitlint、lint-staged、prettier這些工具，可以完成以最小的代價(jià)在Git提交到遠(yuǎn)程倉庫前，格式化為統(tǒng)一風(fēng)格的代碼，es...

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

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

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

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

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

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

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

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

yangrd 2019-08-22 17:01 評(píng)論0 收藏0