我们都知道，使用 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）保存，我们可以看到：

完美～

vscode 配置 vetur + eslint相关推荐

vscode 配置 vetur插件
在开发vue中,我不希望template模板内容的属性换行显示,那直接设置:"vetur.format.defaultFormatter.html": "js-beaut ...
vscode 配置vetur的分号、引号、尾随逗号
vscode中采用vetur自动格式化代码配置案例中的vscode版本是1.47.3,不同版本按钮位置可能有差异 vetur配置项 {"vetur.format.defaultFormat ...
vscode中如何修改vetur配置_vscode 配置vue+vetur+eslint+prettier自动格式化功能
该配置用于vue开发,最终效果是保存时自动根据eslint对js.html和css代码进行格式化. vscode Vetur插件 Vetur插件用于识别vue文件,原本vetur自带格式化功能,但是和 ...
VSCode配置格式化工具(Prettier/Vetur/ESLint)和jsconfig.json
VSCode配置格式化工具(Prettier/Vetur/ESLint) 网上很多配置,有的过时了, 有的很杂, 自己看了下文档,简单配置了以下, 顺便记录下来. 准备用vue-cli建好项目之后, ...
vscode保存卡顿，显示正在从“‘Vetur‘, ‘ESLint‘”获取代码操作([配置]
最近在写vue代码时,时常会显示正在保存,正在从"'Vetur', 'ESLint'"获取代码操作([配置],而且电脑cpu功耗很大,vscode会卡住. 解决方案 1.建议重启v ...
VUE环境搭建教程以及VSCODE插件Vetur和ESlint的安装配置
*此教程适用于Windows环境下 Author:Sinclair CreateDate:2018-10-09 1.安装node.js 下载地址:Download | Node.js (LTS代表 ...
Vue学习笔记7 - 在Vscode中配置Vetur，ESlint，Prettier
俗话说得好,工欲善其事必先利其器,想要熟练开发Vue项目,一个好的开发环境就是必不可少了,这里我就选用了vscode作为开发工具,毕竟vscode免费,还跨平台,应用范围也广,著名的vue开源项目:后 ...
vscode保存卡顿，显示正在从“‘Vetur‘, ‘ESLint‘”获取代码...
写vue代码时,时常会显示正在保存,正在从"'Vetur', 'ESLint'"获取代码操作([配置],而且电脑cpu功耗很大,vscode会卡住 1.网上很多都是删除settin ...
关闭eslint检查2020_2020 vscode配置eslint保存后自动fix
2020 vscode配置eslint保存后自动fix 这篇文章发布于 2019/10/12,归类于计算机基础与开发工具标签: vscode 保存自动fix,vscode 保存执行fix,esli ...

vscode 配置 vetur + eslint

安装插件

配置

vscode 配置 vetur + eslint相关推荐

最新文章

热门文章