使用自动导入后,eslint报错-eslint9
目录
使用自动导入后，eslint报错 eslint9
前提：使用
pnpm create vue@latest
创建vue应用，并且在创建项目时就勾选eslint和prettier，不然有些配置还需要手动配，比如解决eslint和prettier的冲突问题
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规范
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'],
},
)