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

赞 (0)

相关推荐

  • Vue环境搭建+VSCode+Win10的详细教程

    一.安装Node.js(js的运行环境) 1.在Node.js官网https://nodejs.org/en/download/ 下载安装包. 2.下载后进行安装. 3.打开命令行,输入node -v可以查看到版本号.输入npm –v可看到npm版本号. 新版的Node.js已自带npm(类似.net中的nuget包管理器),安装Node.js时会一起安装.(将来要更新npm可用这个命令npm intall npm@latest -g) 4.在我的win10系统中可以看到环境变量也已经自动配置好

  • 详解VSCode配置启动Vue项目

    详解VSCode配置启动Vue项目

    下载安装并配置VSCode 随便百度上搜个最新的VSCode安装好后,点击Ctrl + Shit + X打开插件扩展窗口进行插件扩展,这里要安装两个插件. 1.vetur插件的安装 该插件是vue文件基本语法的高亮插件,在插件窗口中输入vetur点击安装插件就行,装好后点击文件->首选项->设置 打开设置界面,在设置界面右侧添加配置 "emmet.syntaxProfiles": { "vue-html": "html", "

  • 在vscode中统一vue编码风格的方法

    vetur 很多人知道,但在 vscode 下没办法格式化 .vue 里的 html, js 很是头疼,代码风格无法统一. 所以不少人直接拆分开,然后在 .vue 中引入,虽然方法很好,但这有违 .vue 单文件组件的初衷. 本文详细介绍 vscode 下使用 vetur + prettier + eslint 来统一 vue 编码风格. vetur 插件 vetur 经过多个版本迭代,算是目前 vscode 下最好用的 vue 插件了,甚至支持 ts, webpack alias 等特性. 但

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

    在使用vscode开发vue项目时,严格检查让人有点烦恼,必然需要一款可以自动格式化的插件进行快速严格检查的格式化.vscode插件会推荐使用 vetur 插件才会进行vue文件的识别与高亮. 安装完 vetur 后确实是可以对 vue文件进行高亮显示了,但是当你按下 shift+alt+f 进行格式化时,发现本来没有错误的代码却变成了一堆错误,莫名加上了分号,单引号也成功变成双引号了.在vue的严格检查中这些是最烦的. 那么需要对vscode的配置文件进行配置才可支持vue正确格式化. 打开

  • vscode 配置vue+vetur+eslint+prettier自动格式化功能

    该配置用于vue开发,最终效果是保存时自动根据eslint对js.html和css代码进行格式化. vscode Vetur插件 Vetur插件用于识别vue文件,原本vetur自带格式化功能,但是和eslint会有冲突,所以没用上. vscode ESlint插件 Eslint插件用于根据工程目录的.eslintrc.js配置文件在编辑器中显示一些错误提示,后面的自定格式化根据这里的错误提示进行格式化操作. 基于vue-cli创建的项目 以下相关步骤需要注意: 创建的时候把Linter/For

  • 详解VScode自动补全CSS3前缀插件以及配置无效的解决办法

    1.在vscode中搜索Autoprofixer 2.在安装完成之后要配置 在需要添加前缀的css文件上,右键点击命令面板,输入Autoprefixer CSS就好啦 ps: 如果想要兼容性最好的话,需要在设置配置文件setting.json里加上 (打开设置->搜索autoprefixer->点击在setting.json里编辑) //这是比较完整的兼容配置,可以根据自己的情况有选择的复制![在这里插入图片描述](https://img-blog.csdnimg.cn/20200322110

  • 解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题

    问题 在做银行卡输入框时有一个需求如题,这里举例用-隔断 调查 查看了很多大公司网站的银行卡输入,发现还有有很多缺陷的:  有的是在中间删除,光标会跳到最后:  有的是能删除掉中间隔断符的:  等等,逻辑感觉比较混乱,或者是我不懂他们的高深设计吧. 只有支付宝的设计感觉是比较合理的,改变了只有输入框的固有方案,放图: 上面出现的显示框不可修改,能清晰看出四位隔断的格式. 不过为了实现自己项目只有一个卡号输入框的需求,只能硬着头皮研究了. 解决 将下面的方法稍作修改绑在输入框的input方法上就o

  • VSCode插件开发全攻略之跳转到定义、自动补全、悬停提示功能

    跳转到定义 跳转到定义其实很简单,通过vscode.languages.registerDefinitionProvider注册一个provider,这个provider如果返回了new vscode.Location()就表示当前光标所在单词支持跳转,并且跳转到对应location. 为了示例更加有意义,我在这里写了一个支持package.json中dependencies.devDependencies跳转到对应依赖包的例子jump-to-definition.js(当然我们这里只是很简单的

  • 关于VSCode格式化JS自动添加或去掉分号的问题

    关于VSCode格式化JS自动添加或去掉分号的问题

    引言 js代码句尾的分号加不加都可以,一般团队开发时需要统一规范,要么都加分号,要么都不加分号 但是有些时候我们能想起来加分号,有的时候想不起来加,这样就会导致我们的代码有的有分号有的没有,就会比较乱 为了解决这个问题,我们可以使用格式化程序来帮助我们自动添加或去掉句尾分号 具体操作方法 先随便敲点js代码,一会用来看效果 如果你下了很多插件,有一堆的js格式化程序,那么你需要配置一下默认使用的格式化程序 选择配置默认格式化程序 选择这个VSCode自带的js格式化程序 打开设置 打开设置的js

  • 解决vscode Better Comments插件在vue文件中不显示相对应的颜色的问题

    最近使用了Better Comments这款插件,发现在ts文件中可以显示对应的颜色,但在vue文件中并不显示对应颜色 解决方法如下: 1.打开插件的配置文件夹,即 c盘 -> 用户 -> 用户名 -> .vscode文件夹 2.extensions目录 -> bttter-comments配置文件夹 3.打开配置文件aaron-bond.better-comments-3.0.2 -> out -> parser.js 4.修改配置文件,添加如下代码 case &qu

  • 使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法

    根据网上查找到的 typeahead使用方法,到最后一步时就出错,数据能从数据库读取出来,但在输入框显示提示时,全都显为:underfined.捉摸了半天都发现不了问题出在哪儿.后来在http://blog.64cm.com/post/2014/08/13/%E4%BD%BF%E7%94%A8bootstrap-typeahead%E6%8F%92%E4%BB%B6 上不经意发现这么一句话:"在当前版本的typeahead中,已经不再支持在source属性中直接调用ajax方法获取数据源了.&q

  • 解决python中无法自动补全代码的问题

    自已理解自我总结出来的方法,供自己以后使用 #coding:utf-8 from cv2 import * #这里表示让cv2的智能提示功能可用,但是这句话却没有导入cv2模块,不知道什么原因 import tensorflow as tf import tensorflow.contrib as contrib #这句话表示让contrib的代码自动补全功能可用,不知道为啥,比如输入contrib.等一会后面就会自动提示出现很多方法,但是输入tensorflow.contrib.却没有任何反应

  • 解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)

    发现问题 当我用pip安装好opencv-pyton后,我激动得在python项目中导入cv2 就像这样: import cv2 as cv but- 码代码时竟然没有自动补全!!!这我还能忍,可是CTRL+左键竟然不能看源码!!!!!!就像这样: 这我就受不了了.于是开始找解决方法 解决问题 查找解决方法, 有的说要将cv2.cp36-win_amd64.pyd文件挪到site-packages下: 有的说要修改_init_.py文件 有的说- 直到我看到https://segmentfaul

随机推荐