如何在VSCode中获取ESLint lint HTML文件？ [英] How can I get ESLint to lint HTML files in VSCode?
问题描述
我有一个Javascript浏览器项目拆分多个文件，无法让ESLint在同一全局范围内lint我的HTML文件的脚本标记，以便在另一个文件中识别和调用一个文件中的类和函数。
I have a Javascript browser project split over multiple files and can't get ESLint to lint the script tags of my HTML file under the same global scope so that declarations and calls of classes and functions in one file are recognised in another.
这是我的项目结构：
这是foo.js的内容：
This is the contents of foo.js:
sayHello();
和bar.js：
function sayHello() {
console.log('Hello');
}
我已将它们链接到HTML文件中：
And I have linked them both in the HTML file:
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<script src="libraries/bar.js" type="text/javascript"></script>
<script src="foo.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
我认为这个解决方案是使用eslint-plugin-html包但是试过配置它没有运气。这些是我在本地安装到项目中的软件包：
I thought that the solution to this was to use the eslint-plugin-html package but have tried to configure it with no luck. These are the packages I've installed locally to the project:
Alexs-MacBook-Pro:Demo alexmcdermott$ npm list --depth=0
demo@1.0.0 /Users/alexmcdermott/GitHub/Demo
├── eslint@5.12.0
├── eslint-config-airbnb-base@13.1.0
├── eslint-plugin-html@5.0.0
└── eslint-plugin-import@2.14.0
我正在使用VSCode编辑器，但终端也遇到了同样的问题：
I'm using the VSCode editor but have also had the same problem in the terminal:
Alexs-MacBook-Pro:Demo alexmcdermott$ npx eslint --ext .js,.html .
/Users/alexmcdermott/GitHub/Demo/foo.js
1:1 error 'sayHello' is not defined no-undef
/Users/alexmcdermott/GitHub/Demo/libraries/bar.js
1:10 error 'sayHello' is defined but never used no-unused-vars
2:3 warning Unexpected console statement no-console
✖ 3 problems (2 errors, 1 warning)
和VSCode相同：
这是我的ESLint配置：
This is my ESLint config:
{
"env": {
"browser": true,
"es6": true
},
"extends": "airbnb-base",
"plugins": [ "html" ]
}
我还配置VSCode在我的VSCode用户设置中使用这些选项在HTML文件上运行ESLint：
and I've also configured VSCode to run ESLint on HTML files with these options in my VSCode user settings:
{
"eslint.autoFixOnSave": true,
"eslint.options": {
"extensions": [ ".js", ".html" ]
},
"eslint.validate": [
"javascript",
{
"language": "html",
"autoFix": true
}
]
}
虽然我一定做错了，或者错过了这一点 - 插件，HTML？如果有人对我做错了什么或如何解决这个问题有任何意见，我会非常感激，因为我已经坚持了很久。如果我需要提供更多信息，请告诉我。我是新手。
Although I must be doing something wrong, or am missing the point of the eslint-plugin-html? If anyone has any input as to what I'm doing wrong or how to fix this I'd greatly appreciate it as I've been stuck on this for ages. Please let me know if I need to provide more info, I'm new to this.
推荐答案
我在< projectfolder> /。vscode / settings.json
{
"eslint.validate": [ "javascript", "html" ]
}
我正在使用 .eslintrc.js 看起来像这样
I'm using an .eslintrc.js that looks like this
module.exports = {
"env": {
"browser": true,
"es6": true
},
"plugins": [
"eslint-plugin-html",
],
"extends": "eslint:recommended",
"rules": {
}
};
我定义了很多规则，但没有将它们粘贴在上面
I have lots of rules defined but didn't paste them above
结果：
这篇关于如何在VSCode中获取ESLint lint HTML文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
