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

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
        }
      }]
    }
  }]
}

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