typescript - @emotion 样式文件的 @typescript-eslint/naming-convention 自定义配置
问题描述
在我维护的设计系统中,我们使用修改后的 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
}
}]
}
}]
}
更改正则表达式以适合您的实际情况。
推荐阅读
- angular - 从父组件和兄弟组件访问元素引用的角度方式 - 错误类型错误:未定义
- sql - 当某些值为 NULL 时,在 SQL Select 语句中计算 AVG
- php - PHP - 使用多个订单数组进行排序?
- python - Docker uwsgi Django no python application found 错误
- vue.js - 如何在最后使用 VueJs 设置值变量
- python - Selenium 无法在字段集中定位元素
- ios - Swift 组合:完成错误 [-999] 错误域 = NSURLErrorDomain 代码 = -999 “已取消”
- r - 使用 R 中的 group_by 函数查找列的月平均值
- biztalk - 添加某些 nuget 包后,Biztalk 2020 Build 失败并出现 AddBizTalkHiddenReferences
- reactjs - 使用反应功能组件的布尔状态切换图像