[英]ESLint error when trying to lint Angular templates
I have an Angular 10 app set up with eslint and prettier, which worked fine so far for linting Typescript files.我有一个使用 eslint 和 prettier 设置的 Angular 10 应用程序,到目前为止它可以很好地处理 Typescript 文件。 I'm now trying to lint my component template files as well following this doc .
我现在正在尝试按照这个文档对我的组件模板文件进行 lint。
But when I run it with eslint. --ext.js,.ts,.component.html --fix
但是当我用
eslint. --ext.js,.ts,.component.html --fix
eslint. --ext.js,.ts,.component.html --fix
I keep getting eslint. --ext.js,.ts,.component.html --fix
我不断得到
Error while loading rule '@typescript-eslint/dot-notation': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.
My .eslintrc.js
looks like this (note the second block in the overrides
section):我的
.eslintrc.js
看起来像这样(注意overrides
部分的第二个块):
module.exports = {
extends: [
"plugin:@angular-eslint/recommended",
// For spec files
"plugin:jasmine/recommended",
// AirBnB Styleguide rules
"airbnb-typescript/base",
// Settings for Prettier
"prettier/@typescript-eslint",
"plugin:prettier/recommended",
],
plugins: [
"prettier",
"jasmine",
],
rules: {
"import/no-unresolved": "off",
"@angular-eslint/component-selector": [
"error", { type: "element", prefix: "icc", style: "kebab-case" }
],
"@angular-eslint/directive-selector": [
"error", { type: "attribute", prefix: "icc", style: "camelCase" }
],
"import/extensions": "off",
"@typescript-eslint/lines-between-class-members": "off",
"lines-between-class-members": "off",
"class-methods-use-this": "off",
"import/prefer-default-export": "off",
"prettier/prettier": ["error", {
"endOfLine":"auto"
}],
},
parser: "@typescript-eslint/parser",
parserOptions: {
project: "./tsconfig.app.json",
ecmaVersion: 2020,
sourceType: "module",
},
settings: {
'import/resolver': {
node: {
extensions: ['.ts', '.js'],
moduleDirectory: ['node_modules', 'src/app'],
}
}
},
overrides: [
{
files: ["*.component.ts"],
parser: "@typescript-eslint/parser",
parserOptions: {
project: "./tsconfig.app.json",
ecmaVersion: 2020,
sourceType: "module",
},
plugins: ["@angular-eslint/template"],
processor: "@angular-eslint/template/extract-inline-html",
},
{
files: ["*.component.html"],
parser: "@angular-eslint/template-parser",
parserOptions: {
project: "./tsconfig.app.json",
ecmaVersion: 2020,
sourceType: "module",
},
plugins: ["@angular-eslint/template"],
},
{
files: ["src/**/*.spec.ts", "src/**/*.d.ts"],
parser: "@typescript-eslint/parser",
parserOptions: {
project: "./tsconfig.spec.json",
ecmaVersion: 2020,
sourceType: "module",
},
// Jasmine rules
extends: ["plugin:jasmine/recommended"],
// Plugin to run Jasmine rules
plugins: ["jasmine"],
env: { jasmine: true },
}
],
};
As you can see I specify parserOptions.project
everywhere.如您所见,我在任何地方都指定
parserOptions.project
。 I'm especially confused that the error message complains about something relating to @typescript-eslint/parser
which is not the parser that should be used anyway for templates.我特别困惑的是,错误消息抱怨与
@typescript-eslint/parser
相关的东西,这不是应该用于模板的解析器。 Removing the parserOptions
block from the overrides section does not make a difference.从 overrides 部分中删除
parserOptions
块并没有什么不同。
I could set "@typescript-eslint/dot-notation": "off"
for all the rules it complains about but obviously that's not ideal.我可以为它抱怨的所有规则设置
"@typescript-eslint/dot-notation": "off"
但显然这并不理想。 Can somebody point me towards what I'm missing?有人可以指出我所缺少的吗?
UPDATE : I've turned off all type-aware rules as Brad suggested.更新:我已经按照 Brad 的建议关闭了所有类型感知规则。 However, the error I'm now getting is:
但是,我现在得到的错误是:
TypeError: Cannot read property 'length' of undefined
Occurred while linting /path/to/src/app/app.component.html:1
at getUseStrictDirectives (/path/to/node_modules/eslint/lib/rules/strict.js:27:36)
But my app.component.html
just looks like this:但我的
app.component.html
看起来像这样:
<div class="content-root">
<router-outlet></router-outlet>
</div>
So once again, I'm lost.所以再一次,我迷路了。
UPDATE 2 : I've finally managed to get it working by turning rule after rule off for the template parser as Brad suggested in his answer.更新 2 :正如布拉德在他的回答中建议的那样,我终于设法通过为模板解析器关闭规则来使其正常工作。 My working
overrides
block now looks like this:我的工作
overrides
块现在看起来像这样:
{
files: ["*.component.html"],
parser: "@angular-eslint/template-parser",
rules: {
"@typescript-eslint/dot-notation": "off",
"@typescript-eslint/no-implied-eval": "off",
"@typescript-eslint/no-throw-literal": "off",
"strict": "off",
"import/first": "off",
"lines-around-directive": "off"
},
plugins: ["@angular-eslint/template"],
},
Your config here overrides the parser used for angular templates.您在此处的配置会覆盖用于 angular 模板的解析器。 This means that you're not using
@typescript-eslint/parser
to parse your angular templates.这意味着您没有使用
@typescript-eslint/parser
来解析您的 angular 模板。
{
files: ["*.component.html"],
parser: "@angular-eslint/template-parser",
parserOptions: {
project: "./tsconfig.app.json",
ecmaVersion: 2020,
sourceType: "module",
},
plugins: ["@angular-eslint/template"],
},
This makes sense, because @typescript-eslint/parser
cannot understand angular templates.这是有道理的,因为
@typescript-eslint/parser
无法理解 angular 模板。
However @angular-eslint/template-parser
also does not have the infrastructure required to provide the information for type-aware linting.然而
@angular-eslint/template-parser
也没有提供类型感知 linting 信息所需的基础设施。
This is why the lint rule fails on your file.这就是为什么 lint 规则在您的文件上失败的原因。
You need to disable all type-aware lint rules on your files parsed with @angular-eslint/template-parser
您需要在使用
@angular-eslint/template-parser
解析的文件上禁用所有类型感知 lint 规则
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.