我们都知道,使用 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)保存,我们可以看到:
在这里插入图片描述
完美~

Logo

前往低代码交流专区

更多推荐