vue单文件组件lint error自动fix与styleLint报错自动fix详解


Posted in Javascript onJanuary 08, 2019

问题描述

之前用Vue(多入口打包成多页)的项目,要修改迁移并修改为一个单页应用,且使用Vue脚手架生成项目,要对js,vue,css文件的代码做lint,在修改Webpack配置后第一次跑lint居然报了几万个Error,且是在eslint加了--fix选项的情况下,且错误大多集中在顺序问题上也就是vue/order-in-components和order/properties-order的错误.以下是问题的解决方式及过程记录.

stylelint中css属性顺序错误

.stylelint的配置

// .stylelint
{ 
 "processors": ["@mapbox/stylelint-processor-arbitrary-tags"],
 "plugins": [
 "stylelint-order",
 "stylelint-scss"
 ],
 "extends": ["css-properties-sorting"],
 "rules": {
 "order/order": [
  "custom-properties",
  "declarations"
 ],
 "color-no-invalid-hex": true,
 "unit-no-unknown": true,
 "property-no-unknown": true,
 "selector-pseudo-class-no-unknown": true,
 "selector-pseudo-element-no-unknown": true,
 "comment-no-empty": true,
 "number-leading-zero": "always",
 "number-no-trailing-zeros": true,
 "declaration-colon-space-after": "always",
 "declaration-colon-space-before": "never"
 }
}

在stylelint中加上--fix选项后,自动修复会把Vue文件中所有内容都移除掉,只剩css代码

首先在stylelint的issue中发现了这样的一个issue,基本现象一样,问题是出现在配置中的processors项

移除配置中的processors后,发现stylelint检测了各种文件(包括js/png等),执行lint的命令为: stylelint **/*.{vue,css,scss} --fix

添加.stylelintignore文件,里面忽略不用lint的文件后缀,最后完美解决css(包括scss/vue文件style标签)中属性顺序错误自动修复问题

// .stylelintignore
*.js
*.png
*.eot
*.ttf
*.woff

eslint时vue文件中属性顺序错误

eslint-plugin-vue版本: 4.0.0

.eslintrc.js配置文件

module.exports = {
 root: true,
 parserOptions: {
 parser: 'babel-eslint'
 },
 env: {
 browser: true
 },
 extends: [
 'plugin:vue/recommended',
 'standard'
 ],
 plugins: ['vue'],
 rules: {
 'generator-star-spacing': 'off',
 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
 'semi': 0,
 'indent': 0,
 'no-unused-vars': 0
 }
};

首先在eslint-plugin-vue的文档中发现vue/order-in-componentsrule是支持自动修复的,然后去翻看了issue,发现这个issue中提到这个error不能自动修复的问题已经提了PR且merge了,于是果断更新eslint-plugin-vue到最新版本(4.3.0)完美解决问题(ps:升级后又出现了个vue/attributes-order的错误,且文档说不能自动修复,于是果断ignore).

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js 提交和设置表单的值
Dec 19 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
JavaScript通过正则表达式实现表单验证电话号码
Mar 07 Javascript
js实现div弹出层的方法
Nov 20 Javascript
一张Web前端的思维导图分享
Jul 03 Javascript
详解Jquery实现ready和bind事件
Apr 14 Javascript
javascript执行环境及作用域详解
May 05 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
Axios取消重复请求的方法实例详解
Jun 15 Javascript
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 #Javascript
小试SVG之新手小白入门教程
Jan 08 #Javascript
vue组件通信传值操作示例
Jan 08 #Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
Jan 08 #Javascript
vuejs简单验证码功能完整示例
Jan 08 #Javascript
详解React中合并单元格的正确写法
Jan 08 #Javascript
JS简单判断是否在微信浏览器打开的方法示例
Jan 08 #Javascript
You might like
PHP安装攻略:常见问题解答(一)
2006/10/09 PHP
php多个字符串替换成同一个的解决方法
2013/06/18 PHP
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
JS上传前预览图片实例
2013/03/25 Javascript
在ASP.NET中使用JavaScript脚本的方法
2013/11/12 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
2015/09/01 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
学习vue.js计算属性
2016/12/03 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
Layui给switch添加响应事件的例子
2019/09/03 Javascript
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python简单生成8位随机密码的方法
2017/05/24 Python
详解Python文本操作相关模块
2017/06/22 Python
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
pycharm通过ssh连接远程服务器教程
2020/02/12 Python
python报错TypeError: ‘NoneType‘ object is not subscriptable的解决方法
2020/11/05 Python
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
J2EE是技术还是平台还是框架
2016/08/14 面试题
证券期货行业个人的自我评价
2013/12/26 职场文书
银行学习十八大感想
2014/01/11 职场文书
三年级语文教学反思
2014/02/01 职场文书
党员干部2014全国两会学习心得体会
2014/03/10 职场文书
机关节能减排实施方案
2014/03/17 职场文书
小学运动会口号
2014/06/07 职场文书
主题团日活动总结
2014/06/25 职场文书
八年级英语教学反思
2016/02/15 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP
Python中三种花式打印的示例详解
2022/03/19 Python