我们都知道，使用 vue 打开代码检查后，常常会报一大堆错误，接下来我们使用 vscode 配置插件，使得可以保存之后自动格式化，并且解决报错。

安装插件

• vetur
• eslint

安装插件的办法就不赘述了，vscode中搜索关键词直接 install即可。

配置

在安装好的插件右下角点击⚙️齿轮打开配置页面：

选择在 settings.json中编辑：

粘贴如下配置即可：

"vetur.format.defaultFormatter.js": "vscode-typescript",
"eslint.validate": [
    "javascript",
    "javascriptreact",
    {
        "language": "vue",
        "autoFix": true
    }
],
"eslint.autoFixOnSave": true

！！！
注意，上面的配置已经过时
最新配置：

"vetur.format.defaultFormatter.js": "vscode-typescript",
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue"
    ],
    "editor.codeActionsOnSave":{
        "source.fixAll.eslint":true
    },

如下图所示：
接下来回到我们的vue文件中：

在我们使用command+shift+F格式化代码后（ window 下为alt+shift+F）

可以看到上面还有几个问题，一个是双引号需要改为单引号，另一个是函数和括号直接需要有一个空格，诶，说好的自动格式化解决报错呢？
害，别着急，这时我们使用command+S（window下为 ctrl+S）保存，我们可以看到：

完美～