lioil
lioil
  • 发布:2019-08-26 14:36
  • 更新:2020-04-13 11:26
  • 阅读:1537

【报Bug】ESLint一键修复存在问题,不懂怎么修改?

分类:HBuilderX

详细问题描述

(DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题)

[内容]
HBuilderX 的 2.2.3.20190822-alpha 版本上线了ESLint一键修复功能。用起来很爽。
但是存在的问题就是,ESLint是可以修复vue文件中的JS代码中存在的不规范问题。
但是vue文件中的template文件和style文件无法修复。
总是提示如下问题。手动修改的话很崩溃。
看了论坛上面没有类似的问题。特来提问。

重现步骤

如下图

[步骤]

[结果]

[期望]

[如果语言难以表述清晰,拍一个视频或截图,有图有真相]

IDE运行环境说明

HBuilderX

[IDE版本号]
2.2.3.20190822-alpha

[项目是cli创建的还是HBuilderX创建的?如果是cli创建的,请更新到最新版cli再试]
cli

[可重现代码片段]

<template>  
    <div v-if="showPopup" class="uni-popup">  
        <div :class="[ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__mask" @click="close(true)" />  
        <div :class="[type, ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__wrapper" @click="close(true)">  
            <div class="uni-popup__wrapper-box" @click.stop="clear">  
                <slot />  
            </div>  
        </div>  
    </div>  
</template>  

<script>  
export default {  
  name: 'UniPopup',  
  props: {  
    // 开启动画  
    animation: {  
      type: Boolean,  
      default: true  
    },  
    // 弹出层类型,可选值,top: 顶部弹出层;bottom:底部弹出层;center:全屏弹出层  
    type: {  
      type: String,  
      default: 'center'  
    },  
    // 是否开启自定义  
    custom: {  
      type: Boolean,  
      default: false  
    },  
    // maskClick  
    maskClick: {  
      type: Boolean,  
      default: true  
    },  
    show: {  
      type: Boolean,  
      default: true  
    }  
  },  
  data() {  
    return {  
      ani: '',  
      showPopup: false  
    }  
  },  
  watch: {  
    show(newValue) {  
      if (newValue) {  
        this.open()  
      } else {  
        this.close()  
      }  
    }  
  },  
  created() {},  
  methods: {  
    clear() {},  
    open() {  
      this.$emit('change', {  
        show: true  
      })  
      this.showPopup = true  
      this.$nextTick(() => {  
        setTimeout(() => {  
          this.ani = '' + this.type  
        }, 30)  
      })  
    },  
    close(type) {  
      if (!this.maskClick && type) return  
      this.$emit('change', {  
        show: false  
      })  
      this.ani = ''  
      this.$nextTick(() => {  
        setTimeout(() => {  
          this.showPopup = false  
        }, 300)  
      })  
    }  
  }  
}  
</script>  
<style>  
    @charset "UTF-8";  

    .uni-popup {  
        position: fixed;  
        top: 0;  
        top: 0;  
        bottom: 0;  
        left: 0;  
        right: 0;  
        z-index: 998;  
        overflow: hidden  
    }  

    .uni-popup__mask {  
        position: absolute;  
        top: 0;  
        bottom: 0;  
        left: 0;  
        right: 0;  
        z-index: 998;  
        background: rgba(0, 0, 0, .4);  
        opacity: 0  
    }  

    .uni-popup__mask.ani {  
        transition: all .3s  
    }  

    .uni-popup__mask.uni-bottom,  
    .uni-popup__mask.uni-center,  
    .uni-popup__mask.uni-top {  
        opacity: 1  
    }  

    .uni-popup__wrapper {  
        position: absolute;  
        z-index: 999;  
        box-sizing: border-box  
    }  

    .uni-popup__wrapper.ani {  
        transition: all .3s  
    }  

    .uni-popup__wrapper.top {  
        top: 0;  
        left: 0;  
        width: 100%;  
        transform: translateY(-100%)  
    }  

    .uni-popup__wrapper.bottom {  
        bottom: 0;  
        left: 0;  
        width: 100%;  
        transform: translateY(100%)  
    }  

    .uni-popup__wrapper.center {  
        width: 100%;  
        height: 100%;  
        display: flex;  
        justify-content: center;  
        align-items: center;  
        transform: scale(1.2);  
        opacity: 0  
    }  

    .uni-popup__wrapper-box {  
        position: relative;  
        box-sizing: border-box  
    }  

    .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {  
        padding: 30px;  
        background: #fff;  
    border-radius: 10px;  
    }  

    .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {  
        position: relative;  
        max-width: 80%;  
        max-height: 80%;  
        overflow-y: hidden;  
    }  

    .uni-popup__wrapper.uni-custom.bottom .uni-popup__wrapper-box,  
    .uni-popup__wrapper.uni-custom.top .uni-popup__wrapper-box {  
        width: 100%;  
        max-height: 500px;  
        overflow-y: hidden;  
    }  

    .uni-popup__wrapper.uni-bottom,  
    .uni-popup__wrapper.uni-top {  
        transform: translateY(0)  
    }  

    .uni-popup__wrapper.uni-center {  
        transform: scale(1);  
        opacity: 1  
    }  
</style>  

联系方式

[QQ]

2019-08-26 14:36 负责人:无 分享
已邀请:
DCloud_HB_WDL

DCloud_HB_WDL

  1. 【eslint一键修复】并不能修复所有的问题。
  2. 代码缩进,可以通过菜单【编辑-->缩进】进行设置;或使用格式化功能
  • lioil (作者)

    感谢回复。通过两种方式解决了。

    先通过重排代码格式后,格式化了模板和样式,再使用eslint一键修复了js的问题。

    2019-08-26 15:25

该问题目前已经被锁定, 无法添加新回复