解决vscode进行vue格式化,会自动补分号和双引号的问题
更新时间：2020年10月26日 14:17:33 作者：胖子ღ牛逼
这篇文章主要介绍了解决vscode进行vue格式化,会自动补分号和双引号的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在使用vscode开发vue项目时，严格检查让人有点烦恼，必然需要一款可以自动格式化的插件进行快速严格检查的格式化。vscode插件会推荐使用 vetur 插件才会进行vue文件的识别与高亮。
安装完 vetur 后确实是可以对 vue文件进行高亮显示了，但是当你按下 shift+alt+f 进行格式化时，发现本来没有错误的代码却变成了一堆错误，莫名加上了分号，单引号也成功变成双引号了。在vue的严格检查中这些是最烦的。
那么需要对vscode的配置文件进行配置才可支持vue正确格式化。
打开 文件 -》首选项 -》往下拉找到 settings.json -》打开
默认的 settings.json 配置项可能不一样，现在只需要往json中写入以下配置就可格式化vue啦。
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": false,
"singleQuote": true
}
}
可能会出现 分号和双引号确实不会再自动添加了，但是不会在方法括号之间插入空格，可以再加入这条配置即可。
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.format.defaultFormatter.js": "vscode-typescript"
最好再配置下vscode支持vue语言
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
{
"language": "vue",
"autoFix": true
}
]
补充知识：vscode格式化Vue出现的问题：单引号变双引号
问题描述
在使用vscode格式化vue代码时，出现单引号变成了双引号问题
解决方案
在项目根目录下新建文件：.prettierrc.json
内容：
{
"singleQuote":true,
"semi":false
}
以上这篇解决vscode进行vue格式化,会自动补分号和双引号的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了Vue+echart 展示后端获取的数据，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定。这篇文章主要介绍了Vue.js中v-bind v-model的使用和区别,需要的朋友可以参考下2018-12-12
这篇文章主要介绍了webstrom Debug 调试vue项目的方法步骤，详细的介绍了两种调试vue项目的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
Vue 是一款流行的JavaScript 框架，用于构建用户界面，在Vue2和 Vue3中，都存在一个名为toRefs的函数，但其行为在这两个版本中有所不同，这篇文章主要介绍了Vue2和Vue3中toRefs的区别,需要的朋友可以参考下2023-08-08
本篇文章主要介绍了浅谈vuepress 踩坑记，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
下面小编就为大家分享一篇解决使用Vue.js显示数据的时,页面闪现原始代码的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
本文将深入探讨计算属性未生效的常见原因,并提供排查和解决方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-03-03
这篇文章主要介绍了vue金额格式化保留两位小数的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最近需要做一个el-table的表格,表头需要显示提示信息,本文主要介绍了ElementUI中el-table表格组件如何自定义表头,具有一定的参考价值,感兴趣的可以了解一下2023-09-09
Vue组件和插件是Vue生态系统中的两种重要概念,它们分别服务于不同的目的,但都极大地丰富了Vue的功能性和可扩展性,下面我们就来看看二者的用法以及区别吧2024-03-03
最新评论