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

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 或者 ${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 设置超实用的代码块