【VS CODE】发布代码片段的方法

官方示例：https://code.visualstudio.com/api/language-extensions/snippet-guide

包含一个GitHub上的代码片段仓库

1、准备代码片段文件  test_vsc.json 而不是.code-snippets这个后缀的文件

2、本地建立代码库

　　test_VSC

　　包含.git文件夹和snippets文件夹，代码片段文件放在snippets文件夹中。

3、win+r 运行 “CMD” 定位到代码库路径

4、执行初始化package.json命令

npm inti

5、输入扩展包名（这里要注意，包名只能如下范围）

String does not match the pattern of "^(?:@[a-z0-9-*~][a-z0-9-*._~]*/)?[a-z0-9-~][a-z0-9-._~]*$".

　　不支持大写，不支持下划线

6、package.json的格式如下

{
  "name": "test-vsc",
  "version": "0.0.2",
  "description": "test publish",
  "publisher": "TracyPan",
  "main": "index.js",
  "engines": {
    "vscode": "^1.18.0"
  },
  "keywords": [
    "fanuc picture"
  ],
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/BFMdeveloper/test_VSC1.git"
  },
  "author": "panxu",
  "license": "ISC",
  "categories": [
    "Snippets",
    "Other"
  ],
  "contributes": {
    "snippets": [
      {
        "language": "ruby",
        "path": "./snippets/ruby.json"
      }
    ]
  }
}

　　其中publisher的名字必须与VS MARKET上注册的名字完全一致，否则会提示

 ERROR  Missing publisher name. Learn more: https://code.visualstudio.com/api/working-with-extensions/publishing-extension#publishing-extensions

　　而如果包的名字有非法字符，会提示

 ERROR  Invalid extension name 'test_VSC'

　　除了初始化的package.json文件内容，还需要增加这样几个关键词

　　publisher

　　engines

　　下面是一个完整的带注释的package.json文件内容

{
  "name": "vscode-vue-ts-snippet", // 包名
  "version": "0.0.1", // 版本h号
  "description": "Vue with Typescript snippets", // 包的描述
  "icon": "icon/icon.png", // 显示插件的图标
  "publisher": "crperlin", // vscode 插件自有的属性,发布人
  "repository": { // 包的存放仓库
    "type": "git", // 类型 git
    "url":"https://github.com/crper/vscode-vs-ts-snippets.git" // 访问链接
  },
  "galleryBanner": { // 横幅描述
    "color": "#0273D4",
    "theme": "dark"
  },
  "scripts": { // 这里没用到,一般用来写拓展才用到,跑测试什么的
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": ["vue","typescript-vue","typescript","vue-snippets","vue-ts-snippets","vue-typescript-snippets","vue2+"],  // 关键字,就是可一个人去搜索的
  "engines": { // 限制 vscode 的版本
    "vscode": "^1.18.0"
  },
  "author":{ // 不言而喻,发布人的一些基础信息
    "name": "crper(QunHe Lin)",
    "email": "[email protected]",
    "url": "https://github.com/crper"
  },
  "categories": [ // 插件的归类
    "Snippets",
    "Other"
  ],
  "contributes":{ // 这里就是索引 snippet 的,如何让插件知道你共享的东西
    "snippets": [
      {
        "language": "vue", // 针对.vue 格式的 snippets
        "path":"./snippets/vue.json"
      },
      {
        "language": "typescript", // 针对.typescript 的 snippets
        "path":"./snippets/vue-typescript.json"
      },
      {
        "language": "javascript", // 针对.js 的 snippets
        "path":"./snippets/vue-typescript.json"
      }
    ]
  },
  "bugs": {  // 一般就是反馈 bug,issue 的路径
    "url": "https://github.com/crper/vscode-vs-ts-snippets/issues"
  },
  "homepage": "https://github.com/crper/vscode-vs-ts-snippets/readme", // 包的主页,就是放在哪里
  "license": "SEE LICENSE IN LICENSE" // 包使用的协议!
}

 

7、将准备好的代码片段库git到github上

Panxu@godofwar MINGW64 ~/learngit/test_VSC (master)
$ git push origin master
Enumerating objects: 9, done.
Counting objects: 100% (9/9), done.
Delta compression using up to 4 threads
Compressing objects: 100% (5/5), done.
Writing objects: 100% (5/5), 487 bytes | 162.00 KiB/s, done.
Total 5 (delta 2), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (2/2), completed with 2 local objects.
To github.com:BFMdeveloper/test_VSC1
   cb00a8f..180f27a  master -> master

 

　　

8、在代码库路径下，cmd中执行vsce publish命令

C:\Users\Panxu\learngit\test_VSC>vsce publish
Publishing TracyPan.test[email protected]...
 DONE  Published TracyPan.test[email protected]
Your extension will live at https://marketplace.visualstudio.com/items?itemName=TracyPan.test-vsc (might take a few minutes for it to show up).

　　发布成功

9、如果需要版本号自动更新，用vsce publish patch命令

C:\Users\Panxu\learngit\test_VSC>vsce publish patch
v0.0.2
Publishing TracyPan.test[email protected]...
 DONE  Published TracyPan.test[email protected]
Your extension will live at https://marketplace.visualstudio.com/items?itemName=TracyPan.test-vsc (might take a few minutes for it to show up).

 

10、等待几分钟，就能从VS MARKET上搜到我们上传的文件了

 -------------------------------------------------------------------------------------------

转载大佬的一偏VSCode插件开发教程

https://www.cnblogs.com/liuxianan/p/vscode-plugin-overview.html