什麼是Prettier
Prettier 是一個 “有主見”的代碼格式化工具，支援在日常開發中很多場景使用：
Prettier 官網位址： https://prettier.io/
安裝
在這裡，我們的包管理工具依然選擇yarn。
$ yarn add prettier --dev
安裝完成後，檢視package.json檔案
{ "name": "vue3-meteor", "version": "0.0.0", "scripts": { "dev": "vite", "build": "vite build" }, "dependencies": { "vue": "^3.0.2", "vue-router": "^4.0.0-rc.5", "vuex": "^4.0.0-rc.2" }, "devDependencies": { "@vue/compiler-sfc": "^3.0.2", "prettier": "^2.2.1", "vite": "^1.0.0-rc.8" }}
配置
安裝完成後，Prettier内置的一套預設的參數，https://prettier.io/docs/en/options.html
我們可以通過建立 .prettierrc 檔案，實作參數的自定義：
{ "singleQuote": true, "tabWidth": 2, "useTabs": true, "arrowParens": "avoid", "vueIndentScriptAndStyle": true, "jsxBracketSameLine": true, "trailingComma": "none"}
配置webstorm
如果想要在檔案儲存的時候就對目前檔案進行Prettier格式化處理，就需要借助IDE了。在這裡，我使用的是WebStorm，日常開發Java應用使用的IDEA，是以前端開發選擇了和IDEA全家桶中的WebStorm。IDEA本身也支援前端開發，更多的時候是使用它開發後端Java應用，隻是單純開發前端的話，是用IDEA就會顯的有點重了。
啟用
修改檔案後執行儲存，webstorm就會對目前檔案執行prettier。
總結
為什麼要使用Prettier呢？
前端開發文法支援太靈活了，導緻團隊中每個人的代碼風格可能不盡相同。一個統一的、标準的代碼規範不僅可以提高代碼的可讀性，還能有效的增強系統的可維護性。一個團隊在統一的、标準的規範下實作的代碼，可以看起來像是一個人開發的，友善了新員工的快速上手。
個人公衆号: Java碼農