一款超人氣代碼格式化工具prettier

一、prettier 介紹

官方自己介紹說，prettier是一款強勢武斷的代碼格式化工具，它幾乎移除了編輯器本身所有的對代碼的操作格式，然后重新顯示。就是為了讓所有用這套規則的人有完全相同的代碼。在團隊協作開發的時候更是體現出它的優勢。與eslint，tslint等各種格式化工具不同的是，prettier只關心代碼格式化，而不關心語法問題。

prettier 的優勢也很明顯，它支持 HTML/JS/JSX/TS/JSON/CSS/SCSS/LESS/VUE 等主流文件格式。下面這張圖可以很好的進行說明：

也支持目前市面上所有主流的編輯器：

二、prettier 的使用

prettier的使用可分為兩種方式：

1、使用編輯器的插件

使用編輯器插件是最為方便的一種方法，編寫完代碼，只需要一鍵即可格式化編寫的代碼，非常方便。這里已vscode為例進行說明，下面的配置是我自己的對於HTML/CSS/JS/LESS文件的prettier格式化規則：

{
    // 使能每一種語言默認格式化規則
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[less]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    
    /*  prettier的配置 */
    "prettier.printWidth": 100, // 超過最大值換行
    "prettier.tabWidth": 4, // 縮進字節數
    "prettier.useTabs": false, // 縮進不使用tab，使用空格
    "prettier.semi": true, // 句尾添加分號
    "prettier.singleQuote": true, // 使用單引號代替雙引號
    "prettier.proseWrap": "preserve", // 默認值。因為使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本樣式進行折行
    "prettier.arrowParens": "avoid", //  (x) => {} 箭頭函數參數只有一個時是否要有小括號。avoid：省略括號
    "prettier.bracketSpacing": true, // 在對象，數組括號與文字之間加空格 "{ foo: bar }"
    "prettier.disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化單獨設置
    "prettier.endOfLine": "auto", // 結尾是 \n \r \n\r auto
    "prettier.eslintIntegration": false, //不讓prettier使用eslint的代碼格式進行校驗
    "prettier.htmlWhitespaceSensitivity": "ignore",
    "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填寫在項目的.prettierignore文件中
    "prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否單獨放一行
    "prettier.jsxSingleQuote": false, // 在jsx中使用單引號代替雙引號
    "prettier.parser": "babylon", // 格式化的解析器，默認是babylon
    "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
    "prettier.stylelintIntegration": false, //不讓prettier使用stylelint的代碼格式進行校驗
    "prettier.trailingComma": "es5", // 在對象或數組最后一個元素后面是否加逗號（在ES5中加尾逗號）
    "prettier.tslintIntegration": false // 不讓prettier使用tslint的代碼格式進行校驗
}

上面只是一些基本的語言的格式化規范，prettier 每一個屬性的配置都有詳細的說明，大家可以根據自己的情況進行調整。

相信每個在vscode上編寫vue的都會下載 Vetur 插件，它目前是 vscode 上面最好用的一款vue插件。現在要說的是，如何使用prettier格式化vue的代碼。你沒法使用類似格式化html/css/js的方式來格式化vue格式的代碼，像下面這樣子的：

{
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

這樣prettier是不認識的。不過幸運的是，Vetur插件內部默認使用prettier進行格式化的，但是由於Vetur的默認格式化配置與我們期望的有所出入，所以我們需要單獨對Vetur的prettier進行配置，如下：

{
    "vetur.format.defaultFormatter.html": "prettier",
    "vetur.format.defaultFormatter.js": "prettier",
    "vetur.format.defaultFormatter.less": "prettier",
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "printWidth": 160,
            "singleQuote": true, // 使用單引號
            "semi": true, // 末尾使用分號
            "tabWidth": 4,
            "arrowParens": "avoid",
            "bracketSpacing": true,
            "proseWrap": "preserve" // 代碼超出是否要換行 preserve保留
        }
    },
}

