网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

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

问题描述

成都创新互联是一家网站设计制作、成都网站制作,提供网页设计,网站设计,网站制作,建网站,按需定制网站,网站开发公司,从2013年成立是互联行业建设者,服务者。以提升客户品牌价值为核心业务,全程参与项目的网站策划设计制作,前端开发,后台程序制作以及后期项目运营并提出专业建议和思路。

之前用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单文件组件linterror自动fix与styleLint报错自动fix详解
网站链接:http://bjjierui.cn/article/ipheso.html

其他资讯