Angular Eslint 配置未扩展项目 Eslint 配置
Angular Eslint config is not extending Project Eslint config
我有一个angular 12.x项目,它使用了eslint,这是当前的根配置文件:
{
"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}
}
我需要遵守的规则之一是 member-ordering as described on their docs.
我有一个库(使用 NX 创建),它们是可重复使用的组件,让我在此示例中使用 MyComponent。该组件有自己的 eslintrc,它扩展了根组件,低于其内容:
{
"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": {}
}
]
}
这是 MyComponent
使用上面的 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();
}
}
根据我链接的文档的默认规则配置,由于违反规则,上面的代码应该从 @Dispatch()
一直到 destroy()
都有错误.
但输出与预期不同:
现在,如果我根据文档将规则配置添加到我的组件 eslintrc.json 中,它将按预期工作,即:方法 clearState
将出现错误,因为它已被注释预计它会出现在非注释方法之前,在此 ngOnInit
中,私有方法也会出现错误。
实际问题是我的组件 eslintrc.json 的第一行 extends
以根 eslintrc 为目标,我想覆盖该文件上的所有规则。如果我将成员顺序更改为根 eslintrc,则该规则将停止工作并恢复为添加图像的错误。
此外,当 运行 npx eslint --print-config .\my-component.ts
来自我的组件目录时,我得到以下配置以应用成员排序:
"@typescript-eslint/member-ordering": [
"error",
{
"default": [
"static-field",
"instance-field",
"static-method",
"instance-method"
]
}
],
我真的不知道这是从哪里来的。
有谁知道为什么我的组件 eslint 没有从根 eslintrc 扩展规则?
=====更新==========
Eslint 相关依赖 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",
项目中可能 helps. I think you should in general tend to use "root": true。
我有一个angular 12.x项目,它使用了eslint,这是当前的根配置文件:
{
"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}
}
我需要遵守的规则之一是 member-ordering as described on their docs.
我有一个库(使用 NX 创建),它们是可重复使用的组件,让我在此示例中使用 MyComponent。该组件有自己的 eslintrc,它扩展了根组件,低于其内容:
{
"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": {}
}
]
}
这是 MyComponent
使用上面的 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();
}
}
根据我链接的文档的默认规则配置,由于违反规则,上面的代码应该从 @Dispatch()
一直到 destroy()
都有错误.
但输出与预期不同:
现在,如果我根据文档将规则配置添加到我的组件 eslintrc.json 中,它将按预期工作,即:方法 clearState
将出现错误,因为它已被注释预计它会出现在非注释方法之前,在此 ngOnInit
中,私有方法也会出现错误。
实际问题是我的组件 eslintrc.json 的第一行 extends
以根 eslintrc 为目标,我想覆盖该文件上的所有规则。如果我将成员顺序更改为根 eslintrc,则该规则将停止工作并恢复为添加图像的错误。
此外,当 运行 npx eslint --print-config .\my-component.ts
来自我的组件目录时,我得到以下配置以应用成员排序:
"@typescript-eslint/member-ordering": [
"error",
{
"default": [
"static-field",
"instance-field",
"static-method",
"instance-method"
]
}
],
我真的不知道这是从哪里来的。
有谁知道为什么我的组件 eslint 没有从根 eslintrc 扩展规则?
=====更新==========
Eslint 相关依赖 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",
项目中可能