這些配置是不會和之前配置的prettier規則沖突的。

值得提一句的是，Vetur對於html文件默認使用的是 prettyhtml，但是由於prettier也可以支持html的格式化，所以我覺得統一使用prettier對全語言的格式化是比較簡潔的，也希望prettier能夠對更多的語言進行支持。

2、使用腳本的方式

這種方式就是使用prettier指令在命令行窗口對單一文件進行格式化。
首先需要安裝prettier全局指令：

npm install -g prettier

可以使用 prettier -v 檢查是否安裝完成。

安裝好之后，使用下面指令對xxx.js文件進行格式化（使用的是prettier默認的配置規則）。

// //prettier--write <文件路勁+文件名>

prettier --write ./xxx.js

當然，默認的配置規則是不符合我們的需求的，我們需要自定義配置規則。
書寫自定義規則的文件需要是下面幾種文件和格式：

• .prettierrc 文件，支持yaml和json格式；或者加上 .yaml/.yml/.json 后綴名
• .prettierrc.toml 文件（當為toml格式的時候，后綴是必須的）
• prettier.config.js 或者 .prettierrc.js，需要返回一個對象
• package.json文件中加上"prettier"屬性

每種文件的書寫格式如下：
JSON

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

JS

// prettier.config.js or .prettierrc.js
module.exports = {
  trailingComma: "es5",
  tabWidth: 4,
  semi: false,
  singleQuote: true
};

YAML

# .prettierrc or .prettierrc.yaml
trailingComma: "es5"
tabWidth: 4
semi: false
singleQuote: true

TOML

# .prettierrc.toml
trailingComma = "es5"
tabWidth = 4
semi = false
singleQuote = true

prettier 查找配置的方式首先會找當前目錄下，使用以下指令格式化代碼：

//prettier --config --write <文件路勁+文件名>

 prettier --config --write ./xxx,js

如果prettier在當前目錄找不到配置文件，會一直向上級目錄查找，直到找到或找不到。如果我們配置文件放在別的地方，則需要手工指定配置文件的路徑：

// prettier --config <配置文件路徑+文件名> --write <文件路勁+文件名>

prettier --config ./prettier/.prettierrc --write ./xxx.js

如果覺得每次格式化一個文件比較麻煩，可以使用下面的指令，一次格式化所有文件：

prettier --config ./prettier/.prettierrc --write './*.{ts,js,css,json}'

我們一般使用這種方式的時候，就把這個配置文件寫在項目根路徑下，然后使用命令行一次性格式化項目下的所有文件。

三、以上兩種方式對比

上面兩種方式各有優劣，我們來分析一下各自的使用場景和一些問題：

第一種方式其實適合個人開發，第二種方式適合團隊開發。

至於為什么這么說，就要考慮到二者的優先級問題了。上面兩種方式如果同時存在的話，會有優先級的問題。
.prettierrc 的優先級會高於在vscode全局配置settings.json中格式化配置的優先級

也就是說，如果你在一個項目中有 .prettierrc 配置文件，然后你又在settings.json也配置了格式化規則，那么當你在vscode編輯器中對一個文件點擊鼠標右鍵[格式化文檔]的時候，格式化規則會以 .prettierrc 為准。

所以，由於編輯器settings.json每個人的設置可能都不一樣，要求每個人統一設置也不方便操作，而嵌入在項目中的配置文件則可以隨着項目到達各個開發者，而且會覆蓋每個開發者的不同代碼喜好，真正做到團隊代碼統一的效果。

以上就是所有我對prettier理解的內容，希望對你有幫助。更多精彩內容可以關注我的微信公眾號[前端隊長]，我們一同成長，一同領略技術與生活“落霞與孤鶩齊飛，秋水共長天一色”的美好。

參考鏈接：
https://blog.csdn.net/wxl1555/article/details/82857830
https://juejin.im/post/5bfcdee25188251d9e0c40f2
https://segmentfault.com/a/1190000012909159