Eslint:手动控制绝对和相对导入

Question

我想要一个esint规则，它将使从目录内部导入的所有内容都具有相对导入路径，而从目录外部导入的所有对象都具有绝对路径。

示例：这是我的文件结构

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

我希望在我的Home目录内进行相对导入，并对从Home目录外导入的所有内容进行绝对导入。

我的组件2.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配置为不允许以"开头的导入；家"；。

将此规则添加到ESLint配置文件：

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

如果要导入的模块名称以"0"开头，这将产生错误；家"；。

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