目的：在用vscode编辑vue和html文件时，用eslint可以同时验证其中的js代码，让其符合js standard和vue的规则。
===安装eslint支持,都安装在项目中===
cmd进入项目目录
npm init -y
npm i -D eslint
npm i -D eslint-plugin-vue
npm i -D eslint-plugin-html
npm i -D eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node
===vscode安装插件===
vetur，eslint， IntelliSense for CSS class names，css peek
#ctrl+shift+p
#然后eslint c，在当前项目中创建.eslintrc.json文件。
#或者开启optinons选项来引用异地的配置文件
#.eslintrc.json中必须用"html/html-extensions": [".html", ".we"],来限定eslint-plugin-html的作用范围，因为eslint-plugin-html与eslint-plugin-vue有冲突，不限定的话会导致eslint无法识别错误
#同时启用了两个js验证规则：standard, eslint-plugin-vue
===.eslintrc.json===
{
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"sourceType": "module"
},
"plugins": [ "html" ],
"settings": {
"html/html-extensions": [".html", ".we"],
"html/report-bad-indent": "error"
},
"extends": [
"standard",
"plugin:vue/recommended"
],
"rules": {
"no-const-assign": "warn",
"no-this-before-super": "warn",
"no-undef": "warn",
"no-unreachable": "warn",
"no-unused-vars": "warn",
"constructor-super": "warn",
"valid-typeof": "warn"
}
}
===vscode自定义配置===
{
"git.ignoreMissingGitWarning": true,
"workbench.startupEditor": "newUntitledFile",
"editor.fontSize": 16,
"javascript.validate.enable": false,
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
"**/node_modules": true
},
//不增加关联,eslint-plugin-vue会产生重复提示
"files.associations": {
"*.vue": "html"
},
"eslint.options": {
//"configFile": "F:/.eslintrc.json"
},
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
],
}
===删除vscode时要清理的目录===
C:\\Users\\ZR\AppData\\Roaming\\Code
C:\\Users\\ZR\\.vscode
网友评论