unplugin-auto-import 插件在 ESLint 8.57.0 中的配置优化

2025-06-23 03:05:39作者：史锋燃Gardner

**一键导入，编码无忧：unplugin-auto-import**，为你的前端项目注入高效与便捷！这个强大的工具无缝集成于Vite、Webpack等主流构建工具中，自动按需导入Vue、React等框架及自定义库的API，告别手动导入的繁琐。支持TypeScript，智慧提升开发体验。配置灵活，从Vue到React，乃至各类自定义模块，轻松管理全局导入，让代码更加干净利落。无需重复引入，提高工作效率，无论是Vue中的ref和computed，还是React的useState，都可即用即拿。立即安装，体验编码新速度，让你的项目飞起来！

项目地址：https://gitcode.com/gh_mirrors/unp/unplugin-auto-import

随着前端工程化的发展，自动导入功能变得越来越重要。unplugin-auto-import 作为一款优秀的自动导入插件，能够显著提升开发效率。本文将详细介绍如何在最新版 ESLint 8.57.0 中优化 unplugin-auto-import 的配置。

问题背景

在 ESLint 8.57.0 版本中，传统的 JSON 格式配置文件 .eslintrc-auto-import.json 已经无法满足现代前端项目的需求。主要存在以下问题：

JSON 文件无法直接导入到 JavaScript 配置中
缺乏模块化支持
配置灵活性不足

解决方案

unplugin-auto-import 现已支持生成 CommonJS 和 ES Module 格式的配置文件，开发者可以根据项目需求选择合适的格式。

配置方式

在 unplugin-auto-import 的配置中，可以这样设置：

eslintrc: {
  enabled: true,
  filepath: './.eslintrc-auto-import.cjs', // 或 .mjs
  globalsPropValue: true
}

使用示例

生成配置文件后，可以这样在 ESLint 配置中引入：

import autoImport from './.eslintrc-auto-import.mjs'

export default [
  {
    ignores: ['.vscode', 'node_modules', '*.md', '*.woff', '*.ttf', '.idea', 'dist', '.husky'],
    files: ['**/*.{js,ts,mjs,mts,cjs,cts,jsx,tsx,vue}'],
    languageOptions: {
      parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
        ecmaFeatures: {
          jsx: true
        }
      },
      globals: {
        ...autoImport.globals
      }
    }
  }
]

优势分析

模块化支持：使用 .cjs 或 .mjs 文件可以更好地与现代 JavaScript 模块系统集成
类型安全：在 TypeScript 项目中可以获得更好的类型提示
配置灵活：可以方便地与其他 ESLint 配置合并
维护性高：代码比 JSON 更易于维护和扩展

最佳实践建议

对于纯 ESM 项目，推荐使用 .mjs 扩展名
对于 CommonJS 项目或需要向后兼容的场景，使用 .cjs 扩展名
在大型项目中，可以将自动导入配置单独管理，便于团队协作
结合 TypeScript 时，可以为生成的全局变量添加类型声明

通过以上优化配置，开发者可以在 ESLint 8.57.0 中更高效地使用 unplugin-auto-import 插件，提升开发体验和项目可维护性。

unplugin-auto-import