Dynamic snippet extension

Supported languages (file extensions)

JavaScript (.js)
TypeScript (.ts)
JavaScript React (.jsx)
TypeScript React (.tsx)
Go (.go)
Vue (.vue)

前提说明

本插件设计初衷是为了满足公司团队或组内统一代码风格，代码模板和自定义 snippet 和代码模板的需要；而通过员工自己规范自己并保持统一成本比较高，并且代码设计公司信息安全无法做成通用插件供员工使用若做成插件仅内部使用并不发布至应用市场，那么在每次更新或者 snippet 迭代的时候每个人总需要通过插件包重新安装

因此本插件使用的是远程 snippet 和代码模板，插件中不包含任何片段信息和模板代码，将 snippet 和代码模板放置到公司内部网络，满足信息安全的要求，使用有两点前提

使用者需要自行开发一个数据服务为插件提供接口
数据结构参见下方描述

Basic concepts

rule: 每个 snippet 片段为一个规则即可以定义 'csl' 为 'console.log('value=', value)'
temp: 多个 rule 组成一个 snippet 模板

How to use

create a rule
create a snippet template with unique key and related multiple rule
edit setting.json(command + shift + p) in vscode like this

{
	"address": { "snippetAdd": "xxx.xxx", "templateAdd": "xxx.xxx" },
	"snippetType": {
		"TS": "fe-ts",
		"VUE": "fe-vue"
	},
	"templateList": { "tem_1": "search-table" }
}

address

snippet request address splice with "key" can get the template content

获取远程 snippet 和 template 的接口 url，拼接配置的 key 值后可成功获取 snippet 数据
如访问 https://xxx.xxx.net/api/snip-tmpl-str/aaa 可以获取 snippet 数据，aaa 为 snippetType 中所配置的 key，则 address 中 snippetAdd 需要配置为 https://xxx.xxx.net/api/snip-tmpl-str/
templateAdd 同 snippetAdd 使用

接口返回数据结构

{
	code: "0000";
	data: {
		str: string;
	}
}

其中 str 通过 JSON.parse 转换后数据格式为

    {
    	snippetName: {
    		body: string[];
    		description: string;
    		prefix: string;
    	}
    }

example

{
	"code": "0000",
	"message": "",
	"data": {
		"str": "{\"console\":{\"body\":[\"console.log('${1:value}=', ${1:value})\"],\"description\":\"console.log()\",\"prefix\":\"csl\"},\"select\":{\"body\":[\"\\u003cel-select v-model=\\\"m.environment\\\" clearable filterable placeholder=\\\"请选择执行环境\\\" style=\\\"width: 100%\\\"\\u003e\",\"    \\u003cel-option\",\"        v-for=\\\"valueinthis.envs\\\"\",\"        :key=\\\"value\\\"\",\"        :value=\\\"value\\\"\\u003e\",\"    \\u003c/el-option\\u003e\",\"\\u003c/el-select\\u003e\"],\"description\":\"vue-select\",\"prefix\":\"slt\"}}"
	}
}

snippetType

select language to use, the first means use ts template which key is "fe-ts"

templateList

use template which key is "search-table"

若 search-table 中包含了两个规则 console 和 select 则会一键生成对应代码模板，名字分别以 str 中的 key 值作为文件名，将其中 body 的内容作为文件内容

remote-snippet

suxiao