记录在TS中,使用autoImport插件自动导入ElMessage组件报错的坑（vite+vue3+element plus + Eslint）

遇到的问题

在使用了element plus官方推荐的unplugin-vue-components 和 unplugin-auto-import这两款自动按需引入组件的插件时，当使用了像ElMessage这种直接使用的UI组件时，编辑器会直接爆红并提示未找到相关名称。

最初的解决方案

看了网上的大多数解决方案，大致只需配置以下两处地方方可：

一、在tsconfig.json文件中声明要编译的类型描述文件auto-imports.d.ts

二、如果使用了eslint插件，则还需要再在eslint.cjs文件中配置全局变量属性声明相应的组件如ElMessage等

OK，万事俱全，只需重启VScode编辑器便可。接着回到引用了ElMessage组件的页面查看，结果发生了惊喜，不但问题没解决，反而tsconfig.json还多了一个问题，reference配置出问题了！！！

最终的解决方案

经过一番打量，以references这个配置选项为切入点，得到关于references配置的介绍——用来设置需要引用的底层项目。既然如此，那我就打开了引用的两个路径文件tsconfig.node.json和tsconfig.app.json

既然在tsconfig.json中配置include报错，而tsconfig.json中有引用了tsconfig.app.json文件，那我索性在tsconfig.app.json文件中配置include

Ctrl + S保存，问题解决，而且无需再eslint配置文件中声明全局变量！！！

题外话

在Vue3 + TS +Vite项目中引用element plus中文包报错问题

可以在根目录的env.d.ts文件中声明Element Plus组件库的中文包的类型描述