vscode 格式化代码 与 eslint 有冲突的问题解决
项目中配置了eslint后,在使用vue界面里格式化的时候总是不一致。然后在配置中加了配置也无效(File - Preference - Setting)
查了下原因是在vue开发的时候我们一般都安装了Vetur的插件来对.vue格式的文件进行处理,Vetur自带了格式化,规范就是使用prettier
这时候装prettier插件,并且在设置或setting.json里配置了prettier的话是无效的
解决方法:在setting.json中加入下面的配置就可以了
{
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": false,
"singleQuote": true
},
"wrap_attributes": "force-aligned"
},
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatter.html": "js-beautify-html"
}

但是这个时候会发现vue文件是可以了,可以js文件还是无效,找到以下方法解决之:
1、安装prettier插件
npm install --save-dev prettier
2、在根目录新增 .prettierrc.json文件,配置如下:
{
"singleQuote":true,//使用单引号而不是双引号,true就是对
"semi":false//在语句结尾处打印分号,false就是不打印
}
亲测有效,直接Shift + Alt +F就可以美滋滋的格式化代码不会加上冒号和分号啦~
vscode 格式化代码 与 eslint 有冲突的问题解决的更多相关文章
- vue项目中vscode格式化配置和eslint配置冲突
问题描述 使用vscode开发vue项目的时候,从远端拉下一个新的项目后,安装完依赖后跑起项目时,发现直接报了一堆语法错误:包括换行.空格.单双引号.分号等各种格式问题 因为我的 vscode 安装使 ...
- vscode格式化代码插件Beautify
vscode格式化代码安装 VsCode 格式化代码插件搜索并安装 Beautify 格式化代码插件使用:打开要格式化的文件 —> F1 —> Beautify file —> 选择 ...
- VScode 格式化代码保存时使用ESlint修复代码
前言 eslint vs code 新买的电脑啊啊西 装VScode 配置格式化代码保存时使用ESlint修复代码头快炸了,不建议初学者用,太费时间了: 终于搞定---再也不要担心缩进,函数(名)和 ...
- vscode格式化代码无效--可能的解决方法
因为vscode默认启用了根据文件类型自动设置tabsize的选项,因此,可以通过关闭自动设置选项,防止格式覆盖.在用户设置里添加如下配置即可: "editor.detectIndentat ...
- vscode如何配置ts的lint,如何配置才能让eslint和prettier不冲突一键格式化代码(vue开发使用)
最近在使用ts,发觉tslint在vscode上使用很不方便,不如eslint一键格式化高效,就想着能不能配置下vscode让其像写js一样爽 这篇文章主要解决2个问题,第一个是如何让vscode使用 ...
- vscode保存代码,自动按照eslint规范格式化代码设置
# vscode保存代码,自动按照eslint规范格式化代码设置 编辑器代码风格一致,是前端代码规范的一部分.同一个项目,或者同一个小组,保持代码风格一致很必要.就拿vue项目来说,之前做的几个项目, ...
- vsCode 设置vue 保存自动格式化代码
setting { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tab ...
- VScode格式化ESlint
打开 文件-首选项- 设置 mac可以按快捷键(command和,) 然后在右上角的省略号选择open setting json { // vscode默认启用了根据文件类型自动设置tabsize的选 ...
- 03.ElementUI源码学习:代码风格检查和格式化配置(ESlint & Prettier)
书接上文.在团队协作中,为避免低级Bug.以及团队协作时不同代码风格对彼此造成的困扰与影响,会预先制定编码规范.使用 Lint工具和代码风格检测工具,则可以辅助编码规范执行,格式化代码,使样式与规则保 ...
随机推荐
- vue 点击修改样式
1.页面加载默认一个初始的isact,让第二个div.f具有一个on的类:在点击的时候,传入一个值给data.isact <template> <nav class="cl ...
- oracle管理角色和权限
介绍 这一部分主要看看oracle中如何管理权限和角色,权限和角色的区别在哪里. 当刚刚建立用户时,用户没有任何权限,也不能执行任何操作.如果要执行某种特定的数据库操作,则必需为其授予系统的权限:如果 ...
- windows10查看电脑已经保存的wifi密码
1,打开windows的命令窗口,输入 netsh wlan show profiles,如下图,这个命令仅仅只是查看一下电脑保存的所有的wifi名字 2,需要查看密码的话,则需要输入这个命令, ...
- 一个UI程序开始的代码函数导读
#import "QFAppDelegate.h" @implementation QFAppDelegate //最后一个执行的初始化函数 //主要做一些启动之前的初始化操作 - ...
- 学习构建调试Linux内核网络代码的环境MenuOS系统
构建调试Linux内核网络代码的环境MenuOS系统 一.前言 这是网络程序设计的第三次实验,主要是学习自己编译linux内核,构建一个具有简易功能的操作系统,同时在系统上面进行调试linux内核网络 ...
- Ubuntu18.04 配置Cups PDF虚拟打印机服务
更新 sudo apt update && sudo apt upgrade -y 安装cups pdf服务 sudo apt-get install cups-pdf -y 修改配置 ...
- dev gridcontrol简单的动态设置动态表头
1)使用BandedGridView控件(此处演示BandedGridView控件包含8个列)2)往BandedGridView控件里添加GridBand控件(此处演示添加了4个) 3)///设置添加 ...
- Base64编码原理及应用
最近在做一个H5上传图片并压缩的项目,其过程主要是先将图片上传通过readAsDataURL获取上传图片base64编码,然后根据高宽比将图片画到canvas上实现压缩,在通过toDataURL获取压 ...
- Maven pom.xml 全配置(二)不常用配置
Maven pom.xml 全配置(二)不常用配置 这里贴出Maven pom.xml文件中使用率较少的配置参数,如果此篇文档中没有找到你想要的参数,移步Maven pom.xml 全配置(一)常用配 ...
- Internet History,Technology,and Security - Technology: Internets and Packets (Week5)
Week5 Technology: Internets and Packets Welcome to Week 5! This week, we’ll be covering internets an ...