Prettier+VScode 治好你的代碼潔癖

qc1iu 發(fā)布于2019-08-23 12:13 / 1205人閱讀

摘要：忍無(wú)可忍只能拔槍相見(jiàn)了。而只關(guān)心格式化文件最大長(zhǎng)度混合標(biāo)簽和空格引用樣式等。可見(jiàn)，代碼格式統(tǒng)一的問(wèn)題，交給再合適不過(guò)了。和配合使用，風(fēng)味更佳。我的配置文件如下到此，安裝完畢，使用就可格式化代碼。兩者配合才能使項(xiàng)目代碼優(yōu)雅健壯

試想一個(gè)多人開(kāi)發(fā)的項(xiàng)目，每次同步代碼，看到各個(gè)風(fēng)格迥異，換行空格混亂，4格，2格縮進(jìn)交替上演的代碼文件，分分鐘逼死強(qiáng)迫癥啊。忍無(wú)可忍只能拔槍相見(jiàn)了~~。統(tǒng)一的代碼風(fēng)格規(guī)范，對(duì)于多人開(kāi)發(fā)的大項(xiàng)目一定是必不可少的，但是口頭約定又是一定沒(méi)有用的（nice臉）。這時(shí)候就需要Prettier上場(chǎng)了，一個(gè)配置文件，配合VScode，保存即格式化，你的同事都不需要知道代碼風(fēng)格是什么，，整個(gè)團(tuán)隊(duì)只要clone項(xiàng)目，自動(dòng)保持統(tǒng)一風(fēng)格。搞定！

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上的官方解釋，其實(shí)就是簡(jiǎn)單的代碼格式工具，和esLint不同在于，ESLint只是一個(gè)代碼質(zhì)量工具(確保沒(méi)有未使用的變量、沒(méi)有全局變量，等等)。而Prettier只關(guān)心格式化文件(最大長(zhǎng)度、混合標(biāo)簽和空格、引用樣式等)。可見(jiàn)，代碼格式統(tǒng)一的問(wèn)題，交給Prettirer再合適不過(guò)了。和Eslint配合使用，風(fēng)味更佳。

Prettier怎么用

編輯器插件

CLI命令行

編輯器

這里介紹VSCode中如何配置Prettier

安裝 Prettier插件 Prettier - Code formatter
安裝插件后，調(diào)出系統(tǒng)設(shè)置就能看到prettier相關(guān)選項(xiàng)了，如圖

添加自定義配置文件.prettierrc
作為項(xiàng)目的整體代碼規(guī)范，如果依賴本地配置，顯然是不科學(xué)的，所以需要.prettierrc 文件覆蓋本地配置。我的配置文件如下

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

到此，prettier安裝完畢，使用shift+alt+f就可格式化代碼。當(dāng)然每次手動(dòng)格式化還是很費(fèi)力啊，怎么辦？自動(dòng)保存。系統(tǒng)設(shè)置中增加"editor.formatOnSave": true即可自動(dòng)保存，還要注意的一點(diǎn)是，如果同時(shí)設(shè)置了"files.autoSave": "autoSaveDelay",保存及格式化會(huì)失效。files.autoSave配置成別的選項(xiàng)即可。

另外，如果項(xiàng)目配置了.editorConfig文件，在配置了"editor.formatOnSave": true后，如果項(xiàng)目成員沒(méi)有安裝 Prettier 插件，保存時(shí)就會(huì)讀取.editorConfig文件，同樣可以格式化代碼。啟用 Prettier 插件后，.editorConfig的配置就會(huì)失效，讀取.prettierrc 文件的配置

命令行

命令行用法需要安裝prettier,npm install prettier --save-dev，使用prettier write **.js 就可以格式化文件。將添加到你的NPM腳本中，prettier --write "./src/**/*.js,這樣就可以批量格式化項(xiàng)目中的所有文件了。

結(jié)語(yǔ)

prettier只關(guān)心代碼格式，顯然是不夠的。項(xiàng)目中還是要引入ESlint。兩者配合才能使項(xiàng)目代碼優(yōu)雅健壯