Snippets
不知道大家有没有用过vscode自带的snippets，是不是有时候看其他人怎么输入几个字母，就能生成一大段代码，非常神奇。这在开发中是非常爽的，不需要关注具体细节，转而关心代码整体的思想。
在vscode的扩展商店里面搜索snippets会有非常多的结果，没有使用过的宝子们可以尝试一下。不过在vscode扩展商店搜索出来的内容，一般是和某个开源组件库所关联的，比如Simple React Snippets，内置了与使用React相关的代码片段。
这确实可以满足我们一部分需求，但如果对于一些业务，存在较多重复代码的情况下，希望能有一个业务相关的代码片段库，就得自己去收集。
为了在业务开发中提效，创建业务相关的代码片段库其实不难。在.vscode文件夹中，创建一个.code-snippets后缀文件，里面定义好代码片段，然后通过$定义占位符实现内容的灵活替换。使用snippets的过程就是，调用代码模板，填充占位符，得到结果。
在代码编辑器中输入gen:page，也就是生成页面定义的prefix，vscode会弹出一个框让我们选择代码片段。
选中代码片段之后，内容就会补全在编辑器上，可以看到光标是定位在刚才定义的$1上面的。我们可以通过定义$来灵活替换内容。
推荐一个快速创建Snippets的网站，snippet-generator.app/ 。我们把需要复用的代码片段粘贴到这个网站上，就可以快速生成一个结果，点击Copy Snippet粘贴到.vscode/*.code-snippets内即可使用。
Snippets还可以更好
用了4个月vscode内自带的snippets，该爽的爽完了，剩下的就是让我不爽的。
修改代码片段真的有点麻烦
虽然有帮助创建代码片段的线工具，但修改代码片段很麻烦。snippet-generator通过string[]来保存代码模板。直接在.code-snippets里面修改代码片段就很痛苦了。一般需要先把代码片段生成在编辑器上，修改好格式后重新定义占位符，然后再走一遍创建流程。
业务代码片段和开源组件库的片段不同，本身在小范围使用就更需要兼顾灵活性，所以改动的频率会很高。
代码片段存在.vscode里，意味着其他分支和项目没办法复用
我经常遇到一些情况，我已经在新分支上开发代码了，最新的代码片段也存储在新分支里。但测试让我修改一个老版本的bug，我得切换回老分支，这个时候新创建的代码片段就没办法用了。有一种在4g信号和2g信号之间切换的感觉，突然从基建良好的4g，切换回2g网络。
解决办法有两个：
- 手动复制新分支的code-snippets文件到老分支里
- 将code-snippets生成vscode插件，然后实现跨工作区、跨分支的复用。
第二个解法显然过于复杂了，但对于之后实现跨分支、跨项目是有启发的。
不关心代码上下文
就目前的vscode snippets而言，假设你在一个文件内通过usf快速生成了const [|, set|] = useState();，这个useState是不会被自动引入的。需要自行在页头插入import { useState } from 'react';。
这只是一个很简单的例子，但假设我们创建的是一个更复杂的代码片段，这是通过ArcoDesign组件库创建的表单项。这段代码需要写入依赖import { Form, Radio } from "@arco-design/web-react";。每次自己引入会很烦，影响我们写代码的心流模式。
<Form.Item
field={field}
rules={[
{
required: required,
},
]}
initialValue={initialValue}
>
<Radio.Group
options={[
{ label: "是", value: true },
{ label: "否", value: false },
]}
/>
</Form.Item>
占位符转换复杂
比如对于下面这段管理模态框的代码，其实只用到了一个占位符addHostModal，但同时存在小驼峰与大驼峰两种形式。虽然vscode snippets可以实现大小驼峰的转换，但我如果不去翻文档是不知道的，上手成本就很高。如果能让我用js来定义一个转换函数，对我来说反而更轻松。
const [addHostModalVisible, setAddHostModalVisible] = useState(false);
const openAddHostModal = () => {
setAddHostModalVisible(true);
};
const closeAddHostModal = () => {
setAddHostModalVisible(false);
};
const addHostModal = (
<AddHostModal visible={addHostModalVisible} onClose={closeAddHostModal} onRefresh={refresh} />
);
自己动手，丰衣足食
为了解决上述的一些问题，让研发过程更爽。我觉得自己打造一款VSCode插件，现已上架。FE Snippets+
这款插件最大的特色就是“让你爽”，对一个前端研发来说，为了这款插件也做了非常多的优化与改进，有点当产品的感觉了。
虽然功能很多，但不需要担心不会用。因为这是一款只要装了就都会用的插件~
那安装FE Snippet+有什么预期收益呢？
管理代码片段很爽
虽然美不是我们用它的核心理由，但是作为一款公益插件它真的很美。
始于颜值，终于才华。创建/修改代码片段非常简单，只需要在选中代码片段后，输入cmd + shift + enter快速创建代码片段。Snippet+很懂你的代码，代码片段依赖语句也被记录下来，之后你使用的时候，会帮你自动处理依赖噢~
使用ejs模板引擎渲染代码模板，因此可以在代码模板内使用js语法来定义生成逻辑。对模板变量进行大驼峰/小驼峰转换，插入当前日期，插入当前文件夹的名称……。知道你懒~不会用ejs语法也没关系，编辑器内置了很多快捷方式，你只管点点点。
当然你如果哪天心血来潮，想进一步了解它，看看这个文档也很推荐Snippets+代码模板使用案例
const [<%- `${_.camelCase(name)}` %>, set<%- `${_.upperFirst(_.camelCase(name))}` %>] = useState<%- type !== undefined ? `<${type}>` : `` -%>(<%- data !== undefined ? `${data}` : `` -%>);
使用代码片段非常灵活
提供视图界面，引导你输入模板变量。因为会使用js渲染你的代码模板，你甚至可以在这定义输入数组、对象……
输入完成后，你的代码结果就被渲染好了。要是没啥问题enter确认。
跨项目复用
可以将代码片段保存在一个自定义目录中，这样不同项目也能同时享受到已经创建好的代码片段。
不用关心依赖问题
这是一款内置代码分析的代码片段管理插件，所以只要你的代码是以ESM写的，他都可以进行分析。
依赖分析算法
基于AST分析，得出一个代码片段所需的ImportDeclaration，并保存到本地。在代码片段被插入时，就会产生用途了~
依赖按需引入算法
因为保存代码模板时已经记录了ImportDeclaration，此时Snippet+会比较当前代码片段和被插入的环境，计算出缺少的ImportDeclaration插入。
比如你的代码片段a需要引入useState，useEffect，但被插入的环境内已经包含了useState，那最终只会新插入useEffect的ImportDeclaration。
依赖相对路径转换算法
在A文件创建的代码片段中有这么一句import styles from './index.module.less'，当这个代码片段插入到B文件中时可能会变成import styles from '../../A/index.module.less'。当然这个转换功能可以关掉，但在90%的情况下，是需要且好用的。
买一送一，还有变量名翻译能力
定义模板变量的时候，可以直接输入中文，让Snippet+帮你转换成英文。先对模板变量开启变量翻译。
填充模板变量的时候输入中文
确定后会让我选择一个翻译结果
选中一个后确定，查看渲染结果并插入至编辑器
