用 prettier 格式化工具統一項目代碼風格

prettier 代碼格式化工具

詳情參考官網：https://prettier.io/

實踐

在一個老舊項目配置 prettier 格式化舊項目的代碼，達到維護風格統一的目的

1.安裝

yarn add -D prettier

建議在當前項目安裝，但也可以全局安裝 npm install -g prettier

2.配置

在項目根目錄新建 .prettierc 文件，編輯規則參考官網，例子如下：

{
  "parser": "babel",
  "trailingComma": "es5",
  "semi": true,
  "tabWidth": 2,
  "printWidth": 210,
  "useTabs": false,
  "singleQuote": true,
  "endOfLine": "lf",
  "overrides": [
    {
      "files": ["*.html"],
      "options": {
        "parser": "html"
      }
    },
    {
      "files": ["*.css"],
      "options": {
        "parser": "css"
      }
    },
    {
      "files": ["*.less"],
      "options": {
        "parser": "less"
      }
    }
  ]
}

該文件是格式化配置文件，配置多少個空格，多長換行，都在這裏配置

項目是用 angularjs + less +gulp 寫的，這裏配置了不同文件的格式化解析器，可以定製不同文件類型格式化不同的風格。

配置命令

爲了方便使用，把格式化命令寫成 npm 腳本。當然每次單獨寫命令執行也是可以的。

"scripts": {
 "fix": "npx prettier --write js/*.js component/** less/** *.html"
}

查看幫助命令 prettier --help
--write 參數是編輯源文件的意思，就是把源文件編輯格式化

本地有一些第三方的庫文件，不想被格式化，可以在根目錄配置 .prettierignore 文件：

*.min.js
*.handle.js
*.min.css
lib/
node_modules/
data/
dist/

執行格式化

yarn fix

再看源碼文件，會發現文件被格式化了。
如果格式化過程中有出錯的文件，查看提示，一般會報一些錯誤，比如：
格式化 html 文件，會提示，哪裏少了一個閉合標籤之類的。
修改好錯誤後，重新格式化一次，直至沒有錯誤提示，至此，項目風格統一工作完成。