在vscode环境下开发vue,难免会遇到esline语法问题,一连串的报错信息。
解决方法:
1、先准备3个插件
1)Vetur
2)Prettier - Code formatter
3)ESLint
然后修改用户的配置文件,我的配置如下:
{
"workbench.startupEditor": "newUntitledFile",
"editor.fontSize": 16,
"explorer.confirmDelete": false,
"files.associations": {
"*.wxss": "css",
"*.cjson": "jsonc",
"*.wxs": "javascript",
"*.wxml": "wxml",
"*.less": "less",
"*.vue": "vue",
"*.wpy": "vue"
},
"emmet.includeLanguages": {
"wxml": "html",
"vue-html": "html",
"vue": "html"
},
"minapp-vscode.disableAutoConfig": true,
"explorer.confirmDragAndDrop": false,
"[less]": {},
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
// "eslint.autoFixOnSave": false,
"eslint.validate": [
"javascript",
"javascriptreact",
"vue-html",
{
"language": "vue",
"autoFix": true
},
"html",
"vue"
],
// 需要 npm install -g eslint-plugin-vue
"eslint.options": {
"extensions": [
".js",
".vue"
]
},
"eslint.autoFixOnSave": true,
"vetur.format.defaultFormatter.html": "js-beautify-html",
"window.zoomLevel": 0,
"javascript.updateImportsOnFileMove.enabled": "always",
"workbench.editor.enablePreview": false, //打开文件不覆盖
"search.followSymlinks": false, //关闭rg.exe进程
"editor.minimap.enabled": false, //关闭快速预览
"files.autoSave": "afterDelay", //打开自动保存
"editor.lineNumbers": "on", //开启行数提示
"prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验
"prettier.semi": false, //去掉代码结尾的分号
"editor.quickSuggestions": {
//开启自动显示建议
"other": true,
"comments": true,
"strings": true
},
"editor.tabSize": 2, //制表符符号eslint
"editor.formatOnSave": true, //每次保存自动格式化
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
"vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned" //属性强制折行对齐
}
},
}
由于每个人开发习惯不一样,所以在配置文件中可能还会看到wxml之类的配置(主要用于小程序)。所以可以根据自己的习惯来配置,重点的配置已经加上了注释。
配置完成后,重启一下vscode。在格式化代码 / 保存代码,发现就已经没有报错了
还有一个需要注意的是,关闭其他的格式化代码的工具,避免各个插件之间的冲突
**THE END**