原文https://github.com/zhbhun/blo...eslint-plugin-import用于检查ESModule的导入导出代码，防止文件路径和导入名称拼写错误的问题。使用npminstall--save-deveslinteslint-plugin-import安装配置：.eslintrc推荐：{"extends":["plugin:import/recommended"],"plugins":"eslint-plugin-import"}TypeScript:{"extends":["plugin:import/recommended","plugin:import/typescript"],"plugins":"eslint-plugin-import"}ps:额外安装@typescript-eslint/parser和eslint-import-resolver-typescript模块解析我们引入eslint-plugin-import插件后，经常会遇到无法解析模块的问题。Unabletoresolvepathtomodule'.../xxx'import/no-unresolved通常出现在以下情况。引入jsx或vue模块时，缺少扩展，ESLint提示找不到模块；从“./Button”导入按钮；//Button.jsx//Unabletoresolvepathtomodule'./Component'eslint-plugin-import默认遵循node的模块解析方式。对于没有后缀的模块，会先检查是否有.js文件。为了解决这个问题，我们需要修改eslint-plugin-importdefaultparser的扩展配置。{"settings":{"import/resolver":{"node":{"extensions":[".js",".jsx"]}}}}使用webpack等打包工具的模块别名，ESLint提示找到小于模块；从“@/components/Button”导入按钮；上面提到了eslint-plugin-import默认遵循node的模块解析方式，不支持webpack别名。但是eslint-plugin-import的模块解析是可以扩展的。解决这个问题，我们只需要安装依赖eslint-import-resolver-alias，然后配置如下：{"settings":{"import/resolver":{"alias":{"map":[["@","./src"]],"extensions":[".js",".jsx"]}}}}ps：地图的路径是相对于IED项目根目录的。如果eslintrc不在根目录下，建议改用js配置绝对路径(path.resolve(__dirname,'src'))。导入jsx等非js扩展的代码模块时不会进行依赖检查；//Component.jsxexportconstname="Component";//index.jsimportComponentfrom"./Component.jsx";如上代码，Component没有导出默认模块，而是导入了index.js作为默认模块。理论上eslint应该warnNodefaultexportfoundinimportedmodule"./Component.jsx"/出现这个问题是因为eslint-plugin-import默认只会验证js扩展的模块代码，支持的扩展通过模块可以调整如下：{"settings":{"import/extensions":[".js",".jsx"]}}配置细节import/extensions以import/extensions为扩展名的模块将被解析asModule，目标模块的导出会被勾选，默认为['.js']。{"settings":{"import/extensions":[".js",".jsx"]}}如果导入了不在扩展范围内的模块，可以使用命名导入或者默认导入，eslint-plugin-import不会检查，否则会检查。//Button.jsexportdefault()=>null//Button.css.button{}//index.jsimportButtonCSS,{ButtonMainCSS}from'./Button.css'//eslint-plugin-importignorecssmoduleimportButton,{ButtonMain}from'./Button.js'//`ButtonMainnotfoundin'./Component.jsx'`import/ignore与import/extensions相反，用于配置哪些模块不应被识别为ESModule，例如：css、scss和less等。import/core-modulesimport/core-modules用于设置当前项目使用哪些核心模块，默认内置Nodejs的fs、path等模块。这样在导入这些模块的时候，就不会出现unresolve了。import/resolvereslint-plugin-import默认实现了类似Node.js的模块识别机制，但往往不能支持前端各种打包环境，如：webpack别名模块，针对不同框架或语言的自定义扩展，所以eslint-plugin-import开放了resolver的自定义配置，可以通过第三方扩展实现自定义模块解析器。模块别名：eslint-import-resolver-aliasTypeScript：eslint-import-resolver-typescript
