笔记, 建立 VS Code 的 snippets 扩展

时间 2019-12-05

标签笔记建立 code snippets 扩展繁體版

原文原文链接

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

Snippets 扩展

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

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

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...npm

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

安装扩展

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

npm install -g vsce
vsce package

这时会生成一个扩展名为 .vsix 的文件, 就能够经过 VS Code 的命令安装了:数组

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

这一步也能够经过 VS Code 图形界面来完成:bash

发布扩展到市场

说的话大体步骤不麻烦, 大体上:网络

先到 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...