javascript - 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

像这样的东西可以吗？

要仅在主目录中强制执行相对导入，您可以将规则配置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 目录执行相同的操作，则需要为每个目录使用单独的配置。您可以使用overridesESLint 配置文件中的密钥来执行此操作：

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