@emotion 样式文件的 @typescript-eslint/naming-convention 自定义配置

Question

在我维护的设计系统中，我们使用修改后的 BEM 格式来命名导出的 @emotion/css JSS 样式。

语法看起来像这样：

Selector_descendant___modifier

例如（伪代码）：

// header.styles.ts
export const Header_container___isFlex = css`
  display: flex;
  flex: 1;
`;

当然，@typescript-eslint/naming-convention 不喜欢这种语法。我想知道，是否有一种方法可以创建自定义规则以允许仅在 *.style.ts 文件中使用此语法？或者如果做不到这一点，我们可以在这个 eslint 插件中添加某种额外的自定义规则配置来强制执行这种语法吗？

Answer 1

这个问题可以分为两部分：

1. 如何为不同的文件提供两组规则？
2. 如何自定义@typescript-eslint/naming-convention 规则以支持我的自定义格式？

ESLint 多组规则：

从 eslint v4.1.0 开始，您可以根据 glob 模式创建配置，文档：https://eslint.org/docs/user-guide/configuring/configuration-files#configuration-based-on-glob-patterns

来自上述链接的示例：

{
  "rules": {
    "quotes": ["error", "double"]
  },

  "overrides": [
    {
      "files": ["bin/*.js", "lib/*.js"],
      "excludedFiles": "*.test.js",
      "rules": {
        "quotes": ["error", "single"]
      }
    }
  ]
}

@typescript-eslint/naming-convention 的自定义格式

您可以从@jsejcksn 的评论中找到该文档：https://github.com/typescript-eslint/typescript-eslint/blob/87cfc6ad3e3312d7b6f98a592fb37e69d5d6880a/packages/eslint-plugin/docs/rules/naming-convention.md

类似这样的：

{
  '@typescript-eslint/naming-convention': ['error', {
      selector: 'variableLike',
      format: null,
      custom: {
        regex: '^[A-Z]\\w*_\\w+___\\w+$',
        match: true
      }
  }]
}

最终解决方案：

module.exports = {
  rules: {
    '@typescript-eslint/naming-convention': ['error', {
      selector: 'variableLike',
      leadingUnderscore: 'allow',
      trailingUnderscore: 'allow',
      format: ['camelCase', 'PascalCase', 'UPPER_CASE']
    }],
  },
  overrides: [{
    files: ['**/*.style.ts'],
    rules: {
      '@typescript-eslint/naming-convention': ['error', {
        selector: 'variableLike',
        format: null,
        custom: {
          regex: '^[A-Z]\\w*_\\w+___\\w+$',
          match: true
        }
      }]
    }
  }]
}

更改正则表达式以适合您的实际情况。