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函数
Jul 21 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 Javascript
js 判断checkbox是否选中的操作方法
Nov 09 Javascript
jQuery事件绑定.on()简要概述及应用
Feb 07 Javascript
js变换显示图片的实例
Apr 16 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
Dec 11 Javascript
使用Vue制作图片轮播组件思路详解
Mar 21 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 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扩展图文教程
2008/12/12 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
不常用但很实用的PHP预定义变量分析
2019/06/25 PHP
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
Javascript的闭包详解
2014/12/26 Javascript
jQuery知识点整理
2015/01/30 Javascript
jQuery插件expander实现图片翻转特效
2015/05/21 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
H5用户注册表单页 注册模态框!
2016/09/17 Javascript
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
2018/09/19 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
python3学生名片管理v2.0版
2018/11/29 Python
python3实现名片管理系统
2020/11/29 Python
django表单的Widgets使用详解
2019/07/22 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
Python缓存技术实现过程详解
2019/09/25 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
风险评估实施方案
2014/03/09 职场文书
设计师求职信模板
2014/05/06 职场文书
学前班学生评语
2014/12/29 职场文书
大学生暑假实习总结
2015/07/13 职场文书
初中化学教学反思
2016/02/22 职场文书
MySQL索引失效十种场景与优化方案
2023/05/08 MySQL