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贪吃蛇完整版(源码)
Dec 09 Javascript
js统计页面的来访次数实现代码
May 09 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
JavaScript极简入门教程(三):数组
Oct 25 Javascript
angularjs中ng-attr的用法详解
Dec 31 Javascript
判断横屏竖屏(三种)
Feb 13 Javascript
vue如何在自定义组件中使用v-model
May 14 Javascript
Angular通过指令动态添加组件问题
Jul 09 Javascript
VUE基于NUXT的SSR 服务端渲染
Nov 30 Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
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_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
PHP邮箱验证示例教程
2016/06/01 PHP
php获取ip及网址的简单方法(必看)
2017/04/01 PHP
Javascript下的keyCode键码值表
2007/04/10 Javascript
Add Formatted Text to a Word Document
2007/06/15 Javascript
JavaScript 页面坐标相关知识整理
2010/01/09 Javascript
jquery 学习之二 属性相关
2010/11/23 Javascript
js二级地域选择的实现方法
2013/06/17 Javascript
javascript实现可拖动变色并关闭层窗口实例
2015/05/15 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
解决vue build打包之后首页白屏的问题
2018/03/06 Javascript
微信小程序实现刷脸登录
2018/05/25 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
layui 实现自动选择radio单选框(checked)的方法
2019/09/03 Javascript
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
Python中为什么要用self探讨
2015/04/14 Python
Python使用剪切板的方法
2017/06/06 Python
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
Python基于opencv实现的简单画板功能示例
2019/03/04 Python
python实现名片管理系统项目
2019/04/26 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
python 动态绘制爱心的示例
2020/09/27 Python
基于Python实现全自动下载抖音视频
2020/11/06 Python
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
情人节寄语大全
2014/04/11 职场文书
灰雀教学反思
2014/04/28 职场文书
优秀家长自荐材料
2014/08/26 职场文书
2014年护士工作总结范文
2014/11/11 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技