前端从零到一开发vscode插件并发布到插件市场-进阶

开发代码片段插件

创建代码片段

示例：root/snippets/tarocode.code-snippets，注意后缀名
注：是json格式，可以用此网站转化 https://snippet-generator.app/

{
  "zyfbtn": {
    "prefix": "zyfbtn",
    "body": [
      "<div>",
      "  <button>我是zyfbtn</button>",
      "</div>",
      ""
    ],
    "description": "zyfbtn"
  }
}

代码转化为json

配置package.json

为了支持react和ts，可配置4份

"contributes": {
  "snippets": [
    {
      "language": "javascript",
      "path": "./snippets/tarocode.code-snippets"
    },
    {
      "language": "javascriptreact",
      "path": "./snippets/tarocode.code-snippets"
    },
    {
      "language": "typescript",
      "path": "./snippets/tarocode.code-snippets"
    },
    {
      "language": "typescriptreact",
      "path": "./snippets/tarocode.code-snippets"
    }
  ],
}

搞定

结果展示