vue单文件组件lint error自动fix与styleLint报错自动fix详解

 更新时间:2019年01月08日 11:07:37   作者:Leo_  
这篇文章主要给大家介绍了关于vue单文件组件lint error自动fix与styleLint报错自动fix的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

问题描述

之前用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).

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

相关文章

  • Vue 项目性能优化方案分享

    Vue 项目性能优化方案分享

    本文是作者通过实际项目的优化实践进行总结而来,希望读者读完本文,有一定的启发思考,从而对自己的项目进行优化起到帮助
    2022-08-08
  • vue实现移动端拖动排序

    vue实现移动端拖动排序

    这篇文章主要为大家详细介绍了vue实现移动端拖动排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • Vue下拉选择框Select组件使用详解(一)

    Vue下拉选择框Select组件使用详解(一)

    这篇文章主要为大家详细介绍了Vue下拉选择框Select组件的使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue3 中 computed 新用法示例小结

    vue3 中 computed 新用法示例小结

    这篇文章主要介绍 vue3 中 computed 的新用法,对比 vue2 中的写法,让您快速掌握 vue3 中 computed 的新用法,对函数式写法,options 写法相关知识感兴趣的朋友一起看看吧
    2021-11-11
  • Element UI Upload 组件上传图片可删除、预览功能

    Element UI Upload 组件上传图片可删除、预览功能

    这篇文章主要介绍了Element UI Upload 组件 上传图片可删除、预览,设置只允许上传单张 / 多张图片的操作,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • vue.js使用Element-ui实现导航菜单

    vue.js使用Element-ui实现导航菜单

    这篇文章主要为大家详细介绍了vue.js使用Element-ui中实现导航菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • element-ui 本地化使用教程详解

    element-ui 本地化使用教程详解

    这篇文章主要介绍了element-ui 本地化使用教程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • vue3.0 子组件如何修改父组件传递过来的值

    vue3.0 子组件如何修改父组件传递过来的值

    这篇文章主要介绍了vue3.0 子组件如何修改父组件传递过来的值,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue实现文本编译详情

    Vue实现文本编译详情

    这篇文章主要介绍了Vue实现文本编译详情,文章围绕主题展开详细的内容介绍,具有一定的参考价值,感兴趣的小伙伴可以参考一下,希望对你的学习有所帮助
    2022-08-08
  • 解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)

    解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)

    这篇文章主要介绍了解决vue.js中settimeout遇到的问题(时间参数短效果不稳定),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07

最新评论