unplugin-auto-import的配置以及eslint报错解决详解
作者:acgCode 发布时间:2024-05-10 14:09:10
unplugin-auto-import的配置和eslint报错解决
先上官网:unplugin-auto-import
unplugin-auto-import 解决了vue3-hook、vue-router、useVue等多个插件的自动导入,也支持自定义插件的自动导入,是一个功能强大的typescript支持工具。
unplugin-auto-import常用的配置如下:
AutoImport({
// 目标文件
include: [
/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
/\.vue$/, /\.vue\?vue/, // .vue
/\.md$/, // .md
],
// 全局引入插件
imports: [
// presets
'vue',
'vue-router',
// custom
{
'@vueuse/core': [
// named imports
'useMouse', // import { useMouse } from '@vueuse/core',
// alias
['useFetch', 'useMyFetch'], // import { useFetch as useMyFetch } from '@vueuse/core',
],
'axios': [
// default imports
['default', 'axios'], // import { default as axios } from 'axios',
],
'[package-name]': [
'[import-names]',
// alias
['[from]', '[alias]'],
],
},
],
// eslint报错解决
eslintrc: {
enabled: false, // Default `false`
filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
},
// 解析器,例如element-plus的ElementPlusResolver
// see https://github.com/antfu/unplugin-auto-import/pull/23/
resolvers: [
/* ... */
],
// 声明文件生成位置和文件名称
dts: './auto-import.d.ts'
})
include
和import
官方文档已经说的很明白了,我就不在这里赘述了。
eslintrc
是用来解决eslint报错问题的配置项。当enabled
为true
时,会根据filepath
生成一个eslint
的配置文件。这个文件需要引入到eslint的配置文件中,例如:
// .eslintrc.js
module.exports = {
extends: [
...
'./.eslintrc-auto-import.json'
]
}
然后一定要记得重新启动项目,这样才会生成这个配置文件。配置完成后,eslint报错就会消失。
需要注意的是,一旦生成配置文件之后,最好把enable
关掉,即改成false
。否则这个文件每次会在重新加载的时候重新生成,这会导致eslint有时会找不到这个文件。当需要更新配置文件的时候,再重新打开吧。
resolvers
可以引入解析器来进行组件声明,但是就element-plus而言,单独使用unplugin-auto-import
是无法连同样式一起导入进来的。element-plus的自动引入可以参考我之前的一篇文章,里面有比较详细的叙述。
Cannot find name ‘ref’.问题解决方法
我看到评论区有小伙伴在配置完成后会出现这个问题:
从报错代码来看,这是一个ts错误,而且是找不到名称。我们可以把问题初步定位到没有将*.d.ts
文件加入到tsconfig.json
配置文件中,所以typescript还不认识它们。
现在我们来引入一下:
{
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue",
"./auto-imports.d.ts" // 引入到这里
]
}
等一下,或者重启项目就会发现,这个问题已经解决了。
来源:https://blog.csdn.net/sayUonly/article/details/123482912


猜你喜欢
- 1.理论只要两个表的公共字段有匹配值,就将这两个表中的记录组合起来。个人理解:以一个共同的字段求两个表中符合要求的交集,并将每个表符合要求的
- 任务描述 写小论文的利器是什么呢?LaTex!写代码的利器是什么呢?VSCode!好,那么如何在VSCode上配置
- 一.问题描述 这是在工作中遇到的一段代码,原理大概和下面类似(判断某一个元素是否符合要求,不符合删除该元素,最后得到符合要求的列表
- MySQL—触发器将两个关联的操作步骤写到程序里面,并且要用事务包裹起来,确保两个操作称为一个原子操作,要么全部执行,要
- main.htm: <html>
- python中字典的key不能是可变类型。字典可存储任意类型对象,其中值可以取任何数据类型,但键必须是不可变的,如字符串、数字或元组。语法格
- 使用addEventListener事件触发执行函数的this在普通的dom操作中,若是使用addEventListener如下面的例子&l
- //实例化上传类$upload = new Zend_File_Transfer();//设置过滤器,大小限制为5M,格式为jpg,gif,
- 出现的问题状况是:在Anaconda文件下,少了Jupyter Notebook快捷键,不然每次都要打开Anaconda Navigator
- 一、 for 循环根据变量赋值的次数进行循环for item in ["tom","bob",&qu
- 在标志设计中文字与图形元素总是紧密配合,只有恰当的字体与图形搭配时才能发挥最大的视觉效果。这也意味着你不能抛开图案,只是一厢情愿地选择你自己
- 即使你没听说过“ * 六度分隔理论”,也很可能听过“凯文 • 贝肯 (Kevin Bacon)的六度分隔值游戏”。在这两个游戏中,目标都是
- 首先要下载:Graphviz - Graph Visualization Software安装完成后将安装目录的bin 路径加到系统路径中,
- 字符串打印打印函数echo: 打印值,用于单值print_r(): 人类可读方式打印,用于数组var_dump():打印结构和类型,一般用于
- 文件操作的一般内容:# 文件的操作# 打开文件 open 打开已存在文件 或者创建一个新文件open('./Test.txt'
- 1. 环境准备1.1 安装pillow 和 pytesseractpython模块库需要 pillow 和 pytesseract 这两个库
- 前言正则表达式是一个特殊的字符序列,它能帮助你方便的检查一个字符串是否与某种模式匹配。Python 自1.5版本起增加了re 模块,它提供
- 概述你是否有微信被删了好友不自知,还傻傻的给对方发消息,结果出现了下图中那尴尬的一幕的经历呢?其实我们可以用Python提前把他们找出来并自
- 本文实例为大家分享了python tkinter库实现气泡屏保和锁屏的具体代码,供大家参考,具体内容如下显示效果如下:代码: im
- Strconvstrconv包实现了基本数据类型和其字符串表示的相互转换。更多函数请查看官方文档中文文档string与int类型转换Atoi