遇到的问题

使用vscode开发vue项目的时候，格式化vue文件，与自己配置的eslint标准会有冲突。

  • 引号问题：单引号变双引号
  • 分号问题：行末是否加分号。自动加/减分号
  • 当然还会有其他个性化冲突，只需要找到怎么修改，就好办了。

说明

vscode格式化文件，使用的是快捷键shift + alt + f

而我安装了vetur插件来格式化vue文件。

vetur插件默认使用的是prettier来格式化代码。

prettier官网

vetur文档格式化说明：

此时，如果要改变格式化风格，那么需要自定义prettier内容。

操作流程

  1. 安装Prettier-Code formatter插件地址
  2. 打开设置，并配置

在默认设置中找到`prettier.singleQuote`，并将其设置为true。单引号，设置为true；双引号，设置为false。

在默认设置中找到`prettier.semi`,并将其设置为false。末尾需要分号，设置为true；不需要分号，设置为false。

保存设置。之后，再去格式化，就能达到预期的效果。

[完]

解决vscode格式化vue文件出现的问题的更多相关文章

  1. VScode格式化vue文件

    使用vscode编写vue文件的时候, 发现不能格式化,手动格式化代码,太费劲, 还有可能会出错, 不格式化,有的时候代码编写的时候, 没有很好的管理格式,不美观. 但是我们是可以修改让VScode可 ...

  2. 解决VSCode中使用vetur插件格式化vue文件时，js代码会自动加上冒号和分号

    解决VSCode中使用vetur插件格式化vue文件时,js代码会自动加上冒号和分号 在设置中把"vetur.format.defaultFormatter.js": " ...

  3. vscode对Vue文件的html部分格式化失效问题解决办法

    使用vscode编辑vue文件时发现突然格式化代码不会对<template> </template>之间的html生效了,解决办法很简单 文件 --> 首选项 ---&g ...

  4. vscode格式化Vue出现的问题

    一.VSCode中使用vetur插件格式化vue文件时,js代码会自动加上冒号和分号 本来就是简写比较方便舒服,结果一个格式化回到解放前 最后找到问题原因: 首先,vetur默认设置是这个样的.也就是 ...

  5. vscode格式化Vue出现的问题：单引号变双引号 格式化去掉分号

    学习vue框架时,发现在使用vscode格式化vue代码时,出现单引号变成了双引号问题(导致和EsLint要求不一致),从而导致报错!!!!好坑啊!!! 解决方法如下 在文件根目录下创建 .prett ...

  6. VSCode新建vue文件自定义模板

    在一个Vue的项目中,反复的新建.vue文件是一个必不可少的工序.本着科技让人偷懒的原则,我们可以利用VSCode的snippet在.vue文件创建后能轻松地生成一套模板. 整个过程是轻松加愉快的,只 ...

  7. vscode添加vue文件模板

    文件->首选项->用户代码片段->输入vue,打开vue.json 添加模板json "Print to console": { "prefix&quo ...

  8. vue --- vscode 配置 .vue文件生成结构

    1.选择“文件 -> 首选项 -> 用户代码片段”,此时,会弹出一个搜索框,输入vue      选择vue后,编辑器会自动打开一个名字为vue.json的文件 2.复制以下内容到这个文件 ...

  9. vscode中使用beautify插件格式化vue文件

    1.点击设置,找到beautify.language并在html一栏里加上vue "beautify.language": { "js": { "ty ...

随机推荐

  1. WD与地图 解题报告

    WD与地图 哎,我好傻啊,看了题解还弄错了一遍,靠着lbw指点才董 题意:给一个带点权有向图,要求支持删边,查询一个scc前\(k\)大权值,修改点权,不强制在线. 显然倒序处理变成加边 考虑求出每条 ...

  2. [SMB share]Create SMB share under powershell / poweshell下创建本机的SMB共享

    New-SmbShare -Name share-name -Path C:\share -FolderEnumerationMode AccessBased -CachingMode Documen ...

  3. python@wraps实现原理

    @wraps作用 python中的装饰器装饰过的函数其实就不是函数本身了,我们可以看看下面的例子 import time def timmer(func): """tim ...

  4. Java 8 特性 —— 方法引用

    方法引用通过方法的名字来指向一个方法.方法引用可以使语言的构造更紧凑简洁,减少冗余代码.方法引用使用一对冒号 :: .下面,我们在 Car 类中定义了 4 个方法作为例子来区分 Java 中 4 种不 ...

  5. ddt运行测试方法时报错AttributeError: type object 'TestHttpRq' has no attribute 'test_http_rq_login'

    import unittest import ddt #装饰器 from ddt import ddt,data,unpack #导入ddt中的各个模块 from homework.unittest_ ...

  6. JS学习笔记Day23

    一.什么是Promise (一)Promise是ES6新增的解决异步(非阻塞)中存在的问题而产生的构造函数 二.Promise中的三种状态 pending(进行中) resoved(成功后) reje ...

  7. 最大似然估计与期望最大化（EM）算法

    一.最大似然估计与最大后验概率 1.概率与统计 概率与统计是两个不同的概念. 概率是指:模型参数已知,X未知,p(x1) ... p(xn) 都是对应的xi的概率 统计是指:模型参数未知,X已知,根据 ...

  8. NFV-based QoS provision for Software Defined Optical Access and residential networks

    文章名称:NFV-based QoS provision for Software Defined Optical Access and residential networks 发表时间:2017 ...

  9. DEV 控件使用之：TreeList

    使用DEV控件也有一段时间了,一直想写点东西.最近又使用到TreeList控件,这个控件对于刚使用的人来说确实不好掌握.我想把自己知道的写下来,让还不熟悉的慢慢学会使用,对于会使用的大家交流下.如果有 ...

  10. I/O模型系列之四：两种高性能IO设计模式 Reactor 和 Proactor

    不同的操作系统实现的io策略可能不一样,即使是同一个操作系统也可能存在多重io策略,常见如linux上的select,poll,epoll,面对这么多不同类型的io接口,这里需要一层抽象api来完成, ...