vscode格式化Vue出现的问题
一、VSCode中使用vetur插件格式化vue文件时，js代码会自动加上冒号和分号
本来就是简写比较方便舒服，结果一个格式化回到解放前
最后找到问题原因：
首先，vetur默认设置是这个样的。也就是很多是用的prettier插件。
解决办法1 (最快的解决办法)
把"vetur.format.defaultFormatter.js": "prettier",改为 "vetur.format.defaultFormatter.js": "vscode-typescript"
参考自 记一次vscode升级后，格式化Vue出现的问题
但是这样就没有用到Prettier这个酷酷的东西，于是自己打算继续研究
解决办法2 (踏实的解决办法)
一打开Prettier官网，阔怕全是英文，还是硬着头皮上
(1)安装
yarn安装
yarn add prettier --dev --exact
或者全局安装
yarn global add prettier
或者npm(当然cnpm也可以)
npm install --save-dev --save-exact prettier
或者全局安装
npm install --global prettier
(2)新建.prettierrc.json配置文件放在vue项目的root目录下(也就是和README.md文件同一目录)
(3)配置.prettierrc.json文件如下
{
"singleQuote":true,//使用单引号而不是双引号,true就是对
"semi":false//在语句结尾处打印分号,false就是不打印
}
小伙伴们还想配置其他参数选项可参考官网Prettier的选项和参数描述
现在按快捷键Shift+Alt+f格式化js代码就不会加上冒号和分号了。
作者相关Vue文章
打赏 衷心的表示感谢
vscode格式化Vue出现的问题的更多相关文章
- vscode格式化Vue出现的问题：单引号变双引号 格式化去掉分号
学习vue框架时,发现在使用vscode格式化vue代码时,出现单引号变成了双引号问题(导致和EsLint要求不一致),从而导致报错!!!!好坑啊!!! 解决方法如下 在文件根目录下创建 .prett ...
- 解决vscode格式化vue文件出现的问题
遇到的问题 使用vscode开发vue项目的时候,格式化vue文件,与自己配置的eslint标准会有冲突. 引号问题:单引号变双引号 分号问题:行末是否加分号.自动加/减分号 当然还会有其他个性化冲突 ...
- VScode格式化vue文件
使用vscode编写vue文件的时候, 发现不能格式化,手动格式化代码,太费劲, 还有可能会出错, 不格式化,有的时候代码编写的时候, 没有很好的管理格式,不美观. 但是我们是可以修改让VScode可 ...
- Vscode 格式化vue Template代码段
1.安装 vetur 2.在User Setting中增加设置: "vetur.format.defaultFormatter.html": "js-beautify-h ...
- vscode 格式化vue代码单引号变双引号
首选项->设置.输入框输入vetur vscode中设置 "vetur.format.defaultFormatterOptions": { "prettier&q ...
- 记一次vscode升级后，格式化Vue出现的问题
一.VSCode中使用vetur插件格式化vue文件时,stylus代码会自动加上大括号.冒号和分号 本来就是简写比较方便舒服,结果一个格式化回到十年前 解决方案: vscode 文件 ->首 ...
- vue项目中vscode格式化配置和eslint配置冲突
问题描述 使用vscode开发vue项目的时候,从远端拉下一个新的项目后,安装完依赖后跑起项目时,发现直接报了一堆语法错误:包括换行.空格.单双引号.分号等各种格式问题 因为我的 vscode 安装使 ...
- vscode对Vue文件的html部分格式化失效问题解决办法
使用vscode编辑vue文件时发现突然格式化代码不会对<template> </template>之间的html生效了,解决办法很简单 文件 --> 首选项 ---&g ...
- 解决VSCode中使用vetur插件格式化vue文件时，js代码会自动加上冒号和分号
解决VSCode中使用vetur插件格式化vue文件时,js代码会自动加上冒号和分号 在设置中把"vetur.format.defaultFormatter.js": " ...
随机推荐
- Go语言学习索引
<Go并发编程实战>示例项目 项目地址: https://github.com/hyper-carrot/goc2p 项目安装: 用git clone获取项目,并将其根目录作为一个工作区. ...
- LIUNX-Centos 7 编译GDAL
一.准备工作 安装编译环境 sudo yum install gcc gcc-c++ gcc-g77 flex bison autoconf automake bzip2-devel zlib-dev ...
- JAVA设计模式---命令模式
1.定义: 将“请求”封装成对象,以便使用不同的请求.队列或者日志来参数化其他对象,命令模式也支持可撤销的操作.命令可以用来实现日志和事务系统. 2.实例: 1)需求:设计一个家电遥控器的API,遥控 ...
- CSS核心内容之浮动
1.浮动涉及到左浮动,右浮动,清除浮动． 2.浮点的特点: 1.向指定的方向浮动,并且让出空间 2.如果后面的元素也是浮动的,那么后面的元素就会在碰到前面的浮动的元素或者边框时,就定位在那里 3.如果 ...
- 关于css选择器的一些细节
1.如何区分一个html标签的不同样式 使用标签名.类名的方式解决 如果希望特别强调其中的某一个或几个元素,处理的方案有三个: 1.id选择器 2.class选择器 3.层级选择器 看下面的代码: & ...
- Mybatis异常There is no getter for property named 'XXX' in 'class com.xxx.xxx.UserAccountDTO
mybatis报错异常信息如下: 解决: 在接口中加上注解:@Param("userAccountDTO"),如图
- Swing EDT引起的客户端卡死
最近调试程序时发现,点击某个界面时会出现卡死的情况,出现的频率还是比较频繁的. 再次出现卡死的情况后,利用jvisualvm查看线程的运行情况,dump操作之后发现线程间出现了死锁: Found on ...
- 【转】如何解决plsql查询oracle数据库语句where条件带有中文无法匹配结果
一.问题描述 之前使用PLSQL查询oracle数据库可以正常查询统计结果,由于换了个电脑,重新安装之后,同样的sql查询语句同一个数据库,无法正常查询结果,如下图所示 二.解决办法 1. 查询数据当 ...
- Centos7搭建FTP服务器
从网上搜索了好多搭建Centos7搭建服务器的教程都没有成功唯独这个,利用Windows资源管理器连接测试成功. 一.通过yum安装vsftpd yum install -y vsftpd 二.修改v ...
- win10安装elementary os双系统
elementary os是ubuntu的一个分支,界面有点像苹果,比较漂亮.如图: 从已有的磁盘中划出一块空白分区,将elementary单独安装在这个分区里,这个分区需要比其他分区的剩余空间都要大 ...