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 相关文章推荐
JQuery里选择超链接的实现代码
May 22 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
Sep 05 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
Mar 14 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
Apr 26 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
May 10 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
JavaScript简单生成 N~M 之间随机数的方法
Jan 13 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
JavaScript实现放大镜效果代码示例
Apr 29 Javascript
jQuery实现的分页插件完整示例
May 26 jQuery
JS指定音频audio在某个时间点进行播放
Nov 28 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
php中获取关键词及所属来源搜索引擎名称的代码
2011/02/15 PHP
php单文件版在线代码编辑器
2015/03/12 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
PDO::_construct讲解
2019/01/27 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
js实现的折叠导航示例
2013/11/29 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
JS获取各种宽度、高度的简单介绍
2014/12/19 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
JavaScript利用HTML DOM进行文档操作的方法
2016/03/28 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
jQuery 查找元素操作实例小结
2019/10/02 jQuery
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
python字符串排序方法
2014/08/29 Python
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
python手写均值滤波
2020/02/19 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
美国存储和组织商店:The Container Store
2017/08/16 全球购物
优秀学生干部个人的自我评价
2013/10/04 职场文书
八年级美术教学反思
2014/02/02 职场文书
青春寄语大全
2014/04/09 职场文书
师德演讲稿范文
2014/05/06 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
2014年应急工作总结
2014/12/11 职场文书
孝女彩金观后感
2015/06/10 职场文书
springboot如何接收application/x-www-form-urlencoded类型的请求
2021/11/02 Java/Android
Spring Boot实现文件上传下载
2022/08/14 Java/Android