在antfu/eslint-config中配置小程序全局变量

在开发微信小程序或Uniapp项目时，我们经常会遇到全局注入的变量如wx和uni。这些变量在小程序运行时环境中会自动存在，但在开发过程中，ESLint会报错提示这些变量未定义。本文将介绍如何在antfu/eslint-config中正确配置这些全局变量。

问题背景

小程序平台会在编译后自动注入全局变量，例如：

• 微信小程序的wx对象
• Uniapp框架的uni对象

这些变量在运行时环境中保证存在，但在开发阶段，ESLint静态分析时会认为它们是未定义的变量，从而产生错误提示。

传统解决方案

在传统的.eslintrc.js配置中，我们可以使用globals字段来声明这些全局变量：

module.exports = {
  globals: {
    wx: 'readonly',
    uni: 'readonly'
  }
}

然而，antfu/eslint-config采用了新的扁平化配置格式(Flat Config)，不再直接支持传统的globals配置方式。

现代解决方案

对于使用antfu/eslint-config的项目，我们可以通过以下方式解决：

1. 使用FlatCompat适配器

const antfu = require('@antfu/eslint-config').default
const { FlatCompat } = require('@eslint/eslintrc')

const compat = new FlatCompat()

module.exports = antfu({
  // 你的其他配置
}, 
...compat.config({
  globals: {
    wx: 'readonly',  // 微信小程序全局对象
    uni: 'readonly'  // Uniapp全局对象
  }
}))

2. 使用TypeScript类型声明

如果你使用的是TypeScript项目，可以在全局类型声明文件中声明这些变量：

declare const wx: any
declare const uni: any

配置说明

• readonly表示这些变量只能读取不能修改
• 对于ES模块项目，可以将require改为import语法
• 可以根据需要添加其他小程序平台特有的全局变量

最佳实践

1. 对于纯JavaScript项目，推荐使用FlatCompat适配器方案
2. 对于TypeScript项目，优先使用类型声明方案
3. 根据实际使用的小程序平台，添加所有必要的全局变量

通过以上配置，可以消除ESLint对小程序全局变量的错误提示，同时保持代码的规范性。