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 插件 人性化的消息显示
Jan 21 Javascript
用javascript判断IE版本号简单实用且向后兼容
Sep 11 Javascript
JavaScript伸缩的菜单简单示例
Dec 03 Javascript
jquery实现聚光灯效果的方法
Feb 06 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
jQuery组件easyui对话框实现代码
Aug 25 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
Taro集成Redux快速上手的方法示例
Jun 21 Javascript
Vue实现开心消消乐游戏算法
Oct 22 Javascript
JavaScript 对象创建的3种方法
Nov 17 Javascript
VUE递归树形实现多级列表
Jul 15 Vue.js
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
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
用js解决数字不能换行问题
2010/08/10 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
微信公众号 客服接口的开发实例详解
2016/09/28 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
2016/11/10 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
解析Python编程中的包结构
2015/10/25 Python
Python卸载模块的方法汇总
2016/06/07 Python
pygame实现弹力球及其变速效果
2017/07/03 Python
Python标准库之itertools库的使用方法
2017/09/07 Python
python 调用c语言函数的方法
2017/09/29 Python
python判断完全平方数的方法
2018/11/13 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
canvas像素画板的实现代码
2018/11/21 HTML / CSS
护理职业应聘自荐书
2013/09/29 职场文书
大学新生欢迎词
2014/01/10 职场文书
诚实守信演讲稿
2014/09/01 职场文书
超市督导岗位职责
2015/04/10 职场文书
2015年除四害工作总结
2015/07/23 职场文书
辞职信怎么写?
2019/05/21 职场文书
Oracle 死锁的检测查询及处理
2021/09/25 Oracle