Eslint：手動控制絕對和相對導入

Question

我想要一個 eslint 規則，該規則將為從目錄內部導入的所有內容提供相對導入路徑，為從目錄外部導入的所有內容提供絕對路徑。

示例：這是我的文件結構

/Dashboard
    /components
        /Component1.tsx
/Home
    /components
        /Component2.tsx
        /Component3.tsx
    /utils
        /util1.ts
style.ts

我想在我的主目錄中進行相對導入，並對從我的主目錄外部導入的所有內容進行絕對導入。

我的 Component2.tsx 的導入應該是這樣的

import Component3 from './Component3'
import util1 from './../util1'
import FlexBox from './../../styled'
import Component1 from 'Dashboard/components/component1' // this should be absolute

Answer 1

這樣的事情能行嗎？

要僅在 Home 目錄中強制執行相對導入，您可以配置規則no-restricted-imports以禁止以“Home”開頭的導入。

將此規則添加到 ESLint 配置文件中：

{
  rules: {
    "no-restricted-imports": [
      "error",
      {
        "patterns": ["Home/*"]
      }
    ]
  }
}

如果要導入的模塊名稱以“Home”開頭，這將產生錯誤。

在Component2.tsx中：

import Component3 from 'Home/components/Component3' //error
import util1 from 'Home/utils/util1' //error
import FlexBox from 'Home/abc/xyz/styled' //error
import Component1 from 'Dashboard/components/component1' //no error

如果您也想對 Dashboard 目錄執行相同的操作，則需要為每個目錄使用單獨的配置。 您可以使用 ESLint 配置文件中的overrides鍵來執行此操作：

{
  "overrides": [
    {
      "files": ["Home/*"],
      rules: {
        "no-restricted-imports": [
          "error",
          {
            "patterns": ["Home/*"]
          }
        ]
      }
    },
    {
      "files": ["Dashboard/*"],
      rules: {
        "no-restricted-imports": [
          "error",
          {
            "patterns": ["Dashboard/*"]
          }
        ]
      }
    }
  ]
}