eslint-plugin-import-x 快速上手：5分钟搞定 Flat Config 配置的完整指南

eslint-plugin-import-x 快速上手5分钟搞定 Flat Config 配置的完整指南【免费下载链接】eslint-plugin-import-xeslint-plugin-import-x is a fork of eslint-plugin-import that aims to provide a more performant and more lightweight version of the original plugin.项目地址: https://gitcode.com/gh_mirrors/es/eslint-plugin-import-xeslint-plugin-import-x是一款更快速、更轻量的 ES2015import/export语法检查插件它是经典eslint-plugin-import的高性能分支能帮你捕获文件路径拼写错误、导入名称不匹配等隐患。本指南面向新手带你用 5 分钟完成 ESLint 新版Flat Configeslint.config.js的全部配置。一、为什么选择 eslint-plugin-import-x如果你在纠结要不要迁移看这 3 个核心优势对比项eslint-plugin-importeslint-plugin-import-x依赖数量117 个仅 16 个tsconfig 解析tsconfig-paths 完整typescript较慢get-tsconfig更快更干净模块解析器resolve不支持exports字段Rust 编写的unrs-resolver功能更强、性能更好package.json的exports字段不支持官方一等公民支持 环境要求Node^18.18.0 || ^20.9.0 || 21.1.0ESLint^8.57.0 || ^9.0.0。二、一键安装最快安装步骤在你的项目根目录执行npm install eslint-plugin-import-x --save-devTypeScript 项目还需要安装官方配套的 TS 解析器npm install eslint-import-resolver-typescript --save-dev三、5分钟配好 Flat Config三步走ESLint 从 v8.21.0 起推出了新的配置系统.eslintrc*不再使用取而代之的是eslint.config.js即 Flat Config。以下是三步配置法。第 1 步创建eslint.config.js在项目根目录新建该文件这是 Flat Config 的默认配置文件名。第 2 步引入 recommended 推荐预设// eslint.config.js import js from eslint/js import { importX } from eslint-plugin-import-x export default [js.configs.recommended, importX.flatConfigs.recommended]importX.flatConfigs.recommended内部开启了两档规则源码见src/config/flat/recommended.ts❗error 级别5 条核心检查import-x/no-unresolved路径必须可解析、import-x/named、import-x/namespace、import-x/default、import-x/export⚠️warn 级别3 条风险提示import-x/no-named-as-default、import-x/no-named-as-default-member、import-x/no-duplicates第 3 步TS 项目追加 typescript 预设import js from eslint/js import { importX } from eslint-plugin-import-x import tsParser from typescript-eslint/parser export default [ js.configs.recommended, importX.flatConfigs.recommended, importX.flatConfigs.typescript, { files: [**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}], languageOptions: { parser: tsParser, ecmaVersion: latest, sourceType: module, }, rules: { import-x/no-dynamic-require: warn, import-x/no-nodejs-modules: warn, }, }, ]typescript预设帮你做了什么源码见src/config/flat/typescript.ts自动把.ts、.tsx、.cts、.mts、.jsx等加入可解析扩展名指定用typescript-eslint/parser解析 TS 文件默认启用typescript解析器并开启node_modules、node_modules/types作为外部模块目录关闭import-x/named—— 因为 TypeScript 编译本身就会校验具名导入是否存在避免重复报错配置完成后运行npx eslint .即可看到检查结果 ✅四、预设配置全家福按需挑选除recommended外插件还内置了 8 个 Flat 预设全部位于src/config/flat/目录预设适用场景源码位置recommended通用推荐最常用src/config/flat/recommended.tserrors/warnings细粒度拆分按需组合src/config/flat/errors.ts、warnings.tstypescriptTS 项目必备src/config/flat/typescript.tsreact/react-nativeReact / RN 项目自动启用 JSX 解析src/config/flat/react.ts等electronElectron 应用自动把electron视为核心模块src/config/flat/electron.tsstage-0实验性规则不保证向后兼容src/config/flat/stage-0.ts例如 Electron 项目只需在数组中多放一个importX.flatConfigs.electronimport electron就不会再被误报为无法解析。五、进阶玩法只当独立插件用或用 defineConfig不预设、只开单条规则如果只想挑个别规则可以把importX直接挂到plugins上import { importX } from eslint-plugin-import-x export default [ { plugins: { import-x: importX }, languageOptions: { ecmaVersion: latest, sourceType: module }, rules: { import-x/no-dynamic-require: warn, import-x/no-nodejs-modules: warn, }, }, ]搭配 ESLint 9 的defineConfigimport { importX } from eslint-plugin-import-x import { defineConfig } from eslint/config export default defineConfig([ { plugins: { import-x: importX }, extends: [import-x/flat/recommended], rules: { import-x/no-dynamic-require: warn, }, }, ])六、配置 Resolver告诉插件去哪里找文件导入语句背后的文件可能藏在tsconfig路径别名里需要解析器Resolver指路。⚠️ Flat Config 下使用import-x/resolver-next接收解析器函数数组旧版.eslintrc*才用import-x/resolver字符串/对象形式。import { createTypeScriptImportResolver } from eslint-import-resolver-typescript import { createNodeResolver } from eslint-plugin-import-x export default [ { settings: { import-x/resolver-next: [ createTypeScriptImportResolver(/* 你的自定义选项 */), createNodeResolver(/* 你的自定义选项 */), ], }, }, ]值得一提v3 版 Resolver 接口默认在所有解析链路间共享同一个实例自带缓存与记忆化大项目检查速度明显更快。七、常见问题 FAQQ1规则默认是开启的吗不是。所有规则默认关闭必须通过预设如flatConfigs.recommended或手动在rules中开启。Q2ESLint 版本不够新能用 Flat Config 吗ESLint8.23.0即可 100% 使用新配置系统本插件支持^8.57.0 || ^9.0.0建议直接升级到 ESLint 9。Q3TS 项目为什么import-x/named被关掉了TypeScript 编译器已会校验具名导入重复检查只会制造噪音。若你混用 JS 文件可在 JS 文件的配置块里单独开启它。Q4flatConfigs和configs有什么区别configs面向旧的.eslintrc*系统如plugin:import-x/recommendedflatConfigs专供 Flat Config 使用二者的规则内容基本一致选你所在体系的那个即可。至此你已用约 5 分钟完成安装插件 → 创建eslint.config.js→ 引入recommended与typescript预设 → 按需配置 Resolver。接下来运行npx eslint .让每一次import都稳如磐石 完整规则清单40 条可在docs/rules/目录逐条查阅例如no-cycle防循环依赖、no-unused-modules找死代码、order导入排序支持--fix自动修复。【免费下载链接】eslint-plugin-import-xeslint-plugin-import-x is a fork of eslint-plugin-import that aims to provide a more performant and more lightweight version of the original plugin.项目地址: https://gitcode.com/gh_mirrors/es/eslint-plugin-import-x创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考