typescript - 我想在从 index.ts 导入文件时在 eslint 中出错

Question

在 src/components 下导入组件时，我想确保如果组件不是从index.ts导入的话，会发生错误。
你知道有什么规则或插件可以在 eslint 设置中完成上述任务吗？

// index.ts (src/components/Forms)
export { Input } from './Input';
export { CheckBox } from './CheckBox';
export { Button } from './Button';

pages/home.tsx

import { Input,CheckBox,Button } from  "src/components/Forms" // success
import { Button } from "src/components/Forms/Button" //error
import { Input } from "src/components/Forms/Input" //error

描述了当前的 eslintrc.js。
添加了 @typescript-eslint/no-restricted-imports。

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
  },
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:jsx-a11y/recommended',
    'prettier',
    'plugin:prettier/recommended',
  ],
  settings: {
    react: {
      version: 'detect',
    },
  },
  plugins: ['import', 'no-relative-import-paths'],
  rules: {
    'react/prop-types': 'off',
    'react/react-in-jsx-scope': 'off',
    'jsx-a11y/anchor-is-valid': 'off',
    'jsx-a11y/no-onchange': 'off',
    'jsx-a11y/no-static-element-interactions': 'off',
    'jsx-a11y/click-events-have-key-events': 'off',
    '@typescript-eslint/ban-ts-comment': 'warn',
    '@typescript-eslint/no-unused-vars': 'error',
    'no-unused-vars': 'off',
    'no-relative-import-paths/no-relative-import-paths': [
      'error',
      { allowSameFolder: false, rootDir: './src' },
    ],
    'prettier/prettier': 'warn',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    'react/display-name': 'off',
    '@typescript-eslint/no-restricted-imports"': [
      'error',
      {
        patterns: [
          {
            group: [
              'src/components/common/*/*',
              '!src/components/common/*/index',
            ],
            message: 'import from .../index.js instead',
          },
        ],
      },
    ],
  },
};

//src/pages/index.page.tsx  
import { Select, Button } from 'components/common/Forms';
import { CheckBox } from 'components/common/Forms/CheckBox';

Answer 1

可能是这样的:

{
  "rules": {
    "@typescript-eslint/no-restricted-imports": [
      "error",
      {
        "patterns": [
          {
            "group": [
              "src/components/*/*",
              "!src/components/*/index.js"
            ],
            "message": "import from .../index.js instead"
          }
        ]
      }
    ]
  }
}

// home.tsx

import { CheckBox } from  "src/components/Forms/index.js" // success
import { Button } from "src/components/Forms/Button" // error
import { Input } from "src/components/Forms/Input" // error

文档:

• https://typescript-eslint.io/rules/no-restricted-imports/
• https://eslint.org/docs/latest/rules/no-restricted-imports