超人氣代碼格式化工具prettier

1、prettier 介紹

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

目前在github上已經有了31.5k的star。

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

也支持目前市面上全部主流的編輯器：

2、prettier 的使用

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

一、使用編輯器的插件

使用編輯器插件是最爲方便的一種方法，編寫完代碼，只須要一鍵便可格式化編寫的代碼，很是方便。這裏已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可以對更多的語言進行支持。

二、使用腳本的方式

這種方式就是使用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}'
複製代碼

咱們通常使用這種方式的時候，就把這個配置文件寫在項目根路徑下，而後使用命令行一次性格式化項目下的全部文件。

3、以上兩種方式對比

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

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

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

也就是說，若是你在一個項目中有 .prettierrc 配置文件，而後你又在settings.json也配置了格式化規則，那麼當你在vscode編輯器中對一個文件點擊鼠標右鍵[格式化文檔]的時候，格式化規則會以 .prettierrc 爲準。

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

以上就是全部我對prettier理解的內容，但願對你有幫助。更多精彩內容能夠關注個人微信公衆號[前端隊長]，咱們一同成長，一同領略技術與生活「落霞與孤鶩齊飛，秋水共長天一色」的美好。

參考連接：

blog.csdn.net/wxl1555/art…

juejin.im/post/5bfcde…

segmentfault.com/a/119000001…