vue3组件传值defineProps/回调defineEmits/子组件属性defineExpose/'defineProps' is not defined/Unexpected 'debugger' statement no-debugger/no-unused-vars/is assigned a value but never used

使用defineProps进行父子组件传值，报异常：'defineProps' is not defined，没法用，看了很多文章都说配置在vue.config.js中：我的vue-cli版本是5.0.8  ，2022-08月装的。

module.exports = {
  env: {
    "node":true,
    "vue/setup-compiler-macros": true
  }
}

可是我配置进去，报没有 env 的错误，后来发现在package.json中有此配置

"eslintConfig": {
    "root": true,
    "env": {
      "node": true,
      "vue/setup-compiler-macros": true
    },
}

　　把这一段配置加到这里就可以使用了，https://eslint.vuejs.org/user-guide/#installation

父组件：用组合式api很简洁的啊，别用老一套了。

<template>
  <input
    type="text"
    v-model="message"
  />
  <test-com
    :address='message'
    @handle='callbackHandle'
    ref='childComponentInfo'
  />
  <br />
  <button @click="getchildComponentInfo()">UserName</button>
</template>
<script setup>
// 组合式api
import { ref } from "vue";
import TestCom from "./components/TestCom.vue";
const message = ref("Hello Vue!");
const childComponentInfo = ref(null);//定义一个属性，指定为子组件实例，可以访问子组件暴露出的属性
const callbackHandle = (addr) => {
  console.log("parent:" + addr);
};
const getchildComponentInfo = () => {
  console.log("userName:"+childComponentInfo.value.userInfo.userName);
  console.log("stuName:"+childComponentInfo.value.stuInfo.stuName);
};

</script>
// <script>
// 选项式api
// import HelloWorld from "./components/HelloWorld.vue";
// export default {
//   name: "App",
//   components: {
//     // HelloWorld,
//     TestCom,
//   },
//   methods: {
//     callbackHandle(addr) {
//       console.log("parent:" + addr);
//     },
//   },
//   data() {
//     return {
//       message: "Hello Vue!",
//     };
//   },
// };
//
</script>

子组件：

<script setup>
import {reactive} from 'vue'
// const props = defineProps(['address']);//写法1
//写法2，带类型
const props = defineProps({
  address: String,
});
const emits = defineEmits(["handle"]);
const userInfo = reactive({userName:"jay.star",age:33});
const stuInfo = reactive({stuName:"jack",age:22});
defineExpose({userInfo,stuInfo});//暴露子组件的属性，父组件可以直接访问
const btnClick = function () {
  console.log("child:" + props.address);
  emits("handle", props.address);
};
</script>
<template>
  <div>
    {{props.address}}
    <br />
    {{userInfo}}
    <button @click="btnClick()">ShowName</button>
  </div>
</template>

　　方便。。。https://blog.csdn.net/qq_43185384/article/details/125208794
https://cn.vuejs.org/guide/essentials/template-refs.html#ref-on-component

问题：Unexpected 'debugger' statement no-debugger，package.json 中的rules节点加入可调试的配置，这样就可以在js中加debugger来调试了

"eslintConfig": {
    "root": true,
    "env": {
      "node": true,
      "vue/setup-compiler-macros": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {
      "no-debugger": "off",
      "no-console": "off"
    }
  },

　　已声明的变量或函数没有被使用，会报错 obj is assigned a value but never used，加上配置 no-unused-vars 可以忽略，避免报错

"rules": {
      "no-debugger": "off",
      "no-console": "off",
      "no-unused-vars": [
        "error",
        {
          "varsIgnorePattern": ".*",
          "args": "none"
        }
      ]
    }

　　子组件传入复杂类型的props：https://cn.vuejs.org/guide/typescript/composition-api.html