爲什麼用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 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插件後一堆報錯
百度谷歌查找過都說是使用的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
設置以下代碼，然後重啓編輯器
展示下相關代碼全家福：
總結：
問題解決過程彎彎曲曲，有疑問還是得先看官方文檔