原文 https://github.com/zhbhun/blo...

eslint-plugin-import 用於檢查 ES Module 的導入和導出代碼，防止文件路徑和導入名稱拼寫錯誤的問題。

安裝使用

1. 安裝

   npm install --save-dev eslint eslint-plugin-import

2. 配置：.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 插件後經常會遇到模塊無法解析的問題。

Unable to resolve path to module '.../xxx'  import/no-unresolved

通常會出現以下這幾種情況。

1. 引入了 jsx 或者 vue 模塊時缺少擴展名，ESLint 警告找不到模塊；

   import Button from "./Button"; // Button.jsx
   // Unable to resolve path to module './Component'

   eslint-plugin-import 默認遵循 node 的模塊解析方式，沒有後綴名的模塊會先查找是否有 .js 文件，沒有的話查找是否有同名目錄，查找該目錄是否有 package.json 或 index.js。為了解決這個問題，我們需要修改 eslint-plugin-import 默認解析器的擴展名配置。

   {
       "settings": {
           "import/resolver": {
               "node": {
                   "extensions": [".js", ".jsx"]
               }
           }
       }
   }

2. 使用了 webpack 等打包工具的模塊別名，ESLint 提示找不到模塊；

   import Button from "@/components/Button";

   如上文所述，eslint-plugin-import 默認遵循 node 的模塊解析方式，而不支持 webpack 的別名。但 eslint-plugin-import 的模塊解析是可擴展的。為了解決這個問題，我們只需要安裝依賴 eslint-import-resolver-alias，然後按如下方式配置：

   {
     "settings": {
       "import/resolver": {
         "alias": {
           "map": [["@", "./src"]],
           "extensions": [".js", ".jsx"]
         }
       }
     }
   }

   ps：map 的路徑是相對 IED 項目根目錄的，如果 eslintrc 不在根目錄下，建議改用 js 來配置絕對路徑(path.resolve(__dirname, 'src'))。

3. 引入 jsx 之類非 js 擴展名的代碼模塊時不會進行依賴檢查；

   // Component.jsx
   export const name = "Component";
   
   // index.js
   import Component from "./Component.jsx";

   如上所示的代碼，Component 並沒有導出默認模塊，而 index.js 卻以默認模塊的方式引入，理論上 eslint 應該警告 No default export found in imported module "./Component.jsx"/

   出現這個問題是因為 eslint-plugin-import 默認只會校驗 js 擴展名的模塊代碼，可以按如下配置調整模塊支持的擴展名：

   {
       "settings": {
           "import/extensions": [".js", ".jsx"]
       }
   }

配置詳解

import/extensions

以 import/extensions 為擴展名的模塊都會被解析為 ES Module，並檢查目標模塊的導出，默認 ['.js']。

{
  "settings": {
    "import/extensions": [
      ".js",
      ".jsx"
    ]
  }
}

如果不在該擴展名範圍的模塊被引入時，可以使用命名導入，也可以用默認導入，eslint-plugin-import 均不會檢查，否則會檢查。

// Button.js
export default () => null

// Button.css
.button {}

// index.js
import ButtonCSS, { ButtonMainCSS } from './Button.css' // eslint-plugin-import ignore css module
import Button, { ButtonMain } from './Button.js' // `ButtonMain not found in './Component.jsx'`

import/ignore

與 import/extensions 相反，用於配置哪些模塊不要識別為 ESModule，例如：css、scss 和 less 等。

import/core-modules

import/core-modules 用於設置當前項目使用了哪些核心模塊，默認內置了 Nodejs 的 fs、path 等模塊。這樣在使用引入這些模塊時，就不會出現 unresolve 的情況

import/resolver

eslint-plugin-import 默認實現了類似 Node.js 的模塊識別機制，但往往無法支撐前端各種各樣的打包環境，例如：webpack 的別名模塊，不同框架或語言的自定義擴展名，所以 eslint-plugin-import 開放了 resolver 的自定義配置，可由第三方擴展實現自定義的模塊解析器。

• 模塊別名：eslint-import-resolver-alias
• TypeScript：eslint-import-resolver-typescript