vscode中eslint插件的配置(prettier配置无效)


Posted in Javascript onSeptember 10, 2019

用vue-cli构建vue项目,会有个eslint代码检测的安装

可vscode自带代码格式化是prettier格式(右键有格式化文件或alt+shift+f)

这时候要在vscode上装一个eslint插件

vscode中eslint插件的配置(prettier配置无效)

装完后在文件-----》首选项-------》设置里找到settings.json(快捷键忘了)

vscode中eslint插件的配置(prettier配置无效)

eslint配置如下,(配置的·具体详情还有待研究,我也是网上copy的,不过亲测可用)。保存配置后每次写.vue文件只要control+s保存,就可以把代码格式改成符合eslint标准

"eslint.autoFixOnSave": true,
// 专门写Vue的eslint配置
"eslint.validate": [
 "javascript",
 "javascriptreact",
 { "language": "html", "autoFix": true },
 { "language": "vue", "autoFix": true }
]

-------------------------------------------------------------分割线---------------------------------------------------------------

在写vue的时候很多人会选择prettier+eslint来规范代码格式

这时候有些人就很奇怪,我明明在setting.json里配置了prettier的格式化规范,怎么就不生效呢

其实用vscode做vue开发的时候都会安装一个Vetur的插件来对.vue格式的文件进行处理,Vetur自带了格式化,规范就是使用prettier

如果你有装prettier插件,并且在设置或setting.json里配置了prettier的话是无效的

vscode中eslint插件的配置(prettier配置无效)

vscode中eslint插件的配置(prettier配置无效)

如上图,在设置勾选后配置后就会在setting.json里生成对应配置代码,不过由于Vetur的存在,此时的prettier其实并未起作用(可能是优先级问题吧,我也不清楚)

正确配置看下图和Vetur官方文档

官网链接

vscode中eslint插件的配置(prettier配置无效)

所以说有两种方法配置,一种是在根目录下写一个.prettier文件,文件里的内容可以参考网上其它文章。另一种就是如上图所示,在setting.json里配置

vscode中eslint插件的配置(prettier配置无效)

------------------------------------------------------------------------------分割线---------------------------------------------------

eslint也是能格式化的,只是有局限性,所以要prettier来配合

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
写出更好的JavaScript之undefined篇(上)
Nov 22 Javascript
js解析与序列化json数据(二)序列化探讨
Feb 01 Javascript
JavaScript中toString()方法的使用详解
Jun 05 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 Javascript
jQuery实现全选、反选和不选功能
Aug 16 jQuery
Vue组件中slot的用法
Jan 30 Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 Javascript
Angular6 写一个简单的Select组件示例
Aug 20 Javascript
解决vue点击控制单个样式的问题
Sep 05 Javascript
vue elementUI table 自定义表头和行合并的实例代码
May 22 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 Javascript
layer.open回调获取弹出层参数的实现方法
Sep 10 #Javascript
VScode格式化ESlint方法(最全最好用方法)
Sep 10 #Javascript
npm 语义版本控制详解
Sep 10 #Javascript
解决layui的input独占一行的问题
Sep 10 #Javascript
解决layer.open弹出框不能获取input框的值为空的问题
Sep 10 #Javascript
防止Layui form表单重复提交的实现方法
Sep 10 #Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 #Javascript
You might like
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
详解在PHP的Yii框架中使用行为Behaviors的方法
2016/03/18 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
php时间戳转换代码详解
2019/08/04 PHP
Egret引擎开发指南之发布项目
2014/09/03 Javascript
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
ES6中Array.find()和findIndex()函数的用法详解
2017/09/16 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
vue动态子组件的两种实现方式
2019/09/01 Javascript
浅谈layui 表单元素的选中问题
2019/10/25 Javascript
[01:01:36]Optic vs paiN 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
详细介绍Python函数中的默认参数
2015/03/30 Python
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
如何使用Python自动控制windows桌面
2019/07/11 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
Zavvi美国:英国娱乐之家
2017/03/19 全球购物
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
啤酒销售实习自我鉴定
2013/09/24 职场文书
公关关系专员的自我评价分享
2013/11/20 职场文书
消防器材管理制度
2014/01/28 职场文书
出国英文推荐信
2014/05/10 职场文书
电子专业毕业生自荐信
2014/05/25 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
python代码实现备忘录案例讲解
2021/07/26 Python
MySQL中连接查询和子查询的问题
2021/09/04 MySQL
利用Java连接Hadoop进行编程
2022/06/28 Java/Android