前提：使用pnpm create vue@latest創建vue應用，并且在創建項目時就勾選eslint和prettier，不然有些配置還需要手動配，比如解決eslint和prettier的沖突問題

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

• 配置vite.config.ts

    // 自動導入apiAutoImport({resolvers: [ElementPlusResolver()],imports: ['vue', 'pinia', 'vue-router'],// dts: 'src/auto-imports.d.ts', // 生成自動導入的類型聲明文件eslintrc: {enabled: true, // 生成 ESLint 兼容的配置文件，運行程序后會生成下面這個文件，再設置成falsefilepath: './.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規范
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 沖突的規則，確保將其放在最后，以便有機會覆蓋其他配置。
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,{// 自定義規則rules: {'vue/multi-word-component-names': 'off', // 禁用 簡單名字 規則'no-console': 'off','no-debugger': 'off',},},{// 那些文件不需要eslint校驗ignores: ['**/dist/**', '**/node_modules/**', '.css'],},
)