unplugin-auto-import的配置以及eslint報錯解決詳解
unplugin-auto-import的配置和eslint報錯解決
先上官網(wǎng):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官方文檔已經(jīng)說的很明白了,我就不在這里贅述了。
eslintrc是用來解決eslint報錯問題的配置項。當enabled為true時,會根據(jù)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’.問題解決方法
我看到評論區(qū)有小伙伴在配置完成后會出現(xiàn)這個問題:

從報錯代碼來看,這是一個ts錯誤,而且是找不到名稱。我們可以把問題初步定位到?jīng)]有將*.d.ts文件加入到tsconfig.json配置文件中,所以typescript還不認識它們。
現(xiàn)在我們來引入一下:
{
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue",
"./auto-imports.d.ts" // 引入到這里
]
}
等一下,或者重啟項目就會發(fā)現(xiàn),這個問題已經(jīng)解決了。
總結(jié)
到此這篇關于unplugin-auto-import配置以及eslint報錯解決的文章就介紹到這了,更多相關unplugin-auto-import配置及eslint報錯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
- vue關于eslint空格縮進等的報錯問題及解決
- vue項目中Eslint校驗代碼報錯的解決方案
- vue?eslint報錯:Component?name?“xxxxx“?should?always?be?multi-word.eslintvue的4種解決方案
- vue-cli創(chuàng)建項目時由esLint校驗導致報錯或警告的問題及解決
- vue項目下,如何用命令直接修復ESLint報錯
- vue?cli2?和?cli3去掉eslint檢查器報錯的解決
- vue?eslint報錯error?"Component?name?"*****"?should?always?be?multi-word"解決
- eslint常見的一些報錯及解決方法
相關文章
稍微學一下Vue的數(shù)據(jù)響應式(Vue2及Vue3區(qū)別)
這篇文章主要介紹了稍微學一下 Vue 的數(shù)據(jù)響應式(Vue2 及 Vue3),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
詳解Vue實戰(zhàn)指南之依賴注入(provide/inject)
這篇文章主要介紹了詳解Vue實戰(zhàn)指南之依賴注入(provide/inject),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
詳解vue2.0 transition 多個元素嵌套使用過渡
這篇文章主要介紹了詳解vue2.0 transition 多個元素嵌套使用過渡,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06
VUE:vuex 用戶登錄信息的數(shù)據(jù)寫入與獲取方式
今天小編就為大家分享一篇VUE:vuex 用戶登錄信息的數(shù)據(jù)寫入與獲取方式,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11

