脚本宝典收集整理的这篇文章主要介绍了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单文件组件lint error自动fix及styleLint报错自动fix全部内容，希望文章能够帮你解决vue单文件组件lint error自动fix及styleLint报错自动fix所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。