webzen-ui-snippet
v0.0.43
Published
快速 生成
Downloads
36
Readme
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"
}