vscode 保存修复vue文件的eslint语法错误

1.先安装ESlint和Vetur这两个插件

2.按照如下步骤打开vscode的配置文件

3.将下列代码粘贴进去保存即可使用

	// 每次保存的时候将代码按eslint格式进行修复
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},
	// 保存时格式化
"editor.formatOnSave": true,
    // 格式化vue文件使用vetur
"[vue]": {
    "editor.defaultFormatter": "octref.vetur"
},
    // 让vue中的js按编辑器自带的ts格式进行格式化 
"vetur.format.defaultFormatter.js": "vscode-typescript",
    // 让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    //vue的模板文件中的 html 使用自带的 js-beautify-html 进行格式化
"vetur.format.defaultFormatter.html": "js-beautify-html", 
    // vue tab 大小为2个空格
"vetur.format.options.tabSize": 2,
    // vutur 覆盖默认设置
"vetur.format.defaultFormatterOptions": {
        // 让html的attributes不换行，看起来会更美观
   "js-beautify-html":{
       "wrap_line_length": 240,
       "wrap_attributes": "auto",
       "end_with_newline": false
   }
}

4.现在在vue文件中保存即可修复语法错误，比如：双引号变单引号，函数和括号间会有间隔，最后的方法或数据后面会消除逗号等等

编辑 | sishen
来源 | 前端兔
公众号 | 前端兔

关注公众号查看更多前端知识分享~~