vscode插件的开发与发布流程

适用场景

• 每一个团队均可能会有本身的库或者框架，没有相应的插件提示和快速填充很是的难受，效率也很是低，作一个vscode的代码提示其实也很是的简单。

依赖

• vscode最好是更新到最新版，插件调试会更稳定
• node 稳定版
• npm install -g yo generator-code
• yo code 生成基本文件, 过程与npm init 相似。yo会在最后自动自行npm install， 若是失败能够手动再执行
  

调试

• 点击vscode的调试，关联到lanuch.json文件，弹出一个名为扩展开发主机的窗口，这个窗口就是临时拥有这个插件的调试窗口。

代码片断

• 在package.json的contributes能够自定义本身的snippets，language表明在使用何种语言解析这种文件的时候代码片断才会生效

//package.json
"contributes": {
    "snippets": [
        {
            "language": "html",
            "path": "./src/snippets/html.json"
        },
        {
            "language": "vue",
            "path": "./src/snippets/fes.json"
        }
    ]
}

• 关联的snippets主要是prefix、body、description三个属性，prefix是指在vscode输入的关键字能够输出body里面的内容。

//fes.json
"FesData": {
    "prefix": "FesData",
    "body": ["FesData: function(){\n\treturn {\n\t$0\n\t}\n}"],
    "description": "Fes page data"
  },

• 若是想要在vue文件的template标签中使用snippets，language是vue-html，若是是script标签中使用language必需要有JavaScript这一项，language只写vue在这些标签是不生效的。

预览

• 发布前能够经过将文件放进vscode的extension文件夹中，就能够本地预览和使用了。

发布

• 在Visual Studio Team Services 建立一个帐号
• 根据帐号的名字访问主页，例如个人名字是bingou-ms，主页连接就是https://bingou-ms.visualstudi...
• 点击右上角的我的信息security

• 点击add，这里交互真的很难让人一眼看出这个是个按钮，
  

• 确认后会有token显示，可是它只显示一次，务必要保留，以后命令行操做会使用到

  1. npm install vsce -g
  2. vsce create-publisher (name)
  3. vsce login (publisher name)
  4. vsce publish (version)
• 以后的发布只要执行第四步就能够

其余

• publish的插件的readme.md文件就是安装详情页的详细信息内容，可是必须在package.json中写相关的repository
• FesHelper小星星走一走