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).
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
您可能感兴趣的文章:
- 详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
- Vue单文件组件
- vue.js单文件组件中非父子组件的传值实例
- 详解vue2.0脚手架的webpack 配置文件分析
- vue 注册组件的使用详解
- vue综合组件间的通信详解
- 详解vue组件的is特性:限制元素&动态组件
- Linux-自动挂载文件/etc/fstab功能详解
- vue-cli配置文件详解
- Linux命令-自动挂载文件/etc/fstab功能详解[转]
- vue组件父子间通信详解(三)
- 用webpack2.0构建vue2.0单文件组件超级详细精简实例
- [Vue.js破浪]——单文件组件(一)
- vue开发实战2.0.1——vue配置文件详解
- vue父组件通过props如何向子组件传递方法详解
- 利用node.js实现自动生成前端项目组件的方法详解
- MyBatis之Mapper XML 文件详解-自动映射查询结果
- vue组件中使用props传递数据的实例详解
- vue组件详解(四)——使用slot分发内容
- Vue组件全局注册实现警告框的实例详解