Prettier+VScode 治好你的代碼潔癖

試想一個多人開發的項目，每次同步代碼，看到各個風格迥異，換行空格混亂，4格，2格縮進交替上演的代碼文件，分分鐘逼死強迫症啊。忍無可忍只能拔槍相見了~~。統一的代碼風格規範，對於多人開發的大項目必定是必不可少的，可是口頭約定又是必定沒有用的（nice臉）。這時候就須要Prettier上場了，一個配置文件，配合VScode，保存即格式化，你的同事都不須要知道代碼風格是什麼，，整個團隊只要clone項目，自動保持統一風格。搞定！

Prettier是什麼

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

以上是github上的官方解釋，其實就是簡單的代碼格式工具，和esLint不一樣在於，ESLint只是一個代碼質量工具(確保沒有未使用的變量、沒有全局變量，等等)。而Prettier只關心格式化文件(最大長度、混合標籤和空格、引用樣式等)。可見，代碼格式統一的問題，交給Prettirer再合適不過了。和Eslint配合使用，風味更佳。

Prettier怎麼用

• 編輯器插件
• CLI命令行

編輯器

這裏介紹VSCode中如何配置Prettier

• 安裝 Prettier插件 Prettier - Code formatter
  安裝插件後，調出系統設置就能看到prettier相關選項了，如圖
  

• 添加自定義配置文件.prettierrc
  做爲項目的總體代碼規範，若是依賴本地配置，顯然是不科學的，因此須要.prettierrc 文件覆蓋本地配置。個人配置文件以下

  {
        "singleQuote": true,
        "trailingComma": "es5",
        "printWidth": 140,
        "overrides": [
          {
            "files": ".prettierrc",
            "options": { "parser": "json" }
          }
        ]
      }

到此，prettier安裝完畢，使用shift+alt+f就可格式化代碼。固然每次手動格式化仍是很費力啊，怎麼辦？自動保存。系統設置中增長"editor.formatOnSave": true便可自動保存，還要注意的一點是，若是同時設置了"files.autoSave": "autoSaveDelay",保存及格式化會失效。files.autoSave配置成別的選項便可。

另外，若是項目配置了.editorConfig文件，在配置了"editor.formatOnSave": true後，若是項目成員沒有安裝 Prettier 插件，保存時就會讀取.editorConfig文件，一樣能夠格式化代碼。啓用 Prettier 插件後，.editorConfig的配置就會失效，讀取.prettierrc 文件的配置

命令行

命令行用法須要安裝prettier,npm install prettier --save-dev，使用prettier write **.js 就能夠格式化文件。將添加到你的NPM腳本中，prettier --write './src/**/*.js,這樣就能夠批量格式化項目中的全部文件了。

結語

prettier只關心代碼格式，顯然是不夠的。項目中仍是要引入ESlint。二者配合才能使項目代碼優雅健壯