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 相关文章推荐
创建一个复制UBB软件信息的链接或按钮的js代码
Jan 06 Javascript
JavaScript的类型简单说明
Sep 03 Javascript
清除div下面的所有标签的方法
Feb 17 Javascript
Javascript字符串对象的常用方法简明版
Jun 26 Javascript
JavaScript导出Excel实例详解
Nov 25 Javascript
JavaScript计算两个日期时间段内日期的方法
Mar 16 Javascript
request请求获取参数的实现方法(post和get两种方式)
Sep 27 Javascript
BootStrap实现轮播图效果(收藏)
Dec 30 Javascript
canvas时钟效果
Feb 16 Javascript
浅谈Postman解决token传参的问题
Mar 31 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 Javascript
TypeScript的安装、使用、自动编译的实现
Apr 10 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/12/19 PHP
php中jQuery插件autocomplate的简单使用笔记
2012/06/14 PHP
PHP对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
PHP批量检测并去除文件BOM头代码实例
2014/05/08 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
smarty内置函数capture用法分析
2015/01/22 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
JavaScript 三种创建对象的方法
2009/10/16 Javascript
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
在javascript中执行任意html代码的方法示例解读
2013/12/25 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
react-native使用leanclound消息推送的方法
2018/08/06 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
2020/02/12 Javascript
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
Python装饰器用法示例小结
2018/02/11 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
python求质数列表的例子
2019/11/24 Python
Python values()与itervalues()的用法详解
2019/11/27 Python
如何使用Python抓取网页tag操作
2020/02/14 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
高考考python编程是真的吗
2020/07/20 Python
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
经贸日语专业个人求职信
2013/12/13 职场文书
优秀求职自荐信怎样写
2013/12/18 职场文书
大学毕业感言100字
2014/02/03 职场文书
开会迟到检讨书
2014/02/03 职场文书
新闻专业学生的自我评价
2014/02/13 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书
交通安全宣传标语(100条)
2019/08/22 职场文书