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