prettier是一款解決程式碼風格問題的程式碼格式化工具，功能強大，簡單易用，支援多語言，減少配置項。

前端開發過程中每個人寫JavaScript的程式碼風格都不一樣，又不能說別人寫的程式碼有問題，這都是習慣的問題，比如有的人寫if-else語句有以下的寫法：

if(name == 'zeng'){
  alert('good')  
}
else{
    alert('bad')
}

//另一種寫法
if(name == 'zeng'){
  alert('good')  
}else{
    alert('bad')
}

//再者
if(name == 'zeng')
{
  alert(
 
'good')  
}
else
{
    alert('bad')
}

這麼多的不同寫法，讓人看到就頭疼，如果複雜一點的，就更費心費力 了。將不同種的風格統一化，這就是prettier強大。現在先來安裝

Install with yarn:

//本地安裝
    yarn add prettier -dev --exact
    //全域性安裝
    yarn global add prettier

install with npm:

npm install --save-dev  --save-exact prettier
//或者
npm install --global prettier

第一種使用方法：

//src/App.vue是需要格式化的檔案
npx prettier --write src/App.vue

 格式化程式碼前：

格式化程式碼後：

第二種使用方法，在package.json中加入如下程式碼：

{
  “scripts”: {
    "format": "prettier --write src/*.{js,css,md,vue}"
    }  
}

然後建立一個配置檔案，.prettierrc

//.prettierrc

{
    "printWidth": 100,
    "singleQuote": true,
    "trailingComma": "es5",
    
 
"parser":"vue",
    "tabWidth": 2
}

然後使用如下命令進行格式化執行：

npm run format

格式化前後對比：

大功告成。prettier之後的程式碼更漂亮，再也不用擔心寫的程式碼亂七八糟不規範了。