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 版
Mar 24 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
在ASP.NET中使用JavaScript脚本的方法
Nov 12 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
Jan 26 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
js中的面向对象入门
Mar 06 Javascript
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 Javascript
vue.js项目nginx部署教程
Apr 05 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
Apr 17 Javascript
微信小程序之 catalog 切换实现解析
Sep 12 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 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生成随机用户名和密码的实现代码
2013/02/27 PHP
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
xmlhttp缓存清除的2种解决方法
2013/12/13 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
JS实现FLASH幻灯片图片切换效果的方法
2015/03/04 Javascript
jQuery处理图片加载失败的常用方法
2015/06/08 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
2019/04/28 jQuery
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
Layui数据表格跳转到指定页的实现方法
2019/09/05 Javascript
Python实现子类调用父类的方法
2014/11/10 Python
解读Python中degrees()方法的使用
2015/05/18 Python
Python字符串格式化
2015/06/15 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
python re模块的高级用法详解
2018/06/06 Python
浅谈Python 多进程默认不能共享全局变量的问题
2019/01/11 Python
Python使用numpy模块实现矩阵和列表的连接操作方法
2019/06/26 Python
Django分页功能的实现代码详解
2019/07/29 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
Python接口测试文件上传实例解析
2020/05/22 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
python中return不返回值的问题解析
2020/07/22 Python
python 使用tkinter+you-get实现视频下载器
2020/11/17 Python
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
德国狗狗用品在线商店:Schecker
2017/03/17 全球购物
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
关于廉洁的广播稿
2014/01/30 职场文书
学前班学生评语
2014/12/29 职场文书
婚庆主持词大全
2015/06/30 职场文书
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android
Mysql表数据比较大情况下修改添加字段的方法实例
2022/06/28 MySQL