如何解决EsLint 无法识别我的 Web Components 扩展 HTMLElement 接口
我用 StencilJS 构建了一堆 Web 组件并将它们发布到 NPM。接下来,我确实在我的 Angular 11 应用程序中安装了 NPM 包,并遵循了 Stencils Angular 框架集成指南。自定义元素工作正常,但是当我定义类型并在我的 esLint 规则集中设置了“no-undef”时,我从 esLint 收到以下错误:
“'HTMLMiIconElement' 未定义”
这是我的 web 组件的扩展 HTMLElement 接口。
当手动导入到使用它的 typeScript 文件时,一切似乎都可以工作,但我从以前的项目中知道它应该没有必要。
我认为我在监督某事,希望得到任何帮助! :)
my-component-file.ts
const miIconElement: HTMLMiIconElement = document.createElement('mi-icon');
.eslintrc.js
module.exports = {
"root": true,'overrides': [
{
"files": ["*.ts"],'parser': '@typescript-eslint/parser','env': {
'browser': true,'es6': true,'jest': true
},'globals': {
'google': 'readonly'
},'parserOptions': {
ecmaVersion: 2020,// Allows for the parsing of modern ECMAScript features
sourceType: 'module' // Allows for the use of imports
},'rules': {
'no-undef': 2,}
},{
"files": ["*.html"],"parser": "@angular-eslint/template-parser","plugins": ["@angular-eslint/template"],}
]
};
tsconfig.json
{
"compileOnSave": false,"compilerOptions": {
"baseUrl": "./","downlevelIteration": true,"module": "esnext","outDir": "./dist/out-tsc","sourceMap": true,"declaration": false,"moduleResolution": "node","emitDecoratorMetadata": true,"experimentalDecorators": true,"allowSyntheticDefaultImports": true,"target": "es2015","typeRoots": [
"node_modules/@types"
],"lib": [
"es2020","dom"
],"types": [
"node","jest","googlemaps"
]
}
}
tsconfig.app.json
{
"extends": "../tsconfig.json","compilerOptions": {
"outDir": "../out-tsc/app","googlemaps"
]
},"files": [
"main.ts","polyfills.ts"
],"include": [
"src/**/*.d.ts"
]
}
解决方法
询问 Stencil 社区后发现,强烈建议不要在 TypeScript 项目上使用 no-undef
lint 规则,因为 TypeScript 已经提供了此检查。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。