使用自動(dòng)導(dǎo)入后eslint報(bào)錯(cuò)eslint9的問(wèn)題及解決方法
前提:使用pnpm create vue@latest
創(chuàng)建vue應(yīng)用,并且在創(chuàng)建項(xiàng)目時(shí)就勾選eslint和prettier,不然有些配置還需要手動(dòng)配,比如解決eslint和prettier的沖突問(wèn)題
1. 解決使用自動(dòng)導(dǎo)入后Eslint報(bào)錯(cuò)問(wèn)題
配置vite.config.ts
// 自動(dòng)導(dǎo)入api AutoImport({ resolvers: [ElementPlusResolver()], imports: ['vue', 'pinia', 'vue-router'], // dts: 'src/auto-imports.d.ts', // 生成自動(dòng)導(dǎo)入的類型聲明文件 eslintrc: { enabled: true, // 生成 ESLint 兼容的配置文件,運(yùn)行程序后會(huì)生成下面這個(gè)文件,再設(shè)置成false filepath: './.eslintrc-auto-import.json', // 指定 ESLint 配置文件路徑 }, }),
eslint.config.ts配置
import { createRequire } from 'module' const require = createRequire(import.meta.url) const autoImportConfig = require('./.eslintrc-auto-import.json') export default defineConfigWithVueTs( ....... { languageOptions: { // 導(dǎo)入變量 globals: { ...autoImportConfig.globals, // 自動(dòng)導(dǎo)入的全局變量 }, }, )
2. eslint完整配置文件
import pluginVue from 'eslint-plugin-vue' // Vue規(guī)范 import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript' import globals from 'globals' import { createRequire } from 'module' const require = createRequire(import.meta.url) const autoImportConfig = require('./.eslintrc-auto-import.json') // 它禁用了所有不必要的或可能與 Prettier 沖突的規(guī)則,確保將其放在最后,以便有機(jī)會(huì)覆蓋其他配置。 import skipFormatting from '@vue/eslint-config-prettier/skip-formatting' export default defineConfigWithVueTs( { name: 'app/files-to-lint', files: ['**/*.{ts,mts,tsx,vue}'], }, { name: 'app/files-to-ignore', ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'], }, { languageOptions: { // 導(dǎo)入變量后,在項(xiàng)目中使用瀏覽器、node、自定義的變量時(shí)就不會(huì)報(bào)錯(cuò) globals: { ...globals.browser, // 瀏覽器全局變量 ...globals.node, // Node.js 全局變量 ...autoImportConfig.globals, // 自動(dòng)導(dǎo)入的全局變量 }, }, }, pluginVue.configs['flat/essential'], vueTsConfigs.recommended, skipFormatting, { // 自定義規(guī)則 rules: { 'vue/multi-word-component-names': 'off', // 禁用 簡(jiǎn)單名字 規(guī)則 'no-console': 'off', 'no-debugger': 'off', }, }, { // 那些文件不需要eslint校驗(yàn) ignores: ['**/dist/**', '**/node_modules/**', '.css'], }, )
到此這篇關(guān)于使用自動(dòng)導(dǎo)入后eslint報(bào)錯(cuò)eslint9的問(wèn)題及解決方法的文章就介紹到這了,更多相關(guān)自動(dòng)導(dǎo)入后Eslint報(bào)錯(cuò)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue3編譯報(bào)錯(cuò)ESLint:defineProps is not defined no-undef的問(wèn)題
- React項(xiàng)目中報(bào)錯(cuò):Parsing error: The keyword 'import' is reservedeslint的問(wèn)題及解決方法
- 解決vue3報(bào)錯(cuò):Unexpected?mutation?of?“xxx“?prop.(eslintvue/no-mutating-props)
- vscode eslint插件報(bào)錯(cuò)Parsing error: Invalid ecmaVersion問(wèn)題
- vue中eslint導(dǎo)致的報(bào)錯(cuò)問(wèn)題及解決
- eslint常見(jiàn)的一些報(bào)錯(cuò)及解決方法
- unplugin-auto-import的配置以及eslint報(bào)錯(cuò)解決詳解
- vue-cli創(chuàng)建項(xiàng)目時(shí)由esLint校驗(yàn)導(dǎo)致報(bào)錯(cuò)或警告的問(wèn)題及解決
相關(guān)文章
Vue3.x源碼調(diào)試的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue3.x源碼調(diào)試的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10Vuex數(shù)據(jù)持久化實(shí)現(xiàn)的思路與代碼
Vuex數(shù)據(jù)持久化可以很好的解決全局狀態(tài)管理,當(dāng)刷新后數(shù)據(jù)會(huì)消失,這是我們不愿意看到的。這篇文章主要給大家介紹了關(guān)于Vuex數(shù)據(jù)持久化實(shí)現(xiàn)的思路與代碼,需要的朋友可以參考下2021-05-05簡(jiǎn)單談?wù)刅ue3中的ref和reactive
vue3中實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)的方法是就是使用ref和reactive,所謂響應(yīng)式就是界面和數(shù)據(jù)同步,能實(shí)現(xiàn)實(shí)時(shí)更新,下面這篇文章主要給大家介紹了關(guān)于Vue3中ref和reactive的相關(guān)資料,需要的朋友可以參考下2023-04-04vue路由對(duì)不同界面進(jìn)行傳參及跳轉(zhuǎn)的總結(jié)
這篇文章主要介紹了vue路由對(duì)不同界面進(jìn)行傳參及跳轉(zhuǎn)的總結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04vue中$set的使用(結(jié)合在實(shí)際應(yīng)用中遇到的坑)
這篇文章主要介紹了vue中$set的使用(結(jié)合在實(shí)際應(yīng)用中遇到的坑),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07