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 相关文章推荐
细品javascript 寻址,闭包,对象模型和相关问题
Apr 27 Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
Oct 26 Javascript
高效率JavaScript编写技巧整理
Aug 23 Javascript
jQuery中的$.ajax()方法应用
May 06 Javascript
PHP中使用微秒计算脚本执行时间例子
Nov 19 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
Mar 25 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
Apr 01 Javascript
JavaScript ES6中export、import与export default的用法和区别
Mar 14 Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 Javascript
JS实现横向轮播图(初级版)
Jun 24 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 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
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
2014/01/26 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
详解Node.js:events事件模块
2016/11/24 Javascript
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
2018/12/19 Javascript
vue组件之间的数据传递方法详解
2019/04/19 Javascript
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
Python中的getopt函数使用详解
2015/07/28 Python
Python实现堆排序的方法详解
2016/05/03 Python
python复制文件到指定目录的实例
2018/04/27 Python
Python使用tkinter模块实现推箱子游戏
2019/10/08 Python
python通过对字典的排序,对json字段进行排序的实例
2020/02/27 Python
使用python接受tgam的脑波数据实例
2020/04/09 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
高职教师岗位职责
2013/12/24 职场文书
应届毕业生简历自我评价
2014/01/31 职场文书
环境建设实施方案
2014/03/14 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
入团介绍人意见范文
2015/06/04 职场文书
垂直极限观后感
2015/06/08 职场文书
2016党校学习心得体会
2016/01/07 职场文书
MySQL如何构建数据表索引
2021/05/13 MySQL
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android
Java中的Kotlin 内部类原理
2022/06/16 Java/Android