vscode 插件 --- xy-quick 介绍vscode 想必大家都很熟悉了，前端开发神器，其扩展插件特性赋予了

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

背景

vscode 想必大家都很熟悉了，前端开发神器，其扩展插件特性赋予了 vscode 多彩多样的功能，比如：韭菜盒子，Rainbow Fart，epub reader（举点正经的啊喂(╬▔皿▔)╯）

开发 vscode 插件的想法起源于一个失眠的晚上，以前觉得 ‘开发插件 === 厉害的人'，那我想如果我开发了一款 vscode 插件，那岂不是'我 === 厉害'。说干就干，第二天就跟老大说了想法，得到支持后就着手开始了

目标

snippets：快速生成代码片段
templates：快速生成页面模板文件

预演

片段

模板

开始

安装脚手架

npm i -g yo generator-code

生成项目

yo code

打包

// 安装依赖
npm i -g vsce

// 如果上面命令安装报错，可用下面命令安装
npm i -g vsce --save vsce

// 打包
vsce package

本地安装

将打包好的文件用以下方式安装即可

设计方案

设计方案在开发时设计了几版，分为本地数据版和线上数据版，这边介绍线上数据版。

├── src              
|   ├── extension.ts 命令入口
|   ├── extensions 
|   |   ├── index
├── img  插件图标
|   └── logo 
├── userInfo  用户数据
|   └── index.json
├── templates 页面模板
|   ├── vue   
|   ...
├── snippets 代码片段    
|   ├── base
|   ...
├── package.json 拓展清单
...
|

同步数据流程

考虑到片段和模板数据的安全性，将从模板项目同步数据至本地供使用所有接口服务都走发布平台服务接口

登录 -获取登录态
同步 snippets 数据
选择想同步的页面模板
同步 templates 数据

同步模板、片段功能拆解

登录接口获取 token
同步片段
1. 获取片段文件树
  1. 获取文件内容，写入
同步模板
1. 遍历选择的每个模板名称，在 templates下创建文件夹
2. 获取模板内容树
  1. 如果是文件，则获取文件内容，写入
  2. 如果是文件夹，创建文件夹，递归第二步

参考文档

下载文件：blog.csdn.net/qq_31772441…
获取存储库树：blog.csdn.net/qq_37945565…

生成模板文件功能拆解

目标：

支持模板生成
支持使用 handlebars 库以 .tpl 文件格式解析生成

步骤：

获取模板文件夹目录
遍历判断当前是否是文件
1. 是：遍历判断当前文件是否是 .tpl 文件
  1. 是：读取模板内容，解析模板语法，去掉 .tpl 后缀后写入文件
  2. 否：直接 copy 文件
2. 否：递归遍历第二步操作

snippets

提供常用的代码片段，eg：工具函数，公共组件

prefix：类型简称_快捷键

数据结构：

{
  "cssimport": {
    "prefix": "css_flex",
    "body": [
      "display: flex;",
      "align-items: center;",
      "justify-content: space-between;"
     ], 
    "description": "cssimport"
  }, 
  "taroimport": {
    "prefix": "tr_imp",
    "body": "import ${2:moduleName} from '${1:module}'$0", 
    "description": "taroimport"
  }, 
  "reactimport": {
    "prefix": "rc_imp",
    "body": "import ${2:moduleName} from '${1:module}'$0", 
    "description": "reactimport"
  }, 
}

templates

操作方式：

在父级目录上菜单右击添加模板
选择模板
输入文件夹名称

优缺点

优点

提高开发效率，对于搜索+列表的常规页面，提效80%（旧模式：耗时20-30分钟，新模式：耗时<5分钟）
有利于项目代码风格统一

缺点

熟悉片段和模板内容需要一定的时间成本

vscode 插件 --- xy-quick 介绍

背景

目标

预演

片段

模板

开始