prettier安裝到使用

What

install

why

config

run

problems?

my install progress

什麼是prettier

Prettier的中文意思是「漂亮的、機靈的」，也是一個流行的代碼格式化工具的名稱，它可以解析代碼，使用你本身設定的規則來從新打印出格式規範的代碼。
Prettier具備如下幾個有優勢：

• 可配置化
• 支持多種語言
• 集成多數的編輯器
• 簡潔的配置項
  使用Prettier在code review時不須要再討論代碼樣式，節省了時間與精力。下面使用官方的例子來簡單的瞭解下它的工做方式。

Input

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

Output

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne()
);

爲何是prettier

人是很懶惰的，你剛開始創建的一個規規整整的項目，可能一段時間事後，就回被你無數次的提交代碼弄得凌亂不堪。
就算你能保證你的編碼風格嚴謹統一，別人又該如何，每一個人都有不同的編碼風格，要保持統一，就要對項目進行適當的管理。

install

官網：

npm install --save-dev eslint-config-prettier

npm：

npm install --save-dev --save-exact prettier
# or globally
npm install --global prettier

yarn:

yarn add prettier --dev --exact
# or globally
yarn global add prettier

config

add eslint-config-prettier to the "extends" array in your .eslintrc.* file. Make sure to put it last, so it gets the chance to override other configs.

{
  "extends": [
    "some-other-config-you-use",
    "prettier"
  ]
}

eslint-plugin-prettier插件會調用prettier對你的代碼風格進行檢查，其原理是先使用prettier對你的代碼進行格式化，而後與格式化以前的代碼進行對比，若是過出現了不一致，這個地方就會被prettier進行標記。
接下來，咱們須要在rules中添加，「prettier/prettier」: 「error」，表示被prettier標記的地方拋出錯誤信息。

//.eslintrc.js
{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

如何對Prettier進行配置

一共有三種方式支持對Prettier進行配置：
一、根目錄建立.prettierrc文件，可以寫入YML、JSON的配置格式，而且支持.yaml/.yml/.json/.js後綴；
二、根目錄建立.prettier.config.js 文件，並對外export一個對象；
三、在package.json中新建prettier屬性。
下面咱們使用prettierrc.js的方式對prettier進行配置，同時講解下各個配置的做用。

module.exports = {
  "printWidth": 80, //一行的字符數，若是超過會進行換行，默認爲80
  "tabWidth": 2, //一個tab表明幾個空格數，默認爲80
  "useTabs": false, //是否使用tab進行縮進，默認爲false，表示用空格進行縮減
  "singleQuote": false, //字符串是否使用單引號，默認爲false，使用雙引號
  "semi": true, //行位是否使用分號，默認爲true
  "trailingComma": "none", //是否使用尾逗號，有三個可選值"<none|es5|all>"
  "bracketSpacing": true, //對象大括號直接是否有空格，默認爲true，效果：{ foo: bar }
  "parser": "babylon" //代碼的解析引擎，默認爲babylon，與babel相同。
}

problems？？？

藉助ESLint的autofix功能，在保存代碼的時候，自動將拋出error的地方進行fix。???
沒有fix啊？

my install progress

一、下載失敗

解決措施：刪除掉node_modules從新下載

由官網得，要想使用eslint-check這個script，須要在eslint的配置文件中添加內容，我沒有添加，添加以後就成功了
eslint-config-prettier also ships with a little CLI tool to help you check if your configuration contains any rules that are unnecessary or conflict with Prettier.

First, add a script for it to package.json:

{
  "scripts": {
    "eslint-check": "eslint --print-config path/to/main.js | eslint-config-prettier-check"
  }
}

而後繼續報錯，嘗試
1.全局安裝以及
2.輸入npm i eslint-plugin-prettier@latest --save-dev以後成功
發現有衝突，而後…不了了之？？
此時我驚訝的發現個人代碼變全紅了

各類小的地方開始報錯：

忽然想起以前看到有教程說借用eslint 的autofix能夠直接fix成功，而不須要本身一個一個改？？？改天設置一下

參考文檔

• 使用ESLint+Prettier來統一前端代碼風格
• prettier文檔
• prettier github
• vscode prettier