Snippets Utils
🔧 这个插件包括一些经常使用的代码块，包含Javascript、css、Ant Design Vue、React 等等。(后续慢慢会增加其他类型的代码块)
介绍
这个插件还包含一个vue组件树的管理，点击插件的icon，打开的是vue文件，就会出现vue的组件树，在组件树上点击相应部分，就可以选中相应的代码，可以删除对应的模块。
入口
- 1、在编辑代码区域, 右键，点击第一个“添加代码块 - Snippets Utils”按钮，就可以看到有代码块的界面。然后点击相应的代码的
[选中插入]按钮，就可以将对应的代码插入当前光标处。
- 2、在编辑代码区域输入
【key】值并点击 键盘的 【->tab】 键，就可以看到代码块了。
- 3、同时按"Shift (⇧) + Command（⌘）+ p"键去打开命令行，然后输入"Snippets Utils",就可以看到"添加代码块 - Snippets Utils"的入口，点击之后，就可以看到有代码块的界面。然后点击相应的代码的
[选中插入]按钮，就可以将对应的代码插入当前光标处。
如何使用
- 2、打开界面点击右边的
【选中插入】 按钮，在光标中进行插入
- 3、在首页搜索关键字(key值、某个关键字、代码中某个代码) 都可以搜索出来
- 4、添加我的个人代码块，并可以编辑，删除。然后就可以插入自己的代码块了😄
Snippets
下来列举出一小部分代码块
| Prefix |
Javascript Snippet Content |
function |
| utilsSleep |
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)); |
延迟异步函数的执行。 |
| utilsJsonToFile |
const JSONToFile = (obj, filename) => fs.writeFile(${filename}.json, JSON.stringify(obj, null, 2)) |
将 JSON 对象写入文件 |
| utilsReverseString |
const reverseString = str => [...str].reverse().join(''); |
反转字符串 |
| utilsTruncateString |
const truncateString = (str, num) => str.length > num ? str.slice(0, num > 3 ? num - 3 : num) + '...' : str; |
将字符串截断为指定长度 |
| utilsArrayMax |
const arrayMax = arr => Math.max(...arr) |
返回数组中的最大值 |
| utilsArrayMin |
const arrayMin = arr => Math.min(...arr) |
返回数组中的最小值 |
| utilsArraySum |
const arraySum = arr => arr.reduce((acc, val) => acc + val, 0); |
返回一个数字数组的总和 |
| utilsArrayAverage |
const arrayAverage = arr => arr.reduce((acc, val) => acc + val, 0) / arr.length; |
返回数字数组的平均值 |
| utilsRandom |
const sample = arr => arr[Math.floor(Math.random() * arr.length)]; |
返回数组中的随机元素。 |
| utilsRandomShuttle |
const shuffle = arr => arr.sort(() => Math.random() - 0.5); |
随机数组值的顺序。 |
| utilsUnion |
const union = (a, b) => Array.from(new Set([...a, ...b])); |
返回在两个数组中的任意一个中存在的每个元素。 |
| utilsWithout |
const without = (arr, ...args) => arr.filter(v => !args.includes(v)); |
筛选出数组中具有指定值之一的元素。 |
| utilsSimilarity |
const similarity = (arr, values) => arr.filter(v => values.includes(v)); |
返回两个数组中都显示的元素的数组。 |
| horizontalVerticalCenter |
.wrapper {display: flex;align-items: center;justify-content: center;} |
水平垂直居中 |
| transformCentering |
.center {left: 50%;position: absolute;top: 50%;transform: translate(-50%, -50%);text-align: center;} |
用transform水平垂直居中 |
| gridCentering |
.grid-centering {display: grid;justify-content: center;align-items: center;height: 100px;} |
使用grid水平居中 |
| ... |
... |
... |
你可以打开"Snippets utils"界面去看所有的代码块或者搜索关键词找到代码块。
更多
本插件是FE Tools插件包的一部分，请安装 FE Tools 插件包获取更完善的功能！
使用反馈
| |
