1、先在项目内的package.json文件中"devDependencies"下设置相关依赖包:
"eslint": "^5.15.3",
"eslint-plugin-vue": "^5.2.2",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^4.0.2",
"eslint-plugin-html": "^6.1.2",
"eslint-plugin-prettier": "^3.4.1",
"@vue/cli-plugin-eslint": "^3.9.1",
"@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "10.0.1",
2、执行 npm install 命令,vue.config.js中:lintOnSave:true
3、项目根目录下增加两个文件:
.eslintrc(配置相关Eslint规则),
.eslintignore(配置过滤校验的目录)
相关Eslint参考规则文档:https://www.cnblogs.com/fsg6/p/14350153.html
4、VS code工具 安装两个依赖插件:(插件市场搜索)
ESlint、Prettier-Code formatter、Vetur
5、配置VS Code 工具 打开 左下角设置-setting.json文件,配置完建议重启
{
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
"vetur.validation.template": false,
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 2,
//代码格式化
// 保存自动化
/* 关闭编辑器自带保存格式化功能,此功能会用Vetur进行格式化。*/
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.fixAll.eslint": true
},
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"git.ignoreWindowsGit27Warning": true,
"explorer.confirmDelete": false,
"editor.suggestSelection": "first",
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"files.associations": {
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript"
},
"emmet.includeLanguages": {
"wxml": "html"
},
"minapp-vscode.disableAutoConfig": true,
"editor.fontSize": 14,
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
],
"eslint.workingDirectories": [
".eslintrc.js",
{
"mode": "auto"
}
],
"security.workspace.trust.untrustedFiles": "open",
"editor.fontLigatures": null,
}
6、启动项目后会根据当前设置的eslint规则进行相关页面的校验,目前遇到的是除非打开某个vue文件。会提示相关不符合规则的代码,根据提示 ,windows+. 快捷键;选择快速修复健即可处理 目前设置的保存时可根据Vetur进行格式化