我有一个使用 eslint 和 prettier 设置的 Angular 10 应用程序,到目前为止,它在检查 Typescript 文件方面工作得很好。我现在正在尝试检查我的组件模板文件遵循此文档。
但是当我用
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.
我的
.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 },
}
],
};
如你所见,我到处都指定了
parserOptions.project
。我特别困惑的是,错误消息抱怨与 @typescript-eslint/parser
相关的内容,这不是无论如何都应该用于模板的解析器。从覆盖部分删除 parserOptions
块不会产生任何影响。
我可以为它抱怨的所有规则设置
"@typescript-eslint/dot-notation": "off"
,但显然这并不理想。有人可以指出我缺少的东西吗?
更新:我已经按照布拉德的建议关闭了所有类型感知规则。但是,我现在遇到的错误是:
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)
但是我的
app.component.html
看起来就像这样:
<div class="content-root">
<router-outlet></router-outlet>
</div>
所以我再一次迷失了。
更新2:我终于成功地通过关闭模板解析器的规则来使其正常工作,正如布拉德在他的回答中所建议的那样。我的工作
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"],
},
您的配置此处覆盖用于角度模板的解析器。这意味着您没有使用
@typescript-eslint/parser
来解析您的角度模板。
{
files: ["*.component.html"],
parser: "@angular-eslint/template-parser",
parserOptions: {
project: "./tsconfig.app.json",
ecmaVersion: 2020,
sourceType: "module",
},
plugins: ["@angular-eslint/template"],
},
这是有道理的,因为
@typescript-eslint/parser
无法理解角度模板。
但是
@angular-eslint/template-parser
也没有提供类型感知 linting 信息所需的基础设施。
这就是 lint 规则在您的文件上失败的原因。
您需要在使用
@angular-eslint/template-parser
解析的文件上禁用所有类型感知的 lint 规则
此常见问题解答文章包含有关如何禁用此类文件的类型感知规则的信息 https://typescript-eslint.io/troubleshooting/#i-get-errors-telling-me-eslint-was-configured-to-run--however-that-tsconfig-does-not--none-of- those-tsconfigs-include-this-file
具体来说,像这样的东西应该适用于新的平面配置格式:
{
files: ["**/*.component.html"],
...tseslint.configs.disableTypeChecked,
}