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/*"]
          }
        ]
      }
    }
  ]
}