VS Code项目中共享自定义的代码片断方案

一.问题背景

• 项目中注释风格不统一，如何统一注释风格
• 一些第三方组件库名称太长，每次使用都须要找文档，而后复制粘贴
  • 部分组件库有本身的Snippets插件
• 一些组件能记住名称，但太长了手敲全称有点费时间
• 某些组件还有很多经常使用的参数,有不有办法在敲出组件的时候，加上一些参数

二.解法

稍加总结就不难看出，这些问题都能经过一些代码片断去解决

问题又来了：如何在项目中共享自定义的代码片断？

编辑器以VS Code为例，引入自定义代码片断的常见方案有以下几种：

1. 经过扩展市场，以插件的方式引入(比较推荐各UI 组件库作一个)
2. 直接在VS Code中引入自定义代码片断(首选项 -> 用户片断)
   1. 全局
   2. 当前项目

目前最适合当前场景的方案2-2

三.如何在当前项目中建立自定义的代码片断？

1. 在当前项目中建立.vscode文件夹
2. 在其中建立以.code-snippets结尾的文件如:
   1. a.code-snippets
   2. b.code-snippets

如何编写？

first.code-snippets

{
	"Print to console": { // 代码片断名称
        "scope": "javascript,typescript", // 生效的语言
        // （在文件中敲入prefix便可生成body中的内容）
		"prefix": "lg", // 片断缩写
		"body": [ // string[] 片断的完整内容，每一个string表明一行
			"console.log('$1');",
			"$2"
        ],
        // 在文件中输入完prefix时候，弹出此内容
		"description": "Log output to console" 
	}
}
复制代码

保存后就能够在工做区生效

body中能够有一些自定义的特殊内容

占位符$

• $number:$1，$2，$3
  • 可指定代码片断触发落入编辑器以后的光标位置，光标位置按照从小到大排序，经过Tab 切换
  • $0用于设置光标最终的位置
• ${number|option1,option2|}: ${1|op1,op2|}
  • 设置占位内容的可选项
• ${number:value}: ${1:default}
  • 可选内容只有一个的状况

变量

使用 {name:default} 能够插入变量的值。若是未设置变量，则会插入其默认值或空字符串。当变量未知（未定义其名称）时，会将插入的变量名称转换为占位符。

VS Code内置了许多变量这里就不赘述了，

变量文档英/掘金翻译

四.总结

经过在VS Code中建立.vscode文件夹写入x.code-snippets配置文件便可实现自定义代码块的共享

局限

1. 必须写在.vscode目录中
2. 不支持文件夹分类，即在.vscode目录生效深度只能为1
3. 增长项目的文件大小
4. 须要手动把别人的片断文件放在.vscode目录中

五.将来

部分库（组件/方法/语言）等提供了Snippets插件，但还有一些库没有提供，想把本身的代码块共享给其它人，开发插件的学习成本较高

有没有一种办法可以：

• 直接引入它人的代码块
• 传播方便
• 引入方便
• 对项目结构没有影响
• 更新迭代方便

个人设想：

Snippets文件以npm包的形式发布到npm仓库，本地经过一个VS Code插件自动扫描node_modules中的代码片断文件，而后使其在编辑器中生效

接下来去调研看看是否有现成的这种插件，没有的话本身搞个23333

参考文章:

• VS Code Snippets官方文档
• 掘金：VSCode 利用 Snippets 设置超实用的代码块