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 组件命名那些事，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
这篇文章主要介绍了vue进入页面时不在顶部，检测滚动返回顶部按钮问题及解决方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-10-10
vue directive全局自定义指令实现按钮级别权限控制的操作方法
这篇文章主要介绍了vue directive全局自定义指令实现按钮级别权限控制,本文结合实例代码对基本概念做了详细讲解，需要的朋友可以参考下2023-02-02
使用setup的情况下这个时候我们无法使用this,注意在setup中setup是封闭的,不会将子组件事件暴露出来,所以要用defineExpose(),这篇文章主要介绍了vue3 setup访问子组件的 DOM 元素,需要的朋友可以参考下2023-08-08
这篇文章主要为大家详细介绍了vue3实现关键字高亮指令的相关资料,w文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下2023-11-11
这篇文章主要介绍了vue前端代码如何通过maven打成jar包运行问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要为大家介绍了vue使用Echarts画柱状图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-01-01
这篇文章主要介绍了vue中$refs的三种用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了在pycharm中开发vue的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要介绍了vue下的@change事件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
最新评论