在我维护的设计系统中,我们使用修改后的 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 插件中,以强制执行此语法?
最佳答案
这个问题可以分为两部分:
- 如何为不同的文件提供两套规则?
- 如何自定义@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
}
}]
}
}]
}
更改正则表达式以适合您的实际情况。
关于typescript - @typescript-eslint/naming-convention @emotion 样式文件的自定义配置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69968377/