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 相关文章推荐
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 Javascript
动态加载js和css(外部文件)
Apr 17 Javascript
JS 退出系统并跳转到登录界面的实现代码
Jun 29 Javascript
jquery ajax,ashx,json的用法总结
Feb 12 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
Javascript中call,apply,bind方法的详解与总结
Dec 12 Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
详解Axios统一错误处理与后置
Sep 26 Javascript
ndm:NPM的桌面GUI应用程序
Oct 15 Javascript
微信小程序动态添加view组件的实例代码
May 23 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
Nov 01 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
深入PHP5中的魔术方法详解
2013/06/17 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
基于AGS JS开发自定义贴图图层
2017/03/31 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
微信小程序实现文字从右向左无限滚动
2020/11/18 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
在vue-cli创建的项目中使用sass操作
2020/08/10 Javascript
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
Pycharm远程调试openstack的方法
2017/11/21 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
Python根据成绩分析系统浅析
2019/02/11 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
儿科护理实习自我鉴定
2013/09/19 职场文书
室内设计专业毕业生求职信
2014/05/02 职场文书
2014年秋季开学典礼主持词
2014/08/02 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
避暑山庄导游词
2015/02/04 职场文书
旷工辞退通知书
2015/04/17 职场文书
农村老人去世追悼词
2015/06/23 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书
python数据处理之Pandas类型转换
2022/04/28 Python
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS