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 相关文章推荐
input+select(multiple) 实现下拉框输入值
May 21 Javascript
jQuery div层的放大与缩小简单实现代码
Mar 28 Javascript
js取float型小数点后两位数的方法
Jan 18 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
JS实现5秒钟自动封锁div层的方法
Feb 20 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 Javascript
gulp教程_从入门到项目中快速上手使用方法
Sep 14 Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 Javascript
如何利用node转发请求详解
Sep 17 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的一些高级面向对象编程的特性
2015/11/27 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
Nginx实现反向代理
2017/09/20 Servers
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
js实现交通灯效果
2017/01/13 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
微信小程序url与token设置详解
2017/09/26 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
Python urlopen 使用小示例
2008/09/06 Python
Python脚本处理空格的方法
2016/08/08 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
如何使用 Python 读取文件和照片的创建日期
2020/09/05 Python
世界上最大的二手相机店:KEN
2017/05/17 全球购物
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
沃尔玛加拿大:Walmart.ca
2020/03/02 全球购物
本科毕业生自荐信
2014/05/26 职场文书
幼儿园秋季开学寄语
2014/08/02 职场文书
个人维稳承诺书
2015/05/04 职场文书
2015年度校学生会工作总结报告
2015/05/23 职场文书
法定代表人免职证明
2015/06/24 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
Python控制台输出俄罗斯方块的方法实例
2021/04/17 Python
nginx共享内存的机制详解
2022/03/21 Servers
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL