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 相关文章推荐
2007/12/23更新创意无限,简单实用(javascript log)
Dec 24 Javascript
图片上传即时显示缩略图的js代码
May 27 Javascript
javascript showModalDialog 内跳转页面的问题
Nov 25 Javascript
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
浅谈Javascript中匀速运动的停止条件
Dec 19 Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 Javascript
让Vue也可以使用Redux的方法
May 23 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
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
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
input 和 textarea 输入框最大文字限制的jquery插件
2011/10/27 Javascript
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
jquery remove方法应用详解
2012/11/22 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
JavaScript对象反射用法实例
2015/04/17 Javascript
Javascript类型转换的规则实例解析
2016/02/23 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
2016/08/19 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
2017/01/11 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
2017/12/25 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
python内置函数:lambda、map、filter简单介绍
2017/11/16 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
详解python读取和输出到txt
2019/03/29 Python
python matplotlib 画dataframe的时间序列图实例
2019/11/20 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
python实现马丁策略的实例详解
2021/01/15 Python
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
戴尔英国官网:Dell英国
2017/05/27 全球购物
sort命令的作用和用法
2012/11/04 面试题
工厂厂长岗位职责
2013/11/08 职场文书
户外活动总结范文
2014/04/30 职场文书
小学毕业感言200字
2015/07/30 职场文书
2019年大学推荐信
2019/06/24 职场文书
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL
vite+vue3.0+ts+element-plus快速搭建项目的实现
2021/06/24 Vue.js
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python
Python 数据可视化之Matplotlib详解
2021/11/02 Python