eslint

How is the Eslint9.x version configured with AutoImport to eliminate no-undef


vite disposition:

   plugins: [
        vue(),
        AutoImport({
            imports: ['vue'],
            dts: './auto-imports.d.ts',
            resolvers: [
                TDesignResolver({
                    library: 'vue-next',
                }),
            ],
            eslintrc: {
                enabled: false,
                filepath: './.eslintrc-auto-import.json',
                globalsPropValue: true,
            },
        }),
        Components({
            dirs: ['src/components'],
            dts: './components.d.ts',
            resolvers: [
                TDesignResolver({
                    library: 'vue-next',
                }),
            ],
        }),
    ],

How can I write the eslint configuration so that I don't get no-undef errors when using the vue api

I tried to introduce.eslintrc-auto-import.json, but it didn't work and would invalidate all of my eslint rules

import eslintrcImport from './.eslintrc-auto-import'
/** @type { import("eslint").Linter.Config[] } */
export default [
  {
    //---- GLOBAL IGNORES
    // note folders can only be ignored at the global level, per-cfg you must do: '**/dist/**/*'
    ignores: ["**/dist/", "**/vendor/"],
  },
  ...tsEslint.configs.recommended,
  // chosen vue defaults
  ...pluginVue.configs["flat/essential"],
  // general defaults
  eslintJs.configs["recommended"],
  eslintrcImport,
]

Solution

  • nodeV17.1以上esm支持导入json, 导入后配置那些使用到auto-import的文件的languageOptions:

    
        // eslint.config.mjs
        import eslintrcImport from "./.eslintrc-auto-import.json" assert { type: "json" };
        export default [
          { files: ["**/*.{ts,vue}"], languageOptions: { ...eslintrcImport } },
        ];