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 相关文章推荐
禁止F5等快捷键的JS代码
Mar 06 Javascript
JavaScript获得选中文本内容的方法
Dec 02 Javascript
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 Javascript
JS链式调用的实现方法
Mar 07 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
Feb 16 Javascript
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
vue2中的keep-alive使用总结及注意事项
Dec 21 Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 Javascript
JavaScript this指向相关原理及实例解析
Jul 10 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 Javascript
通过实例解析js可枚举属性与不可枚举属性
Dec 02 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中多维数组按指定value排序的实现代码
2014/08/19 PHP
关于PHP开发的9条建议
2015/07/27 PHP
PHP实现二维数组按某列进行排序的方法
2016/11/18 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
详解使用php-cs-fixer格式化代码
2020/09/16 PHP
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
requireJS使用指南
2016/04/27 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
2016/07/12 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
JavaScript的六种继承方式(推荐)
2017/06/26 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
Django中URLconf和include()的协同工作方法
2015/07/20 Python
python实现的AES双向对称加密解密与用法分析
2017/05/02 Python
Python实现网站注册验证码生成类
2017/06/08 Python
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
python之django母板页面的使用
2018/07/03 Python
python由已知数组快速生成新数组的方法
2020/04/08 Python
jupyter实现重新加载模块
2020/04/16 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
深入CSS3 动画效果的总结详解
2013/05/09 HTML / CSS
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
工商技校毕业生自荐信
2013/11/15 职场文书
问卷调查计划书
2014/01/10 职场文书
销售内勤岗位职责
2014/04/15 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
学生自我评语
2015/01/04 职场文书
专项资金申请报告
2015/05/15 职场文书
初中军训感言
2015/08/01 职场文书