我有一个使用 eslint 和 prettier 设置的 Angular 10 应用程序,到目前为止它可以很好地用于 linting Typescript 文件。我现在正在尝试按照这个文档对我的组件模板文件进行 lint 。
但是当我运行它时,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"
它抱怨的所有规则,但显然这并不理想。有人可以指出我所缺少的吗?
更新:我已经按照 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:正如布拉德在他的回答中建议的那样,我终于设法通过为模板解析器关闭规则来使其正常工作。我的工作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"],
},