prettier

每個開發人員都有自己的擼碼風格，例如：

示例一

function foo(items) {return items.filter(item => item.checked).map(item => item.value); } 復制代碼function foo(items) {return items.filter(item => item.checked).map(item => item.value); } 復制代碼

示例二

const food = ['pizza','burger','pasta', ] 復制代碼const food = ["pizza", "burger", "pasta"]; 復制代碼

示例三

console.log(a ) 復制代碼console.log(a) 復制代碼

示例四

let back = '' + a + JSON.stringify(b) 復制代碼

示例五

let b = {name:'xm', age:25, sex:'male', color:'yellow'} 復制代碼let b = { name: 'xm', age: 25, sex: 'male', color: 'yellow' } 復制代碼

我們可以使用ESLint 來統一風格。但是它并不能保證代碼100%一致。

單看比較嚴格的airbnb配置，不能統一示例一、示例二、示例三，對示例四的修復是這樣的：

const back = `${a}${JSON.stringify(b)}`; 復制代碼

而這種侵入式的改寫，并不是我們期望的。

在standard和airbnb兩種標準下，示例五修復后的格式也不一樣：

standard：

let b = { name: 'xm', age: 25, sex: 'male', color: 'yellow' } 復制代碼

airbnb：

const b = {name: 'xm', age: 25, sex: 'male', color: 'yellow', }; 復制代碼

而有些小伙伴渴望是這樣的

const c = {name: 'xm',age: 25,sex: 'male',color: 'yellow', }; 復制代碼

綜上：

（1）standard標準和airbnb標準有出入，代碼風格習慣不同。

（2）在單個標準下，也不能保障代碼的100%一致。

（3）有些情況下，侵入式的改寫了代碼的表達方式。

看到仍然還有很多代碼格式不一樣的地方，關于數組的寫法，A猿認為每一項都要換行，B猿認為沒必換行，C猿認為超過一定長度再換行，D猿說，你們快統一下。

這時，很有主見的Prettier前來發炎了:"不管你們之前用的啥，老弟要亮劍了"。

• 幾乎不需要做決定，因為?Prettier的配置選項很少。
• 團隊成員不需要為規則去爭論。
• 開源代碼開發者不需要去學習項目的代碼風格。
• 不需要去修復ESLint報告的風格問題。
• 保存文件的時候可以自動統一風格。

prettier目前的使用者

prettier即可單獨使用，又可結合eslint，各取所長。走，去瞧瞧如何使用

單獨使用prettier

npm install prettier --save-dev 復制代碼

package.json

{"scripts"**:** {"format"**:** "prettier --write '**/*.{js,css,md}'"} } 復制代碼

創建文件**.prettierrc**

{"printWidth": 50,"singleQuote": true,"trailingComma": "es5" } 復制代碼

最后

npm run format復制代碼

我們看到

示例一的內容自動規范成了

let abc = items.filter(item => item.checked).map(item => item.value); 復制代碼

示例二中的內容自動規范成了

const food = ['pizza', 'burger', 'pasta']; 復制代碼

示例三的內容自動規范成了

console.log(b); 復制代碼

示例四的代碼保持原樣，并沒有做侵入式的修改

示例五自動規范成了

let b = {name: 'xm',age: 25,sex: 'male',color: 'yellow', }; 復制代碼

綜上，prettier保持了代碼的一致性，且不會侵入式修改代碼

再來看下，eslint結合prettier的使用情況

npm install prettier eslint-plugin-prettier --save-dev 復制代碼

更新.eslintrc.js or .eslintrc.json

{"plugins": ["prettier"],"rules": {"prettier/prettier": ["error",{"printWidth": 100,"singleQuote": true,"trailingComma": "es5"}]} } 復制代碼

最后執行

npm run lint test.js 復制代碼

執行順序是先進行了prettier，然后進行了eslint，若兩者有沖突的地方，以prettier為主。

---

舉起手手點贊的人，注意下，我看到了你的內涵

轉載于:https://juejin.im/post/5cd03fd351882541773182df

總結

以上是生活随笔為你收集整理的【代码规范】prettier的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。