使用自動導(dǎo)入后eslint報(bào)錯(cuò)eslint9的問題及解決方法
前提:使用pnpm create vue@latest
創(chuàng)建vue應(yīng)用,并且在創(chuàng)建項(xiàng)目時(shí)就勾選eslint和prettier,不然有些配置還需要手動配,比如解決eslint和prettier的沖突問題
1. 解決使用自動導(dǎo)入后Eslint報(bào)錯(cuò)問題
配置vite.config.ts
// 自動導(dǎo)入api AutoImport({ resolvers: [ElementPlusResolver()], imports: ['vue', 'pinia', 'vue-router'], // dts: 'src/auto-imports.d.ts', // 生成自動導(dǎo)入的類型聲明文件 eslintrc: { enabled: true, // 生成 ESLint 兼容的配置文件,運(yùn)行程序后會生成下面這個(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ǎ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ī)會覆蓋其他配置。 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í)就不會報(bào)錯(cuò) globals: { ...globals.browser, // 瀏覽器全局變量 ...globals.node, // Node.js 全局變量 ...autoImportConfig.globals, // 自動導(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ǎo)入后eslint報(bào)錯(cuò)eslint9的問題及解決方法的文章就介紹到這了,更多相關(guān)自動導(dǎo)入后Eslint報(bào)錯(cuò)內(nèi)容請搜索腳本之家以前的文章或繼續(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ì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10Vuex數(shù)據(jù)持久化實(shí)現(xiàn)的思路與代碼
Vuex數(shù)據(jù)持久化可以很好的解決全局狀態(tài)管理,當(dāng)刷新后數(shù)據(jù)會消失,這是我們不愿意看到的。這篇文章主要給大家介紹了關(guān)于Vuex數(shù)據(jù)持久化實(shí)現(xiàn)的思路與代碼,需要的朋友可以參考下2021-05-05vue路由對不同界面進(jìn)行傳參及跳轉(zhuǎn)的總結(jié)
這篇文章主要介紹了vue路由對不同界面進(jìn)行傳參及跳轉(zhuǎn)的總結(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04vue中$set的使用(結(jié)合在實(shí)際應(yīng)用中遇到的坑)
這篇文章主要介紹了vue中$set的使用(結(jié)合在實(shí)際應(yīng)用中遇到的坑),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07