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 相关文章推荐
IE6图片加载的一个BUG解决方法
Jul 13 Javascript
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
JS倒计时代码汇总
Nov 25 Javascript
JavaScript基本的输出和嵌入式写法教程
Oct 20 Javascript
JavaScript实现图片瀑布流和底部刷新
Jan 02 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 Javascript
ES6新特性之Object的变化分析
Mar 31 Javascript
js实现随机数字字母验证码
Jun 19 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
Oct 23 Javascript
JS运动特效之链式运动分析
Jan 24 Javascript
vue移动端实现下拉刷新
Apr 22 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 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
给ECShop添加最新评论
2015/01/07 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
深入理解PHP内核(一)
2015/11/10 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
jQuery总体架构的理解分析
2011/03/07 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
2011/10/27 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
分享一个插件实现水珠自动下落效果
2016/06/01 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
小程序实现发表评论功能
2018/07/06 Javascript
JS几个常用的函数和对象定义与用法示例
2020/01/15 Javascript
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
python 简易计算器程序,代码就几行
2009/08/29 Python
Python字符串匹配算法KMP实例
2015/07/18 Python
Python的条件语句与运算符优先级详解
2015/10/13 Python
Python使用email模块对邮件进行编码和解码的实例教程
2016/07/01 Python
Python中list初始化方法示例
2016/09/18 Python
书单|人生苦短,你还不用python!
2017/12/29 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
pytorch masked_fill报错的解决
2020/02/18 Python
HTML利用九宫格原理进行网页布局
2020/03/13 HTML / CSS
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
党章学习思想汇报
2014/01/14 职场文书
小学六年级学生评语
2014/04/22 职场文书
任命书格式
2014/06/05 职场文书
学校节能减排方案
2014/06/13 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
教师群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
先进个人材料怎么写
2014/12/30 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书
win10下go mod配置方式
2021/04/25 Golang
关于JavaScript 中 if包含逗号表达式
2021/11/27 Javascript
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android