超人氣程式碼格式化工具prettier

道廷途說發表於2019-04-28

一、prettier 介紹

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

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

超人氣程式碼格式化工具prettier

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

超人氣程式碼格式化工具prettier

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

超人氣程式碼格式化工具prettier

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

參考連結：

blog.csdn.net/wxl1555/art…

juejin.im/post/5bfcde…

segmentfault.com/a/119000001…

相關文章