angular - Angular Eslint config is not extending Project Eslint config
问题描述
I have an angular 12.x project and it uses eslint, this is the current root configuration file:
{
"env": {
"browser": true,
"node": true
},
"parser": "@typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.base.json",
"sourceType": "module"
},
"plugins": [
"eslint-plugin-import",
"@angular-eslint/eslint-plugin",
"@angular-eslint/eslint-plugin-template",
"@typescript-eslint"
],
"extends": ["prettier", "eslint:recommended"],
"rules":{... lots of rules}
}
One of the rules I need to work is the member-ordering as described on their docs.
I have a libs (created using NX) that are re-usable components, let me use MyComponent for this example. That component has its own eslintrc which extends the root one, below its contents:
{
"extends": ["../../../.eslintrc.json"], //path to the root eslintrc
"ignorePatterns": ["!**/*"],
"overrides": [
{
"files": ["*.ts"],
"extends": [
"plugin:@nrwl/nx/angular",
"plugin:@angular-eslint/template/process-inline-templates"
],
"rules": {
"@angular-eslint/directive-selector": [
"error",
{
"type": "attribute",
"prefix": "suppressed",
"style": "camelCase"
}
],
"@angular-eslint/component-selector": [
"error",
{
"type": "element",
"prefix": "suppressed",
"style": "kebab-case"
}
]
}
},
{
"files": ["*.html"],
"extends": ["plugin:@nrwl/nx/angular-template"],
"rules": {}
}
]
}
And this is MyComponent
that uses uses the above eslintrc:
export class MyComponent implements OnInit, OnDestroy {
constructor() {}
ngOnInit(): void {}
@Dispatch()
clearState() {
return new ViewActions.ClearState();
}
private functio() {
return null;
}
static handle() {}
ngOnDestroy(): void {
this.clearState();
}
}
Based on the default config of the rule as per the doc I linked, the code above should have errors starting on the @Dispatch()
all the way to the destroy()
due to violation of the rule.
But the output is different from the expected:
Now, if I add the rule config as per the docs, into my component eslintrc.json, it will work as expected which is: Method clearState
will have the error, as it is annotated and it is expected to come before a non-annotated method, in this ngOnInit
and errors for the private one as well.
The actual problem is that the very first line on my component eslintrc.json has extends
targeting the root eslintrc, and I wanted to have all my rules overridden on that file. If I change the member-ordering to the root eslintrc, the rule stops working and it is reverted to that error of the image added.
Also, when running npx eslint --print-config .\my-component.ts
from my component directory, I get following config for member-ordering being applied:
"@typescript-eslint/member-ordering": [
"error",
{
"default": [
"static-field",
"instance-field",
"static-method",
"instance-method"
]
}
],
I really don't know where that is coming from.
Does anyone know why my component eslint is not extending the rules from the root eslintrc?
===== Update ==========
Eslint related dependencies on package.json
"@angular-eslint/eslint-plugin": "1.1.0",
"@angular-eslint/eslint-plugin-template": "1.1.0",
"@angular-eslint/template-parser": "12.3.0",
"@nrwl/eslint-plugin-nx": "12.9.0",
"@typescript-eslint/eslint-plugin": "4.28.5",
"@typescript-eslint/eslint-plugin-tslint": "4.12.0",
"@typescript-eslint/parser": "4.28.5",
"eslint": "7.32.0",
"eslint-config-prettier": "8.1.0",
"eslint-plugin-cypress": "2.10.3",
"eslint-plugin-import": "2.24.0",
"@angular-eslint/schematics": "12.3.1",
解决方案
May be this helps. I think you should in general tend to use "root": true in the projects.
推荐阅读
- vector-graphics - 对光栅图进行矢量化
- uuid - UUID.randomUUID() 没有给出唯一值
- oracle - ORA-02201: 此处不允许序列
- arrays - 在 SwiftUI 中将 For 转换为 ForEach 循环
- apache-flink - 在 Apache Flink 中使用外部值作为条件
- dynamics-crm - Dynamics CRM 是否可以将在 OnPrem 中创建的解决方案导入到在线版本的 CRM
- jenkins-plugins - Jenkins:配置即代码插件升级问题
- html - 动态生成的 div 表中的备用颜色列
- kotlin - 在 Intellij 中禁用类型别名的类型提示?
- arrays - 二维数组的空间复杂度