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 相关文章推荐
浅析LigerUi开发中谨慎载入common.css文件
Jul 09 Javascript
jQuery异步验证用户名是否存在示例代码
May 21 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
Oct 09 Javascript
JavaScript中数组继承的简单示例
Jul 29 Javascript
jQuery实现下拉框选择图片功能实例
Aug 08 Javascript
用JavaScript和jQuery实现瀑布流
Mar 19 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
Vue中的字符串模板的使用
May 17 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 Javascript
JavaScript Reflect Metadata实现详解
Dec 12 Javascript
JS代码实现页面切换效果
Jan 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
SONY SRF-40W电路分析
2021/03/02 无线电
php Static关键字实用方法
2010/06/04 PHP
php处理json时中文问题的解决方法
2011/04/12 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
php语法检查的方法总结
2019/01/21 PHP
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
跟我学习javascript的循环
2015/11/18 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
2017/11/26 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
pycharm安装图文教程
2017/05/02 Python
Python matplotlib画图实例之绘制拥有彩条的图表
2017/12/28 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
使用浏览器访问python写的服务器程序
2019/10/10 Python
python输出数学符号实例
2020/05/11 Python
python requests库的使用
2021/01/06 Python
python爬虫爬取某网站视频的示例代码
2021/02/20 Python
纯CSS3实现圆角效果(含IE兼容解决方法)
2014/05/07 HTML / CSS
巴西男士个人护理产品商店:SHOP4MEN
2017/08/07 全球购物
现代家居用品及礼品:LBC Modern
2018/06/24 全球购物
军训 自我鉴定
2014/02/03 职场文书
义和团口号
2014/06/17 职场文书
2014年实验室工作总结
2014/12/03 职场文书
2015学校六五普法工作总结
2015/04/22 职场文书
安全主题班会教案
2015/08/12 职场文书
nginx配置指令之server_name的具体使用
2022/08/14 Servers