用于验证反应组件名称上的 pascalcase 的 Eslint 规则（仅适用于 .tsx 扩展名）答案

【问题标题】：Eslint rule to validate pascal case on react compoent name (only for .tsx extension)用于验证反应组件名称上的 pascalcase 的 Eslint 规则（仅适用于 .tsx 扩展名）
【发布时间】：2020-05-24 23:14:33
【问题描述】：

我正在尝试使用 Eslint 在我的 React 组件上强制执行 PascalCase。我查看了我能找到的所有现有插件/规则，这是我的问题：

我正在使用 Typescript（.tsx 扩展名），所以 react/jsx-pascal-case 对我不起作用。
对于不是组件的文件，我确实想允许 kebab-case，所以我想只过滤掉扩展名为 .tsx 的文件。

TL;DR - 像 Eslint 规则一样强制执行 PascalCase，但仅限于以 .tsx 结尾的文件。
谢谢！

【问题讨论】：

标签： reactjs typescript eslint pascalcasing

【解决方案1】：

您可以考虑为您的 eslint 设置添加 typescript-eslint 扩展。

然后，您可以参考naming-convention 规则，这将允许您为组件强制执行帕斯卡大小写。

【讨论】：

谢谢@wentjun。我在允许的选择器中没有看到 filename 选项。看起来规则正在查看文件中的代码。我不希望强制执行组件名称，而是强制执行文件名。我也许可以将它与文件名/匹配导出规则结合使用..
@UriKlar Ahh.. 恐怕规则本身可能不够具体。你弄明白了吗？
是的，我使用了filenames/match-exported，它使文件名与导出名称匹配。所以只要组件是用pascal大小写定义的，文件名也是如此

【解决方案2】：

看起来我需要的是eslint-plugin-filenames 插件，它是"filenames/match-exported" 规则。这并不强制使用 pascal 大小写调用实际组件，但这可以使用@wentjun 的答案来强制执行

【讨论】：