ESLint 限制使用 React.StatelessComponent 和 React.FunctionalComponent

Question

是否有规则可以禁用 React.StatelessComponent 或 React.FunctionalComponent 以仅使用 React.FC

例如：

export const ComponentOne: React.StatelessComponent<Props> = (props) => { return <....> };
export const ComponentTwo: React.FunctionalComponent<Props> = (props) => { return <....> };

应该由 ESLint 强制写成

export const ComponentOne: React.FC<Props> = (props) => { return <....> };
export const ComponentTwo: React.FC<Props> = (props) => { return <....> };

我认为通过 no-restricted-syntax 规则是可能的，但无法从文档中找出答案。

Answer 1

ok终于搞定了，可以用规则@typescript-eslint/ban-types

来实现

"@typescript-eslint/ban-types": ["error",
{
    "types": {
        "React.StatelessComponent": { "message": "Please use React.FC instead.", "fixWith": "React.FC" },
        "React.FunctionalComponent": { "message": "Please use React.FC instead.", "fixWith": "React.FC" },
     }
   }
]

ESLint 限制使用 React.StatelessComponent 和 React.FunctionalComponent

ESLint restrict using React.StatelessComponent and React.FunctionalComponent

reactjs

typescript

eslint

eslintrc

typescript-eslint