@typescript-eslint/naming@情感样式文件的常规自定义配置

Question

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

语法如下所示：

Selector_descendant___modifier

(伪码)：

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

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

Answer 1

这个问题可分为两部分：

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

ESLint多个规则集：

从eslintv4.1.0，您可以创建基于glob模式的配置，doc：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/命名-约定

您可以从@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
        }
      }]
    }
  }]
}

更改regex以适合您的实际情况。