解决vscode进行vue格式化,会自动补分号和双引号的问题


Posted in Javascript onOctober 26, 2020

在使用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格式化,会自动补分号和双引号的问题

以上这篇解决vscode进行vue格式化,会自动补分号和双引号的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
关于Javascript加载执行优化的研究报告
Dec 16 Javascript
JavaScript模拟实现继承的方法
Mar 30 Javascript
js中跨域方法原理详解
Jul 19 Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
BootStrap select2 动态改变值的方法
Feb 10 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
Apr 13 Javascript
微信小程序 密码输入(源码下载)
Jun 27 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
vue+iview 兼容IE11浏览器的实现方法
Jan 07 Javascript
vue实现前端列表多条件筛选
Oct 26 #Javascript
vue实现单一筛选、删除筛选条件
Oct 26 #Javascript
vue通过接口直接下载java生成好的Excel表格案例
Oct 26 #Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 #Javascript
原生js实现贪吃蛇游戏
Oct 26 #Javascript
JavaScript实现五子棋小游戏
Oct 26 #Javascript
详解vue3.0 的 Composition API 的一种使用方法
Oct 26 #Javascript
You might like
PHP中include与require使用方法区别详解
2013/10/19 PHP
php不允许用户提交空表单(php空值判断)
2013/11/12 PHP
Codeigniter出现错误提示Error with CACHE directory的解决方案
2014/06/12 PHP
PHP判断是否连接上网络的方法
2015/07/01 PHP
PHP中header用法小结
2016/05/23 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
Js base64 加密解密介绍
2013/10/11 Javascript
JavaScript获取DOM元素的11种方法总结
2015/04/25 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
vue中的ref和$refs的使用
2018/11/22 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
微信小程序个人中心的列表控件实现代码
2020/04/26 Javascript
[01:36]DOTA2完美大师赛趣味视频之与队友相处的十万个技巧
2017/11/19 DOTA
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
videocapture库制作python视频高速传输程序
2013/12/23 Python
Python实现全局变量的两个解决方法
2014/07/03 Python
Python实现多线程抓取网页功能实例详解
2017/06/08 Python
Python初学时购物车程序练习实例(推荐)
2017/08/08 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
Python3匿名函数用法示例
2018/07/25 Python
python实现同一局域网下传输图片
2020/03/20 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
T3官网:头发造型工具
2019/12/26 全球购物
教师查摆问题自查报告
2014/10/11 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
退休劳动合同怎么写?
2019/10/25 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书
pytorch实现手写数字图片识别
2021/05/20 Python
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android