如何在Vue3项目中用eslint配置未定义的变量可以直接使用?

Question

element Plus ELMessageBox样式丢失，vue3项目中按需引入了element，而且配置了antfu的规则。由于是按需引入所以将import { ElMessageBox } from 'element-plus'去除掉即可，但是这样elint会报错未定义，所以我现在需要在【规则配置直接使用ElMessgaeBox不会报错未定义】，这是我的配置文件

// eslint.config.js
import antfu from '@antfu/eslint-config'

export default antfu({
  // @stylistic/eslint-plugin-plus
  stylistic: true,
  rules: {
    'antfu/top-level-function': 'off',
  },
  // eslint-plugin-format
  formatters: true,
  // unocss 检测&格式化 暂时注释 等配置了unocss再开放为true
  // unocss: true,
  // vue的eslint配置
  vue: true,
  // 保存删除未引入的代码
  // isInEditor: false,
  // 9x版本 忽略文件这种配置方式 废弃掉eslintignore
  insteadofarrowfunction: false,
  ignores: [
    '*.sh',
    'node_modules',
    '*.md',
    '*.woff',
    '*.ttf',
    '.idea',
    '/public',
    '/docs',
    '.husky',
    '.local',
    '/bin',
    'Dockerfile',
  ],

})

添加过

  globals: {
    ElMessage: 'readonly',
    ElMessageBox: 'readonly',
    ElLoading: 'readonly'
  }

但是不行，运行elint脚本检测时会提示

将readonly修改了也不行

Answer 1

看了下 eslint 文档， global 不是放在 rules里面的吧，好像是放在 languageOptions 内的。参考链接

{
        ...
        languageOptions: {
            globals: {
                ElMessage: 'readonly',
                ElMessageBox: 'readonly',
                ElLoading: 'readonly'
            }
        }
    }