前端代碼風格自動化系列（四）之Prettier

wangjuntytl 發布于2019-08-23 14:33 / 549人閱讀

摘要：這里有個官網的例子格式化之后讓我們專注于業務邏輯，無需再糾結代碼風格，配合其它工具，實現了代碼提交到倉庫前，統一格式化。

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

安裝

npm install --save-dev prettier

配置

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

這里我們結合之前用到的husky、lint-staged，默認prettier是直接標準輸出到終端的，--write，這個配置代表直接改寫文件。

這里有個官網的例子

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

格式化之后

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

prettier讓我們專注于業務邏輯，無需再糾結代碼風格，配合其它工具，實現了代碼提交到倉庫前，統一格式化。

云服務器 GPU云服務器系列之系列之二架構之坑系列代碼風格

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/100790.html

前端代碼風格自動化系列（五）之共同出擊

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

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

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

GitChat 2019-08-26 12:02 評論0 收藏0
我為什么推薦Prettier來統一代碼風格

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

YJNldm 2019-08-23 16:11 評論0 收藏0
使用ESLint+Prettier來統一前端代碼風格

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

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

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

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