prettier安裝到使用

What
install
why
config
run
problems?
my install progress

什麼是prettier

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

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

Input

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

Output

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

爲何是prettier

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

install

官網:node

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

npm:git

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

yarn:github

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.npm

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

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

//.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進行配置,同時講解下各個配置的做用。segmentfault

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啊?babel

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成功,而不須要本身一個一個改???改天設置一下

參考文檔

相關文章
相關標籤/搜索