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 相关文章推荐
JavaScript prototype对象的属性说明
Mar 13 Javascript
javascript 手动给表增加数据的小例子
Jul 10 Javascript
删除select中所有option选项jquery代码
Aug 12 Javascript
jQuery中closest()函数用法实例
Jan 07 Javascript
浅谈javascript的Touch事件
Sep 27 Javascript
详解JavaScript中|单竖杠运算符的使用方法
May 23 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
JavaScript获取短信验证码(周期性)
Dec 29 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 06 Javascript
Python版实现微信公众号扫码登陆
May 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
php 冒泡排序 交换排序法
2011/05/10 PHP
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
2010/09/28 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
往光标所在位置插入值的js代码
2013/09/22 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
Python实现简单字典树的方法
2016/04/29 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
Python绘制KS曲线的实现方法
2018/08/13 Python
python使用matplotlib画饼状图
2018/09/25 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
2019/02/15 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
python实现超级玛丽游戏
2020/03/18 Python
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
西尔斯百货官网:Sears
2016/09/06 全球购物
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
2014年教师节演讲稿
2014/09/03 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
Python 可迭代对象 iterable的具体使用
2021/08/07 Python
基于Python实现将列表数据生成折线图
2022/03/23 Python