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 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
怎么清空javascript数组
May 11 Javascript
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 Javascript
JavaScript cookie详解及简单实例应用
Dec 31 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
vue搜索和vue模糊搜索代码实例
May 07 Javascript
使用webpack将ES6转化ES5的实现方法
Oct 13 Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 Javascript
详解ES6 中的Object.assign()的用法实例代码
Jan 11 Javascript
javascript实现用户必须勾选协议实例讲解
Mar 24 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/06/25 PHP
php中用socket模拟http中post或者get提交数据的示例代码
2013/08/08 PHP
php实现邮件发送并带有附件
2014/01/24 PHP
javascript indexOf函数使用说明
2008/07/03 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
bootstrap实现每隔5秒自动轮播效果
2016/12/20 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
jQuery 操作 HTML 元素和属性的方法
2018/11/12 jQuery
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
原生js实现随机点名
2020/07/05 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
python中Genarator函数用法分析
2015/04/08 Python
使用python存储网页上的图片实例
2018/05/22 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
Python3网络爬虫中的requests高级用法详解
2019/06/18 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
HOTEL INFO英国:搜索全球酒店
2019/08/08 全球购物
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
中专生自荐信
2013/10/12 职场文书
老师给学生的表扬信
2014/01/17 职场文书
电子银行营销方案
2014/02/22 职场文书
年终工作总结范文2014
2014/11/27 职场文书
常住证明范本
2015/06/23 职场文书
公司团队口号霸气押韵
2015/12/24 职场文书
Windows Server 2019 配置远程控制以及管理方法
2022/04/28 Servers