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 相关文章推荐
ExtJS TabPanel beforeremove beforeclose使用说明
Mar 31 Javascript
js实现的切换面板实例代码
Jun 17 Javascript
JavaScript中instanceof运算符的使用示例
Jun 08 Javascript
轻松掌握JavaScript代理模式
Aug 26 Javascript
js实现截图保存图片功能的代码示例
Feb 16 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
js上下视差滚动简单实现代码
Mar 07 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
Aug 16 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
Aug 28 Javascript
讲解vue-router之什么是嵌套路由
May 28 Javascript
微信小程序云开发使用方法新手初体验
May 16 Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 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连接mssql:pdo odbc sql server
2011/07/20 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
php数组中包含中文的排序方法
2014/06/03 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
JQuery select标签操作代码段
2010/05/16 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
JS中for循序中延迟加载动态效果的具体实现
2013/08/18 Javascript
使用原生js写的一个简单slider
2014/04/29 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
2015/08/22 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
React Native验证码倒计时工具类分享
2017/10/24 Javascript
Vue中使用sass实现换肤功能
2018/09/07 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场
2018/04/06 DOTA
Python 第一步 hello world
2009/09/25 Python
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
Python科学画图代码分享
2017/11/29 Python
python数字类型math库原理解析
2020/03/02 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
python绘制趋势图的示例
2020/09/17 Python
python利用platform模块获取系统信息
2020/10/09 Python
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
高二历史教学反思
2014/01/25 职场文书
大学学风建设方案
2014/05/04 职场文书
毕业生找工作求职信
2014/08/05 职场文书
三年级上册科学教学计划
2015/01/21 职场文书
文艺晚会开场白
2015/05/29 职场文书
2015年城乡环境综合治理工作总结
2015/07/24 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书