一、Prettier代碼格式化工具
Prettier 是一個代碼格式化工具，它可以支持 js/jsx/ts/flow/json/css/less/scss 等文件格式。
1、為什么要使用 Prettier？
用來替代 lint 中的一些場景，比如說分號/tab縮進/空格/引號，這些在lint工具檢查出問題之后還需要手動修改，而通常這樣的錯誤都是空格或者符號之類的，這樣相對來說不太優雅，利用格式化工具自動生成省時省力。
2、VSCode 配置 Prettier
（1）安裝 Prettier - Code formatter 插件
（2）在項目的根目錄配置 .prettierrc
{ "printWidth": 100, //每行到多少長度開始折行
"tabWidth": 2, "singleQuote": true, //單引號
"trailingComma": "none", //數組、對象最后一個元素的尾逗號
"bracketSpacing": true, //花括號前后空格
"jsxBracketSameLine": true, //使多行JSX元素最后一行末尾的 > 單獨一行
"parser": "babel", //指定使用哪一種解析器
"semi": true, //是否在行尾加分號
"useTabs": true, //使用tab（制表符）縮進而非空格
"arrowParens": "avoid", //只有一個參數的箭頭函數的參數是否帶圓括號（默認avoid不帶）
"jsxSingleQuote": true, //在JSX中使用單引號
"htmlWhitespaceSensitivity": "ignore", //為 HTML 文件定義全局空格敏感度
"quoteProps": "as-needed" //自定義引號配置
}
放到項目中時注釋要去掉。這樣 Prettier 已經安裝、配置完成了，以后用 Shift+Alt+F 格式化代碼的時候就會按照 Prettier 的配置項進行格式化。
VSCode 中，Prettier 插件使用配置文件的優先級：.prettierrc > .editorconfig > Prettier插件默認設置。
二、vscode格式化Vue出現單引號變雙引號及分號問題
問題描述：在使用vscode格式化vue代碼時，出現單引號變成了雙引號問題；並且在每行結尾都加了分號。以前習慣了用單引號，並且尤大也說了不習慣加分號。
解決方案：在項目根目錄下新建文件：.prettierrc.json，然后寫入如下內容。
{ "singleQuote":true, "semi":false }
三、vue3.0路由跳轉useRouter執行后undefined問題
1、方法一：注意 useRouter 執行一定要放在setup方法內的頂部或者其他位置，不能放在下面setup的函數里面執行，否則作用域改變，useRouter執行是undefined。
import { useRouter } from 'vue-router'; export default { setup() { // 第一步將useRouter函數執行放在頂部
const router = useRouter(); // 第二步在方法里面調用router
function toPage(){ router.push("/about"); } return { toPage } } }
2、方法二：直接從文件里引入
import router from "@/router/index.ts"; router.push("/");
四、Property 'value' does not exist on type 'HTMLElement'
在需要給 input 的 .value 重新賦值為空的時候，發現這問題。怎么解決呢？這樣即可 - 使用 HTMLInputElement
const CropperFileRef: HTMLInputElement = document.getElementById('CropperFile') as HTMLInputElement CropperFileRef && (CropperFileRef.value = '')
五、vue屬性傳遞錯誤 error Unexpected mutation of “xxxx“ prop
1、問題：
vue 傳遞屬性報錯： error Unexpected mutation of "xxxx" prop，其中xxx為屬性名
2、原因：
vue 傳遞屬性時如果沒有 .sync 修飾符，默認不允許在子組件中修改屬性，而 v-model 也算是一種修改。
如果屬性是一個對象，修改對象的屬性也算是修改，v-model 改為 :value 即可。