解决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格式化,会自动补分号和双引号的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 详解Vue3的响应式原理解析

    详解Vue3的响应式原理解析

    这篇文章主要为大家介绍了Vue3的响应式原理解析,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • 关于Vue不能监听(watch)数组变化的解决方法

    关于Vue不能监听(watch)数组变化的解决方法

    本文主要介绍了Vue不能监听(watch)数组变化的解决方法,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 前端不用跑项目vscode组件效果所见即所得

    前端不用跑项目vscode组件效果所见即所得

    这篇文章主要为大家介绍了一款不用跑项目的vscode组件所见即所得效果的使用方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-04-04
  • Vue数据双向绑定原理及简单实现方法

    Vue数据双向绑定原理及简单实现方法

    vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的.本文重点给大家介绍Vue数据双向绑定原理及简单实现方法,感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-05-05
  • Vue项目启动后如何在浏览器自动打开

    Vue项目启动后如何在浏览器自动打开

    这篇文章主要介绍了Vue项目启动后如何在浏览器自动打开问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • 使用element-ui table expand展开行实现手风琴效果

    使用element-ui table expand展开行实现手风琴效果

    这篇文章主要介绍了使用element-ui table expand展开行实现手风琴效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • Vue/React子组件实例暴露方法(TypeScript)

    Vue/React子组件实例暴露方法(TypeScript)

    最近几个月都在用TS开发各种项目,框架有涉及到Vue3,React18等,记录一下Vue/React组件暴露出变量/函数的方法的写法,对vue react组件暴露方法相关知识感兴趣的朋友跟随小编一起看看吧
    2022-11-11
  • Vue.use源码分析

    Vue.use源码分析

    这篇文章主要为大家详细介绍了Vue.use源码,Vue.use方法的引入,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • vue移动端路由切换实例分析

    vue移动端路由切换实例分析

    本篇文章给大家分享了vue移动端路由切换实例以及相关知识点,对此有兴趣的朋友可以参考学习下。
    2018-05-05
  • 一步步讲解Vue如何启动项目

    一步步讲解Vue如何启动项目

    这篇文章主要给大家介绍了关于Vue如何启动项目的相关资料,还介绍了解决vue启动项目时间很长问题的相关方法,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-02-02

最新评论