美萌 vscode 工具集
美萌 vscode 插件，提供了一系列工具，帮助在项目开发过程中快速开发。
功能特性
插件通过许多项目实战总结，从中凝练了许多功能，帮助前端开发者提升项目开发的效率、进度和质量。插件的功能模块大致分为以下几类：
视窗功能
安装美萌插件后，插件提供了两个视窗：
独立视窗
在 VSCode 侧边栏安装后会显示一个美萌图标，点击该图标，会出现一些相关功能。
1.1 美萌文档中心
打开系统默认浏览器并访问美萌组件库文档页面。
1.2 WIKI首页
打开系统默认浏览器并访问美萌WIKI文档首页
1.3 node_modules-cover
将项目下的 node_modules 替换为 node_modules-cover 中的文件。
由于 Taro、React-Native 等框架在某些特定版本下存在些许 bug，可能需要替换 node_modules 中相关文件的依赖。
从 2023 年开始的新项目，不建议使用此种方式。
1.4 打开项目wiki首页
项目根package.json中配置wmeimob.wiki才会显示。点击跳转配置的wiki地址
NPM脚本视窗
在与编辑器相同的窗口中，会出现一个 NPM脚本 视窗。
该插件提供了一个类似编辑器自带的 npm 脚本视图，但相比之下，插件提供了一些额外的功能。我们根据序号依次介绍：
1.视图名称：该视图的固定名称。如果你看不到，请在 资源管理器 栏上右键，勾选 NPM脚本-美萌。
2.工作区名称：当前脚本显示归属的工作区。本插件没有适配多工作区，因为会导致脚本混乱。不过我们提供了切换工作区的功能，会在下面讲到。
3.脚本工作空间与命令：在视图中你可看到每个 package.json 下的所有命令，并以树视图的形式展示。对于传统单独项目来说，只会有一个工作空间（即 package.json 对应的是整个项目），但对于 monorepo 模式，会存在工作空间的概念。插件会智能匹配这两种模式，显示所有工作空间下的脚本命令。
4.脚本命令：当鼠标悬浮在某个命令行上时，会出现脚本命令运行图标。点击相应的图标即可运行对应的命令。目前提供的命令有： 收藏 与 运行。
- 收藏 — 点击可以收藏/取消收藏某个命令。该操作可以结合视图筛选，仅显示收藏命令。
- 运行 — 点击即可打开一个命令行终端并执行命令。
5.收藏状态：选中时会显示收藏图标，未选中为默认图标。
6.运行命令：同上，点击图标运行命令。
7.切换工作区：当你打开一个多工作区的项目时，可以点击这个图标进行切换。
8.切换展示：点击切换所有命令视图或仅显示收藏视图。这在命令行非常多时，可以快速筛选出你感兴趣的命令。
9.刷新：刷新当前视图。考虑到工作区项目查找文件性能，插件在设计时会将数据信息缓存并内置 30 天的缓存期，以加快插件的运行解析速度。如果你发现视图没有展示完全，可以点击这个图标强制刷新并重置缓存时间。
NPM 配置
npm 视图提供了几个配置，可以更精确地控制命令的展示与否。
设置方式： 设置 - 美萌VScode插件 - 配置
| 参数 |
描述 |
备注 |
| wmeimob.npm.include |
需要包含的项目名称。这里匹配的是 package.json 父级文件夹的名称。当你是工作区项目时会存在非常多的项目，但对于项目开发而言需要使用的只有固定的一到两个项目。此时通过设置 include 来包含你要显示的项目命令 |
优先级高于 exclude |
| wmeimob.npm.exclude |
需要排除的项目名称。 |
同时存在时先 include 再 exclude |
| wmeimob.npm.includeNames |
需要包含的脚本名称，支持正则匹配。相较于 include 是过滤项目名称，includeNames 是更精细的控制显示的命令 |
优先级高于 excludeNames |
| wmeimob.npm.excludeNames |
需要排除的脚本名称，支持正则匹配。 |
同时存在时先 include 再 exclude |
NPM工作区设置
上面的示例是针对插件的配置，也就是说这个设置项对所有项目都生效。但实际上很多时候，我们更希望是针对工作区生效。那么此时你就应该用到工作区设置。方法也很简单，如下图：
或者你可以在项目根目录 .vscode 中直接设置 wmeimob.npm.exclude。
右键菜单功能
通过在指定位置右键，可以使用相关功能。
2.1 新建页面、组件
插件提供了快捷的方式帮助你创建一个页面或组件。示例：
2.1.1 右键-创建页面
在 src/pages 目录及子目录下，可以点击右键-创建页面。
注意: 只可以在 src/pages 和 src/page-components 下才会出现创建页面选项，其他目录无法唤起该选项。
第一步: 右键
第二步: 输入组件名称
第三步: 创建成功
2.1.2 右键-创建组件
操作同上。
注意: 只可以在 src 目录下才会出现创建组件选项。
2.2 右键-通过模板创建
v0.7.0 新增
上面的两种创建组件/页面的模式是公司根据项目框架制定的，算是一种默认标准。不过在实际开发中，你可能会有一些使用自定义模板的想法。这很好！所以在插件 v0.7.0 开始，我们提供了这个功能。
2.2.1 创建模板
想要使用这个功能。你需要在项目父级新建一个.templates文件夹。并在里面新建名为[name].yml的模板文件。像是这样
# .templates/custom-vue.yml
# 模板名称
name: 'custom-vue'
# 详细描述
description: '自定义的的vue模板'
# 标签
tags: ['vue', 'uni']
# 是否覆盖创建组件/页面
# override: ['react-component']
# 模板内容
tpl:
index.vue: |
<template>
<div>
<Alert message="扩展antd按钮样式" type="info" show-icon style="margin-bottom: 12px" />
</div>
</template>
<script setup lang="ts">
import { Alert, Space, Card, Divider } from 'ant-design-vue'
import { AButton } from '@/components/basic/button'
import { themeColors } from '@/layout/header/components/setting/constant'
defineOptions({
name: '[:=PascalName:]'
})
</script>
index.less: |
.a {
color: red;
}
解释:
name: 模板名称description: 详细描述tags: 标签数组override: 是否覆盖创建组件/页面。详细说明请看下面tpl: 模板内容。一句上面的例子。我们会在你输入的组件名称文件夹中创建两个文件。他们的文件名分别是index.vue和index.less。内容即是模板字符串内容（变量会被替换）
变量: 细心的你或许你已经发现。在上面的文件中有诸如[:=xxx:]的字符。这是模板变量。在生成模板的过程中。你可以通过模板变量来进行更加细致的控制。支持的变量有:
- CamelCaseName 组件驼峰命名
- PascalName 组件帕斯卡命名
- KebabCaseName 组件横杠线命名
- dirname 组件目录名
tpl类型:
关于tpl支持的类型是
type TTemplate = string | {
/** 模板文件名称 */
name: string;·
/** 模板字符串 */
template: string;
}
并且name是支持变量字符串的。可以修改模板名称
2.2.2 override
v0.8.0 新增
上面章节我们讲述了创建组件/页面的能力。其内置了默认的模板。大部分时候，默认模板已经能够满足项目需求。当然也有一些特殊场景。需要对默认的模板进行修改。这时候就可以使用这个参数进行覆盖。
根据项目类型的不同。默认模板有以下类型。也就是说。override的参数是下面这些组成的数组。
export type TTemplateName =
'react' | 'react-component' | 'react-page' |
'taro' | 'taro-component' | 'taro-page' |
'react-native' | 'react-native-component' | 'react-native-page' |
'vue' | 'vue-page' | 'vue-component' |
'uni' | 'uni-component' | 'uni-page' |
'umi-page' | 'umi-component' |
'umi-max-page' | 'umi-max-component';
2.2.3 右键-通过模板创建
在.template子级的pages|componets目录下。都可以通过右键-通过模板创建。输入组件名称。即可将上面的组件创建出来了！
2.3 右键-swagger api生成
2.4 右键-项目构建发布
支持: 后台管理系统/移动端H5/微信小程序项目
当项目开发结束需要发布到测试环境以供测试或者客户UAT。这时候，你可以通过右键-项目构建发布进行项目的构建发布
使用方式:
在项目 package.json 文件上进行 右键。 选择项目构建发布。
选择构建环境（默认支持了build、uat类命令）。
等待插件自动执行构建并上传
构建上传成功后。如果是web类型项目，会提供一个链接，点击链接即可跳转到测试环境。如果是微信小程序，会上传至微信公众平台。你可以登录到微信公众平台查看，设置为体验版或提交审核。
(链接构建信息也会写入到项目根目录的package.json中。你可以安全的提交记录到git仓库中)
注意: 构建过程中如果出现了未找到默认输出目录构建产物。请确认构建是否执行成功或手动指定output之类的错误。请先尝试在本地cmd中执行相同的命令。看构建是否报错。如果没有问题。可以联系架构部。
构建类型: 插件对公司构建命令做了深度的适配。在构建小程序或者h5时。会自动判断类型。如果无法识别。则需要你手动选择构建类型。
2.4.1 小程序构建
关于小程序的构建方案。使用的官方命令行调用方式。
在使用前。你需要打开微信开发者工具中的服务端口。操作方式如下图:
悬停功能
3.1 枚举转换
有些时候。我们写了一个枚举。像这样
/**
* 短信code场景值
*/
export enum ECodeScene {
/** 注册 */
REG = 'REG',
/** 忘记密码 */
FORGOT = 'FORGOT'
}
但是光是定义一个枚举是没用的。很多时候我们除了引用这些枚举。还需要根据枚举做一些数据转换。比如一个对象或者一个下拉框的options。比如这样:
/**
* 短信code场景值
*/
export enum ECodeScene {
/** 注册 */
REG = 'REG',
/** 忘记密码 */
FORGOT = 'FORGOT'
}
/**
* 键值对对象
*/
export const MCodeScene = {
[ECodeScene.REG]: '注册',
[ECodeScene.FORGOT]: '忘记密码'
} as const
/**
* 下来选项数组
*/
export const OCodeScene = [
{ value: ECodeScene.REG, label: '注册' },
{ value: ECodeScene.FORGOT, label: '忘记密码' }
] as const
但是我们发现。每次手动编写非常的浪费时间。所以。插件提供了一种方式让你快速的生成
将鼠标悬浮到枚举定义上。点击枚举转换即可
命令行面板
插件也提供了一些可以在命令面板（Command Palette）中使用的命令。相比点击操作。会更加的快捷。
命令面板唤起系统快捷键:
window CTRL + SHIFT + P
Mac CMD + SHIFT + P
命令列表
| 命令 |
描述 |
wmeimob.openMMDoc |
打开美萌文档 |
wmeimob.openWiki |
打开wiki首页 |
wmeimob.eject |
将默认模板eject到本地项目中 |
wmeimob.eject
伴随插件的升级维护。我们会对模板进行修改。大多数情况下我们希望你们能够使用最新的插件提供的最新的模板来进行开发。但有时候(例如老旧项目使用的不兼容的模板)。所以插件提供了一个方法来将模板放到项目中。下面将演示如何操作:
- 1.打开命令面板,输入 wmeimob.eject
- 2.选择当前你项目适配的模板
- 3.回车就完成了！ 模板会被复制到你的项目根目录下的
.templates文件夹中
需要注意的是: eject出来的模板是通过 name 字段匹配的，请勿修改
变量: 细心的你或许你已经发现。文件中有诸如[:=xxx:]的字符。这是模板变量。在生成模板的过程中。你可以通过模板变量来进行更加细致的控制。支持的变量有:
- CamelCaseName 组件驼峰命名
- PascalName 组件帕斯卡命名
- KebabCaseName 组件横杠线命名
Configuration
wmeimob.template.globalCreatePage: 是否开启src下全域可创建页面。
WmeimobConfiguration
0.10.0新增
美萌配置
目前仅支持在项目根目录下的package.json内配置。后续扩展会考虑支持其他配置方式
// project/package.json
{
// ....其他配置
"wmeimob": {
/**
* 项目wiki地址。配置后会在美萌视窗中
*/
"wiki": string,
}
}
插件开发指南
废弃
由于插件早期缺乏设计和统一的工程思想。插件功能的开发都是随着项目进行产出。随着时间的推移。发现很多的功能缺乏实际的泛用性或者不适合在项目中展现。
所以本插件进行了一次大规模的清洗。未来将会慢慢加入真正有效、高效的插件。
此处列举下已经移除的功能:
开发
如何你想为公司插件开发助力。本篇会为你讲述如何开发发布一个插件
启动
安装依赖并启动项目
yarn // 安装依赖
按下键盘上的F5键。插件会进行编译。并启动监听文件修改。当你修改文件后会自动编译。但是需要注意的是。启动的调试编译器不会自动刷新。需要你自己重启一下
发布
当你完成插件开发后。只需要执行两个命令即可发布插件到插件市场
关于发布的更多信息。查看下面的链接
打tag并生成changelog
// 打包版本
yarn release:patch // 打一个修订本
yarn release:minor // 打一个小版本
yarn release:major // 打一个主版本
Flow流水线发布
通过上面的命令将tag 推送到远端仓库后。会根据tag自动启动流水线构建与发布。并在发布结束后 企微通知相关人员。
当然你也可以通过下面的命令 手动发布
手动发布应用市场
首先确保你登录并绑定了Personal Access Token
yarn pub // 发布至应用市场
