一般情况下ESLint只能检测JavaScript文件中的代码,如果我们想检测Html中的JavaScript怎么办?我们可以使用eslint-plugin-html插件,步骤如下:
1.、项目中安装html插件:
cnpm i eslint-plugin-html -D
安装后的package.json:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"eslint": "^6.8.0",
"eslint-plugin-html": "^6.0.0"
}
}
2. 在设置中添加对.html后缀文件支持,在“file->preferences->settings”进行配置:
{
"eslint.validate": [
"javascript",
"html"
]
}
3、.eslintrc.js中添加eslint-plugin-html插件名称:
module.exports = {
"env": {
"browser": true,
"es6": true
},
"extends": "eslint:recommended",
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"html", //eslint-plugin-html插件
],
"rules": {
"no-alert": 1,//禁止使用alert confirm prompt
"no-console": 2,//禁止使用console
}
};
如上设置,可以在html和vue等文件中的<script></script>标签中启用eslint了。
如果你需要对其他后缀结尾的文件启用ESLint,只要在eslint.validate设置中添加后缀即可,是不是很方便?赶快行动吧!