用 Prettier 美化程式碼

阿里云云棲社群發表於2018-04-13

摘要：Eslint 解決了程式碼格式檢查的問題，同時，一些有用的提示能讓我們發現 bug 和無用程式碼（如 no-unused-vars, no-extra-bind, no-implicit-globals）。但是，eslint 並不能自動幫我們美化程式碼，自動讓程式碼風格統一，格式優美。EditorConfig 部分解決了這個問題，它解決了程式碼縮緊，行末不出現空格符等問題，但是對於統一整個程式碼的風格，這些做得還是太少了。Prettier 很好地解決了剩下的問題，通過配置，我們可以制定想要的程式碼風格，然後通過指令碼或編輯器外掛來一鍵格式化／美化程式碼。

安裝使用

安裝

# 全域性或本地安裝二選一，都能生效
npm install --save-dev prettier    # 本地 
npm install --g prettier           # 全域性複製程式碼

使用

prettier [opts] [filename ...]
# 例子
prettier --single-quote --trailing-comma es5 --write "{app,__{tests,mocks}__}/**/*.js"複製程式碼

編輯器設定

一般我們配合編輯器使用 Prettier，這樣我們在寫程式碼時即可美化程式碼，及時看到效果。以 sublime 為例，可以這麼設定：

1、安裝 Js​Prettier 外掛

首先要確定已經全域性或區域性安裝了 prettier 的 npm 包。

  • ctrl/cmd + shift + p 輸入 Install Package
  • 然後輸入 JsPrettier 找到包並安裝

2、使用 Js​Prettier

ctrl/cmd + shift + p 輸入 JsPrettier: Format Code.

點選即可格式化當前檔案程式碼。

或者設定快捷鍵 { "keys": ["super+alt+f"], "command": "js_prettier" }。

3、編寫自己的配置檔案

如果不編寫自己的配置檔案，一般會使用 sublime JsPrettier 外掛自帶的配置檔案。我們希望使用專案自己的配置檔案，可以在專案根目錄下編寫 .prettierrc 檔案。
prettier 查詢配置的方式首先會找當前目錄下的 .prettierrc 檔案，找不到會一直向上級目錄查詢，直到找到或找不到。

參考配置

.prettierrc 

{
  "printWidth": 120,               // 換行字串閾值
  "semi": true,                    // 句末加分號
  "singleQuote": true,             // 用單引號
  "trailingComma": "none",         // 最後一個物件元素加逗號
  "bracketSpacing": true,          // 物件，陣列加空格
  "jsxBracketSameLine": false,     // jsx > 是否另起一行
  "arrowParens": "avoid",          // (x) => {} 是否要有小括號
  "requirePragma": false,          // 是否要註釋來決定是否格式化程式碼
  "proseWrap": "preserve"          // 是否要換行
}
複製程式碼

參考文件

原文作者：過客匆匆_

原文連結


相關文章