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 的 prototype问题。
Jan 03 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
Apr 18 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 Javascript
JS中的eval 为什么加括号
Apr 13 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
Sep 19 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
AngularJS过滤器filter用法总结
Dec 13 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
Mar 01 Javascript
浅谈Vue2.0父子组件间事件派发机制
Jan 08 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
Apr 26 Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 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制作简单的内容采集器的代码
2007/11/28 PHP
destoon数据库表说明汇总
2014/07/15 PHP
php启用sphinx全文搜索的实现方法
2014/12/24 PHP
php绘制一个扇形的方法
2015/01/24 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
可以文本显示的公告栏的js代码
2007/03/11 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
javascript组合使用构造函数模式和原型模式实例
2015/06/04 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
JavaScript中object和Object的区别(详解)
2017/02/27 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
2020/07/18 Javascript
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
使用Python实现windows下的抓包与解析
2018/01/15 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
日本乐天德国站:Rakuten.de
2019/05/16 全球购物
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
告诉你怎样写创业计划书
2014/01/27 职场文书
《最大的“书”》教学反思
2014/02/14 职场文书
2015新员工试用期工作总结
2014/12/12 职场文书
入党现实表现材料
2014/12/23 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS
学会Python数据可视化必须尝试这7个库
2021/06/16 Python
Linux中各个目录的作用与内容
2022/06/28 Servers