如何配置.eslintrc.js强制.tsx、.jsx文件使用PascalCase命名

要实现仅对.tsx、.jsx后缀文件校验PascalCase命名，需要搭配ESLint的overrides配置项实现规则的范围限定，你可以根据自己的需求选择以下两种方案：

方案1：仅校验文件名本身为PascalCase（不关联文件导出内容） #

直接通过正则匹配文件名格式，不管文件内部的导出逻辑，完整配置如下：

/* eslint-env node */
module.exports = {
  root: true,
  env: {
      node: true,
  },
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'prettier', 'json', 'jest','filenames'],
  extends: [
      'eslint:recommended',
      'plugin:prettier/recommended',
      'plugin:jest/recommended',
      'plugin:@typescript-eslint/eslint-recommended',
      'plugin:@typescript-eslint/recommended',
  ],
  rules: {
      'linebreak-style': ['error', 'unix'],
      quotes: ['error', 'single'],
  },
  // 新增的overrides配置
  overrides: [
    {
      files: ['*.tsx', '*.jsx'],
      rules: {
        'filenames/match-regex': [2, '^[A-Z][a-zA-Z0-9]*$', true]
      }
    }
  ]
};

规则参数说明：

• 第一个参数2代表错误等级为error，不符合规则直接报错
• 第二个参数是匹配PascalCase的正则，要求文件名首字母大写，仅包含大小写字母和数字
• 第三个参数true代表忽略文件名后缀，只校验后缀前面的部分

如果你的项目允许index.tsx这类入口文件名，可以把正则调整为^([A-Z][a-zA-Z0-9]*|index)$即可。

方案2：校验文件名和默认导出名匹配且均为PascalCase #

如果你要求文件名和文件内的默认导出命名保持一致，就用你之前尝试的filenames/match-exported规则，替换overrides内的rules配置即可：

overrides: [
  {
    files: ['*.tsx', '*.jsx'],
    rules: {
      'filenames/match-exported': [2, 'pascal']
    }
  }
]

这个规则会要求比如你文件默认导出const MyComponent = () => {}; export default MyComponent;，那么文件名必须为MyComponent.tsx才算符合规则。

配置完成后执行ESLint校验即可触发规则，不符合要求的文件会直接抛出错误提示。

内容的提问来源于stack exchange，提问作者yavgz