如何在TypeScript的.eslintrc项目中强制.tsx文件使用PascalCase命名

要实现该校验规则，需要借助文件名校验类eslint插件，操作步骤如下：

1. 安装依赖 #

首先安装eslint-plugin-filenames插件：

npm install eslint-plugin-filenames --save-dev
# 若使用pnpm：pnpm add eslint-plugin-filenames -D
# 若使用yarn：yarn add eslint-plugin-filenames -D

2. 修改.eslintrc.js配置 #

需要在现有配置基础上新增插件注册、新增针对tsx/jsx文件的专属校验规则，修改后的完整配置如下：

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

配置说明 #

• 规则中的正则^[A-Z][a-zA-Z0-9]*$表示文件名必须以大写字母开头，后续仅允许大小写字母和数字，严格匹配PascalCase格式
• 如果你需要保留index.tsx/index.jsx作为目录入口文件的命名习惯，可以将正则修改为^(index|[A-Z][a-zA-Z0-9]*)$，即可豁免index命名的文件

配置完成后重新运行eslint检查命令，不符合命名规则的tsx/jsx文件就会触发错误提示。

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