yxfe-suite

优选前端工具插件，提供一系列工具，帮助提高代码质量和开发效率，持续建设中。

特点

目前支持的功能如下：

• Wxss Check: 检验 wxss 文件中的属性是否符合规范

  注意：只支持 wxss 文件.

• Ylog: 快速打印特征日志，以便于在优选小程序中过滤测试

• Img Src Transform: 将 vue 模版 img 标签的 src 属性转化成 https 并且是美团公网能访问的域名，美团优选特用

  注意：如果 img 的 src 是动态属性，则目前需要手动引入相应的方法至 SFC 的 methods 中.

手动引入工具函数

<script>
  import { toHttps, toPublicDomain } from 'some/utils/path';
  export default {
    methods: {
      toHttps,
      toPublicDomain,
    },
  };
</script>

转化示例

<template>
  <div>
    <img src="http://s3plus.vip.sankuai.com/test.png" />
    <div>
      <img :src="true/picture" />
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        picture: 'http://s3plus.vip.sankuai.com/test.png',
      };
    },
  };
</script>

<style scoped>
  p {
    font-size: 2em;
    text-align: center;
  }
</style>

<template>
  <div>
    <img src="https://s3plus.sankuai.com/test.png" />
    <div>
      <img :src="toPublicDomain(toHttps(picture))" />
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        picture: 'http://s3plus.vip.sankuai.com/test.png',
      };
    },
  };
</script>

<style scoped="">
  p {
    font-size: 2em;
    text-align: center;
  }
</style>

使用

Ylog

复制要打印的内容，然后光标停留在要输出日志的地方，输入 ylog，出现 ylog 选项回车即可

Wxss Check

在.wxss 文件，command+shift+p，然后输入 wxss check，下拉列表出现 wxss check 直接回车

Img Src Transform

在.vue 文件，command+shift+p，然后输入 img src transform，下拉列表出现 img src transform 直接回车

已知问题

0.0.7

布尔属性转化后赋值问题

<div v-else="">
  <el-button icon="el-icon-back" size="small" class="back-btn" @click="back"
    >返回</el-button
  >
  <ocr-manage v-if="isOcrManageShow">
    <sku-data-monitor v-if="isSkuDataMonitorShow"> </sku-data-monitor
  ></ocr-manage>
</div>

<style scoped="" lang="less"></style>

注意：布尔属性转化后赋值问题，需要手动进行校正

版本历史

0.0.7

支持 vue 模版中的 img 的 src 属性替换

0.0.3

支持 ylog 特征日志

0.0.1

支持 wxss 属性检查

其它

发布

如果遇到 vsce package 报错问题，请运行下面命令进行打包

vsce package --baseImagesUrl https://raw.githubusercontent.com/llvm/llvm-project/master/clang-tools-extra/clangd/clients/clangd-vscode/