前提
你有没在开发需求的时候，经常发现这段代码在别的地方写过，但是又得仔不同项目找找找，然后找到后要ctrl+c和ctrl+v,最后就辗转于不同项目copy来copy去的，最后才解决问题。
你有没在开发需求的时候，经常要找一些代码来参考，却要去google搜索，搜索，搜索，最后才搜索到，却花了很长时间。
你有没在开发需求的时候，经常想偷懒，能一键去导入已经写过的代码。。
铛铛铛～～～
现在来了。
Snippets Utils
这个代码块插件解决你的问题啦～
（在市场上"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"的入口，点击之后，就可以看到有代码块的界面。然后点击相应的代码的
[选中插入]按钮，就可以将对应的代码插入当前光标处。
如何使用
- 1、通过在编辑界面输入key值直接使用。
- 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水平居中 |
| ... | ... | ... |
总结
本插件主要是包含很多经常用的utils，css,react和ant design vue的一些代码块，帮助你快速提升自己的研发效率。👍
快点用起来吧～🏃♀️
