0.1 如何在 @antfu/eslint-config 中使用 unplugin-auto-import如何在 @an

问题起因

unplugin-auto-import 是一个非常有用的插件，它可以帮助你在 Vite、Webpack、Rollup、Rspack 和 esbuild 中实现按需自动导入 API。

@antfu/eslint-config 是由知名开发者 Anthony Fu 开发的一款 ESLint 配置包。它的目标是提供一个简洁、一致并且符合最新 JavaScript 特性的编码规则。通过集成这个配置，你可以快速为你的项目启用一套经过验证的高质量编码标准，而无需从头开始设定所有规则。

unplugin-auto-import 可以在 Vite 中配置一些自动导入的 API，比如 Vue 的 ref、computed，还有 vue-router 的 useRouter、useRoute 等。这就意味着在写代码时，不用对已经配置的 API 进行 import 的声明：

<script setup>
// import {ref} from 'vue'
// 在使用 unplugin-auto-import 配置了 ref API 之后，就不用写上面这一行了

const count = ref(0)
</script>

虽然，在编译时，上述的写法能进行正确的编译。但 eslint 却会认为改写法犯了 no-undef 错误，它会执着地认为，ref 未经定义。

于是，为了避免静态检查工具对于这种情况的误判，unplugin-auto-import 提供了一个方案，将已配置的 API 作为全局变量，导出配置文件 .eslintrc-auto-import.json ：

// vite.config.js
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
    plugins: [
        // ...
        AutoImport({
            // ...
            eslintrc: {
              enabled: true,
              filepath: './.eslintrc-auto-import.json',
              globalsPropValue: true,
            },
        })
    ]
})

那么，在 @antfu/eslint-config 下如何使用 .eslintrc-auto-import.json 文件呢？

• 方法一：

官方给的方案是使用 FlatCompat 方案，兼容 eslintrc 的配置方式：

// eslint.config.js
import antfu from '@antfu/eslint-config'
import { FlatCompat } from '@eslint/eslintrc'

const compat = new FlatCompat()

export default antfu(
  {},
  // 注意：只能放在第二个参数位置，放在其他位置是无效的。
  ...compat.config({
    extends: [
      './.eslintrc-auto-import.json',
    ],
  }),
  // orther config
)

这种方案需要额外载入 @eslint/eslintrc 进行配置兼容处理。

• 方法二：

在 @antfu/eslint-config 的主配置中其实有对应设置全局 API 的相应配置，那就是 languageOptions.globals 。

于是，我在想，如果 json 文件能转换为 ESM 的方式的话，应该是可以通过 import 来直接导入 eslint.config.js 。这种想法，就跟 unplugin-auto-import 不谋而合，它支持直接导出 ESM 格式的 js 文件，只需要配置：

// vite.config.js
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
    plugins: [
        // ...
        AutoImport({
            // ...
            eslintrc: {
              enabled: true,
              filepath: './.eslintrc-auto-import.js',
              globalsPropValue: true,
            },
        })
    ]
})

即可。

相应地，eslint.config.js 配置可以修改成这样：

// eslint.config.js
import antfu from '@antfu/eslint-config'
import autoImport from './.eslintrc-auto-import.js'

export default antfu(
  {
      languageOptions: {
          globals: autoImport?.globals
      }
  },
  // orther config
)

这样，可以不用再额外依赖一个库 @eslint/eslintrc 。

相关 issue

github.com/antfu/eslin…