笔记, 创建 VS Code 的 snippets 扩展

最近考虑把公司的常用代码用扩展处理成复用的, 照着文档处理了一遍.

Snippets 扩展

关于扩展的结构, 可以直接参考官方给出的示例,
一个 package.json 文件, 加上一个 Snippets 的 JSON 文件, 就算写完了:
https://github.com/Microsoft/...

其中 Snippets 的定义大概是这样,

• key 跟 description 只是介绍性文字
• prefix 是 snippet 在自动补全当中的触发字段
• body 当中的代码片段, 分开是换行(做了个小工具来把多行拆成数组)
• $1 ${1:placeholder} 这样的写法, 表示 Tab 控制的光标位置, 其中 $0 表示结束位置

{
    "For_Loop": {
        "prefix": "for",
        "body": [
          "for (const ${2:element} of ${1:array}) {",
          "\t$0",
          "}"
        ],
        "description": "For Loop"
    }
}

复杂的例子就看别人写的扩展了:
https://github.com/xabikos/vs...

VS 还支持一些复杂的功能, 直接看文档上:
https://code.visualstudio.com...

安装扩展

安装扩展需要一个命令行工具, 在 package.json 所在目录运行:

npm install -g vsce
vsce package

这时会生成一个扩展名为 .vsix 的文件, 就可以通过 VS Code 的命令安装了:

code --install-extension my-extension-0.0.1.vsix

这一步也可以通过 VS Code 图形界面来完成:

发布扩展到市场

说的话大致步骤不麻烦, 大致上:

• 先到 https://dev.azure.com/ 上注册账号, 创建组织,
• 在 dev.azure 访问自己的 security 页面创建一个 token, 选中所有 Marketplace 权限,
• 在组织当中创建一个 creator, 命令行或者界面都能操作, 把 creator id 写进 package.json,
• 然后通过 publish 子命令发布...

https://code.visualstudio.com...

不过...实际操作挺多坑的, 网络有时候不好, 提示也不明确, 我浪费了不少的时间查原因.

结尾

VS Code 用支持 .vscodeignore, 也支持 icon, 结构跟 npm 模块也类似.

最后是我厂的 Snippet 代码, 目前功能很少, 后续慢慢扩展:
https://github.com/jimengio/j...