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 autocomplete 使用手册
Apr 01 Javascript
js正文内容高亮效果的实现方法
Jun 30 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
javascript 继承学习心得总结
Mar 17 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
javaScript嗅探执行神器-sniffer.js
Feb 14 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
May 17 Javascript
使用async await 封装 axios的方法
Jul 09 Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
Jun 02 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
Aug 24 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 中的批处理的实现
2007/06/14 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
Windows2003下php5.4安装配置教程(IIS)
2016/06/30 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
2018/10/15 PHP
Laravel 框架控制器 Controller原理与用法实例分析
2020/04/14 PHP
用 Javascript 验证表单(form)中多选框(checkbox)值
2009/09/08 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
2015/11/30 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
python使用百度翻译进行中翻英示例
2014/04/14 Python
python中hashlib模块用法示例
2017/10/30 Python
python读取几个G的csv文件方法
2019/01/07 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
在tensorflow中设置保存checkpoint的最大数量实例
2020/01/21 Python
加拿大最大的书店:Indigo
2017/01/01 全球购物
I.T中国官网:精选时尚设计师单品网购平台
2018/03/26 全球购物
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
药学专业大学生自荐信
2013/09/28 职场文书
产品质量承诺书
2014/03/27 职场文书
放飞中国梦演讲稿
2014/04/23 职场文书
锦旗标语大全
2014/06/23 职场文书
委托书如何写
2014/08/30 职场文书
黄石寨导游词
2015/02/05 职场文书
辞职信的写法
2015/02/27 职场文书
财务会计求职信范文
2015/03/20 职场文书