prettier淺出

1.兩大linter提及

• eslint 爲js而設計的可插拔的檢查程序
• tslint 爲ts語言而設計的可擴展的檢查工具（將在2019年取消更新，建議使用eslint）

兩種linter均可以實現fix功能，所謂fix就是將原代碼轉化爲符合必定規則的新代碼。雖然linter工具fix以後的代碼，解決了大部分問題，但可能有些地方並不符合咱們的閱讀代碼的習慣，好比一行代碼過長。

在強迫症的影響下，不一樣的人對本身的代碼進行不一樣程度的」美化「，甚至遇到他人代碼時也會順手美化一把。

最終致使項目中的代碼風格不能統一。

2.prettier簡介

prettier是一種保證代碼一致性、兼具美化效果的代碼格式化工具

2.1 not only js

前有jslint，然後因爲eslint過於成功，致使了jslint已經無人問津，這也讓咱們誤覺得eslint只專一於js
下面列舉了它所支持的其餘語言

• javascript、jsx
• flow、typescript
• json
• css、less、scss
• graphql
• markdown
• yaml

2.2 IDE

有人的地方就有江湖，有編輯器的地方就有prettier，目前流行的ide都能支持prettier

• vscode
• webstorm
• atom
• visual studio
• sublime

以上列舉了前端比較經常使用的幾個工具，須要肯定所使用的的編輯器是否支持prettier是否支持，請移步官網

2.3 parser

prettier針對不一樣的語言，所使用的的parser有多個，例如編譯graphql時所使用的就是graphql/language。
而編譯js的目前有兩個，即babylon（默認）、flow，因爲babylon的bug較少，對編譯工做支持度較好，因此默認狀況下選用babylon便可。
babylon即babel6的編譯工具，在babel7中已改名爲@babel/parser

3.eslint融合

eslint做爲強大的linter工具，與vscode配合後能下降代碼問題的風險，在coding的過程當中就發現潛在問題，提升代碼質量。

3.1 eslint-config-prettier

eslint的config能夠繼承自第三方包的config，config中定義了rules的開關規則，eslint-config-prettier主要定義了prettier格式化後致使eslint報錯的那些規則

3.2 eslint-plugin-prettier

eslint與prettier的格式化須要分別進行，若是想要讓eslint fix的同時，也能兼顧prettier的規則進行格式化，就須要使用到eslint-plugin-prettier這個插件。

它的主要做用就是專門定義了eslint fix的prettier規則

3.3 融合寫法

在.eslintrc文件中加入如下配置

{
  "extends": ["plugin:prettier/recommended"]
}

這段代碼有三個做用

• 繼承prettier的config規則
• 開啓rules的 "prettier/prettier": "error"
• eslint fix的同時執行prettier格式化