14.snippet

快速 生成

https://snippet-generator.app/

14.1 基本格式

{
	"选择填入": {
		"prefix": "react1",
		"body": [
			"console.log(\"${1:ddd}\")"
		],
		"description": "选择填入"
	},"多选": {
		"prefix": "react2",
		"body": [
			"console.log(\"${1|ceshi,ddd|}\")"
		],
		"description": "多选"
	},"文件正则": {
		"prefix": "react3",
		"body": [
			"console.log(\"${1:${TM_FILENAME/(.*)-snippets/$1ddd/i}}\")"
		],
		"description": "文件正则"
	},
}

• prefix 是触发的前缀，可以指定多个
• body 是插入到编辑器中的内容，支持很多语法
• description 是描述
• scope 是生效的语言，不指定的话就是所有语言都生效
• $1 $2是 光标位置. 两个 $1 是 可以同时编辑
• command + shift + p，输入 snippets 然后选择一种范围

14.2 高级

• 指定光标位置：$x
• 多光标编辑：$x $x
• 指定 placeholder 文本：${x:placeholder}
• 指定多选值：${x|aaa,bbb|}
• 取变量：$VariableName
• 对变量做转换：${VariableName/正则/替换的文本/i}
• 选中文本：${1:$TM_SELECTED_TEXT}
• TM_FILENAME: 文件名
• TM_CURRENT_LINE: 当前行的内容
• CLIPBOARD: 剪贴板内容
• WORKSPACE_NAME：workspace 的名字
• WORKSPACE_PATH：workspace 的路径
• CURRENT_YEAR：当前年
• CURRENT_MONTH：当前月
• CURRENT_DATE：当前日
• RANDOM: 随机数
• RANDOM_HEX: 6 位随机 16 进制数
• UUID: 唯一 id

14.3 webzen 代码snippet

{
	"wz-icon": {
		"prefix": "wz-icon",
		"body": [
			"<wz-icon name=\"image\" type=\"${1|solid,light|}\"></wz-icon>"
		],
	},"wz-button": {
		"prefix": "wz-button",
		"body": [
			"<wz-button type=\"${1|primary,danger,common, |}\"  size=\"${2|default,small,large|}\" >primary</wz-button>"
		],
		
	},"wz-cdn": {
		"prefix": "wz-cdn",
		"body": [
			"<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/webzen-ui/src/component/wz-button/index.js\">"
		],
		
	},
}

14.4 项目中 共享

.vscode 文件夹中 中添加 
xxxxxxxxxxxxxxxxxxx.code-snippets

{
	"wz-icon": {
		"prefix": "wz-icon",
		"body": [
			"<wz-icon name=\"image\" type=\"${1|solid,light|}\"></wz-icon>"
		],
	},"wz-button": {
		"prefix": "wz-button",
		"body": [
			"<wz-button type=\"${1|primary,danger,common, |}\"  size=\"${2|default,small,large|}\" >primary</wz-button>"
		],
		
	},"wz-cdn": {
		"prefix": "wz-cdn",
		"body": [
			"<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/webzen-ui/src/component/wz-button/index.js\">"
		],
		
	},
}

14.5 项目中 发包

就是把 这个包里面的 .vscode 文件夹 复制到 项目中去

14.5.1 install 文件

#!/usr/bin/env node

const fs = require("fs");
const execSync = require("child_process").execSync;
const path = require("path");

// execSync(`npm install eslint@7 -D`);

function search(pathVar, num) {
	if (num > 5) {
		console.log("找不到package.json");
		throw new Error("找不到package.json")
	}
	
	let currentPath = path.resolve(pathVar);
	console.error(`${currentPath}`)
	// throw new Error("找不到package.json")
	if (fs.existsSync(path.resolve(currentPath,"package.json"))) {
		operate(currentPath)
	} else {
		search(path.resolve(currentPath,".."), ++num);
	}
}


/**
 * @des 搜索到 package.json 判断有没有
 * @param {*} currentPath 
 * @returns 
 */
function operate(currentPath) {
	console.log(currentPath)
	if (fs.existsSync(path.resolve(currentPath, ".vscode"))) {
		console.log(`.vscode存在 | 现在 进行写入`);
		let originPath = path.resolve(__dirname, ".vscode", "ts.code-snippets");
		// 这里 更改你的 文件名
		let targetPath = path.resolve(
			currentPath,
			".vscode",
			"你的项目.code-snippets"
		);
		fs.cp(originPath, targetPath, (err) => {
			if (err) {
				throw new Error(`${err}`);
			}
		});
	} else {
		console.log(`.vscode不存在 | 现在 进行写入`);
		let originPath = path.resolve(__dirname, ".vscode");
		let targetPath = path.resolve(currentPath,".vscode");
		fs.cp(originPath, targetPath, { recursive: true }, (err) => {
			if (err) {
				throw new Error(`${err}`);
			}
		});
	}
	return 
}
search(path.resolve(".."),0)

14.5.2 package.json

{
  "name": "webzen-ui-snippet",
  "version": "0.0.40",
  "description": "",
  "bin": "install.js",
  "main": "install.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "postinstall": "node ./install.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}