阅读 2632

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

参考文章:

文章分类
前端