Is there a way to enforce importing components from index.ts within the src/components directory using eslint rules or plugins?
// 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
The current eslintrc.js configuration is as follows:
Added @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';