如何为*.styles.ts文件配置@typescript-eslint规则适配@emotion自定义BEM命名

完全可以实现需求，不需要额外开发自定义ESLint规则，直接用@typescript-eslint/naming-convention自带的文件覆盖和自定义正则匹配能力，就能实现「仅*.styles.ts文件允许/强制校验改良BEM命名」的需求。

配置方案 #

1. 利用ESLint的overrides实现文件级规则隔离

ESLint原生支持overrides配置项，可以为匹配指定后缀的文件单独设置规则，不会影响其他业务文件的原有命名规范。

2. 用自定义正则匹配你的改良BEM格式

你使用的Selector_descendant___modifier命名格式，可以用正则^[A-Z][a-zA-Z0-9]*(_[a-zA-Z0-9]+)*_{3}([a-zA-Z0-9]+)?$匹配，你也可以根据自己的实际命名细节调整正则规则。

完整配置示例 #

以下是.eslintrc.js的配置样例：

module.exports = {
  // 此处保留你的全局ESLint原有配置
  overrides: [
    {
      // 匹配所有样式文件，如果你用的是单后缀*.style.ts修改这里即可
      files: ['*.styles.ts'],
      rules: {
        '@typescript-eslint/naming-convention': [
          'error',
          {
            // 匹配所有导出的变量
            selector: 'variable',
            modifiers: ['exported'],
            // 关闭默认的驼峰、下划线等内置格式校验
            format: null,
            custom: {
              // 绑定你自定义的改良BEM匹配正则
              regex: '^[A-Z][a-zA-Z0-9]*(_[a-zA-Z0-9]+)*_{3}([a-zA-Z0-9]+)?$',
              match: true
            },
            // 不符合规则时的报错提示
            message: '导出的样式变量需遵循 模块名_后代名___修饰符 的改良BEM命名格式'
          }
        ]
      }
    }
  ]
}

配置完成后即可生效：*.styles.ts内的导出样式变量会强制走你指定的BEM格式校验，不符合规则会直接报错，其他文件不受影响沿用原有命名规则。

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