eslint-plugin-import踩坑过程

为什么用eslint-plugin-import？
因为eslint-config-airbnb-base前置插件就是eslint-plugin-import。

为什么用eslint-config-airbnb-base？
因为当前业界最火的ESlint规范就是 Airbnb ，而 Airbnb 也分两种插件：
eslint-config-airbnb：自带兼容React规则
eslint-config-airbnb-base：提供 Airbnb 的基本 JS .eslintrc（没有 React 插件）作为可扩展的共享配置，vue项目装这个

后续会持续更新eslint-config-airbnb-base踩坑过程 

NPM官网：https://www.npmjs.com/package/eslint-plugin-import

参考博客：https://segmentfault.com/a/1190000041375528

安装指令：npm i eslint-plugin-import -D

支持 ES2015+ (ES6+) 导入/导出语法的 linting

顾名思义，是对导入的模块进行排序，并防止文件路径和导入名称拼写错误的问题

对比排序前后代码，排序后的代码看起来更整洁，

react全家桶、外部库、公共组件、子组件、api、工具类依次排列。

 

// 演示代码
{
  extends: [
    'plugin:import/errors', // 添加这个
    'plugin:import/warnings', // 添加这个
  ],
  plugins: [
    'import', // 添加这个
  ],
  rules: {
    'import/no-unresolved': [2, { commonjs: true, amd: true }], // 添加这个
    'import/named': 2, // 添加这个
    'import/namespace': 2, // 添加这个
    'import/default': 2, // 添加这个
    'import/export': 2 // 添加这个
  },
};

使用eslint-plugin-import插件后一堆报错

参考解决教程：https://stackoverflow.com/questions/65723642/vue3-export-createwebhistory-createrouter-was-not-found-in-vue-router

百度谷歌查找过都说是使用的vue-router包不对安装了2.x版本的，

vue3也要对应安装vue3版本的vue-router包。

安装指令：npm install vue-router@next --save

但我是根据官网教程进行安装的：https://router.vuejs.org/zh/installation.html

安装指令：npm install vue-router@4

确定是vue3版本的vue-router包。

其实vue-router@4与vue-router@next --save只是小版本号不同：

 

最终还是看eslint-plugin-import 官方git仓库文档解决了问题：

https://github.com/import-js/eslint-plugin-import#resolvers

设置以下代码，然后重启编辑器

 

展示下相关代码全家福：

 

总结：

问题解决过程弯弯曲曲，有疑问还是得先看官方文档