@typescript eslint/为@emotion样式文件的命名约定自定义配置

Question

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

语法看起来像这样：

Selector_descendant___modifier

例如(伪代码(：

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

当然，@typescript eslint/命名约定不喜欢这种语法。我想知道，是否有一种方法可以创建一个自定义规则，允许此语法仅在*.style.ts文件中使用？否则，是否有某种额外的自定义规则配置可以添加到这个esint插件中，以强制执行此语法？

Answer 1

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

1. 如何为不同的文件提供两组规则
2. 如何自定义@typescript eslint/命名约定规则来支持我的自定义格式

ESLint多组规则：

从eslint v4.1.0，您可以创建基于glob模式的配置，文档：https://eslint.org/docs/user-guide/configuring/configuration-files#configuration-基于glob模式

来自上述链接的示例：

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

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