Vue3实践指南：Prettier代码格式化工具、格式化Vue出现单引号变双引号及分号问题、useRouter执行后undefined问题、Property 'value' does not exist on type 'HTMLElement'、error Unexpected mutation of “xxxx“ prop

一、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 即可。