问题描述
我有一个Angular 10应用程序,该应用程序设置了eslint和漂亮的脚本,到目前为止,对于lint Typescript文件来说,它运行良好。我现在也尝试将组件模板文件也放到following this doc中。
但是当我用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",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"],parserOptions: {
project: "./tsconfig.app.json",plugins: ["@angular-eslint/template"],processor: "@angular-eslint/template/extract-inline-html",{
files: ["*.component.html"],parser: "@angular-eslint/template-parser",{
files: ["src/**/*.spec.ts","src/**/*.d.ts"],parserOptions: {
project: "./tsconfig.spec.json",// 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"
,但显然这并不理想。有人可以指出我想念的东西吗?
更新:我已经按照Brad的建议关闭了所有类型识别规则。但是,我现在得到的错误是:
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 :我终于设法按照Brad在回答中建议的那样,通过关闭模板解析器的规则来使其工作。我的overrides
工作块现在看起来像这样:
{
files: ["*.component.html"],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"
},
解决方法
此处的配置将覆盖用于角度模板的解析器。这意味着您没有使用@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
也没有提供用于类型识别的插入信息的必需的基础结构。
这就是为什么lint规则在您的文件上失败的原因。
您需要在用@angular-eslint/template-parser
解析的文件上禁用所有类型识别棉绒规则。