使用自動(dòng)導(dǎo)入后eslint報(bào)錯(cuò)eslint9的問題及解決方法
前提:使用pnpm create vue@latest創(chuàng)建vue應(yīng)用,并且在創(chuàng)建項(xiàng)目時(shí)就勾選eslint和prettier,不然有些配置還需要手動(dòng)配,比如解決eslint和prettier的沖突問題
1. 解決使用自動(dòng)導(dǎo)入后Eslint報(bào)錯(cuò)問題
配置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', // 禁用 簡單名字 規(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的問題及解決方法的文章就介紹到這了,更多相關(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的問題
- React項(xiàng)目中報(bào)錯(cuò):Parsing error: The keyword 'import' is reservedeslint的問題及解決方法
- 解決vue3報(bào)錯(cuò):Unexpected?mutation?of?“xxx“?prop.(eslintvue/no-mutating-props)
- vscode eslint插件報(bào)錯(cuò)Parsing error: Invalid ecmaVersion問題
- vue中eslint導(dǎo)致的報(bào)錯(cuò)問題及解決
- eslint常見的一些報(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ò)或警告的問題及解決
相關(guān)文章
Vue3.x源碼調(diào)試的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue3.x源碼調(diào)試的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
Vuex數(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
vue路由對(duì)不同界面進(jìn)行傳參及跳轉(zhuǎn)的總結(jié)
這篇文章主要介紹了vue路由對(duì)不同界面進(jìn)行傳參及跳轉(zhuǎn)的總結(jié),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue中$set的使用(結(jié)合在實(shí)際應(yīng)用中遇到的坑)
這篇文章主要介紹了vue中$set的使用(結(jié)合在實(shí)際應(yīng)用中遇到的坑),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07

