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

 更新时间:2019-01-08 12:00:33   作者:佚名   我要评论(0)

问题描述


之前用Vue(多入口打包成多页)的项目,要修改迁移并修改为一个单页应用,且使用Vue脚手架生成项目,要对js,vue,css文件的代码做lint,在修改Webpack配

问题描述

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

总结

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

您可能感兴趣的文章:

  • Vuejs 单文件组件实例详解
  • vuejs 单文件组件.vue 文件的使用
  • 详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
  • 浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
  • Vue单文件组件的如何使用方式介绍
  • Vuejs实现带样式的单文件组件新方法
  • Vue单文件组件基础模板小结
  • 基于Vue单文件组件详解
  • 关于单文件组件.vue的使用
  • vue.js单文件组件中非父子组件的传值实例

相关文章

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

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

    问题描述 之前用Vue(多入口打包成多页)的项目,要修改迁移并修改为一个单页应用,且使用Vue脚手架生成项目,要对js,vue,css文件的代码做lint,在修改Webpack配
    2019-01-08
  • JavaScript学习笔记之DOM操作实例分析

    JavaScript学习笔记之DOM操作实例分析

    本文实例讲述了JavaScript学习笔记之DOM操作。分享给大家供大家参考,具体如下: 一、DOM概念 1. "D":Docment,指的是文档 2. “O”:Object,指的是对象,在
    2019-01-08
  • MySQL执行计划的深入分析

    MySQL执行计划的深入分析

    前言 在之前的面试过程中,问到执行计划,有很多童鞋不知道是什么?甚至将执行计划与执行时间认为是同一个概念。今天我们就一起来了解一下执行计划到底是什么
    2019-01-08
  • 对python mayavi三维绘图的实现详解

    对python mayavi三维绘图的实现详解

    网上下载mayavi的官方帮助文档,里面有很多例子,下面的记录都是查看手册后得到的。 http://code.enthought.com/projects/mayavi/docs/development/latex/may
    2019-01-08
  • 一个因@click.stop引发的bug的解决

    一个因@click.stop引发的bug的解决

    问题 在项目页面中使用 element popover,设置trigger='click'时点击外部不会触发自动隐藏,但在 element 官网中是可以正常触发的(官方示例),项目中的菜
    2019-01-08
  • 易语言模拟鼠标点击实现方法

    易语言模拟鼠标点击实现方法

    易语言对于初学者而言是一种非常好学的中文编程语言,能够快速地实现很多功能,全汉语编程,简单易上手,易语言功能强大实用,系统全部自行设计开发,且易语言
    2019-01-08
  • Django之模型层多表操作的实现

    Django之模型层多表操作的实现

    一、创建模型 1,一对多关系 一本书只有一个出版社,一个出版社可以出版多本书,从而书与出版社之间就构成一对多关系,书是‘多'的一方,出版社是‘一'的一方
    2019-01-08
  • 易语言统计重复数教学

    易语言统计重复数教学

    比如1 2 3 3 5 4 6 5 4 8 7 3 2这么多数字想取重复数据,并统计重复次数,可以用易语言编程来实现。 1、易语言新建程序 2、新建一个Windows窗口程序 3、如
    2019-01-08
  • 在python3中pyqt5和mayavi不兼容问题的解决方法

    在python3中pyqt5和mayavi不兼容问题的解决方法

    环境: win10 64bit & Linux Mint 18.2 WinPython3.6.1,spyder,qtconsole iep3.7 问题描述: 通过http://www.lfd.uci.edu/~gohlke/pythonlibs/#pyside下载may
    2019-01-08
  • JavaScript学习笔记之图片库案例分析

    JavaScript学习笔记之图片库案例分析

    本文实例讲述了JavaScript图片库。分享给大家供大家参考,具体如下: 一、一个javascript 图片库实例,下面是效果图 点击顶部导航,会在本页面进行刷新图片,
    2019-01-08

最新评论