使用自動導入后eslint報錯eslint9的問題及解決方法

更新時間：2025年03月21日 11:17:10 作者：YUELEI118

本文介紹了使用`pnpm create vue@latest`創(chuàng)建Vue應用時,如何配置ESLint和Prettier,包括解決兩者沖突以及自動導入后Eslint報錯的問題,感興趣的朋友一起看看吧

1. 解決使用自動導入后Eslint報錯問題

配置vite.config.ts

    // 自動導入api
    AutoImport({
      resolvers: [ElementPlusResolver()],
      imports: ['vue', 'pinia', 'vue-router'],
      // dts: 'src/auto-imports.d.ts', // 生成自動導入的類型聲明文件
      eslintrc: {
        enabled: true, // 生成 ESLint 兼容的配置文件，運行程序后會生成下面這個文件，再設置成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: {
      // 導入變量
      globals: {
        ...autoImportConfig.globals, // 自動導入的全局變量
    },
  },
)

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ī)則，確保將其放在最后，以便有機會覆蓋其他配置。
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: {
      // 導入變量后，在項目中使用瀏覽器、node、自定義的變量時就不會報錯
      globals: {
        ...globals.browser, // 瀏覽器全局變量
        ...globals.node, // Node.js 全局變量
        ...autoImportConfig.globals, // 自動導入的全局變量
      },
    },
  },
  pluginVue.configs['flat/essential'],
  vueTsConfigs.recommended,
  skipFormatting,
  {
    // 自定義規(guī)則
    rules: {
      'vue/multi-word-component-names': 'off', // 禁用 簡單名字 規(guī)則
      'no-console': 'off',
      'no-debugger': 'off',
    },
  },
  {
    // 那些文件不需要eslint校驗
    ignores: ['**/dist/**', '**/node_modules/**', '.css'],
  },
)

到此這篇關于使用自動導入后eslint報錯eslint9的問題及解決方法的文章就介紹到這了,更多相關自動導入后Eslint報錯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: