文章目录
首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他

vscode插件开发,发布

2019年03月27日 发布 阅读(262) 作者:懒炖

开发插件时的准备

  • 安装nodejs,本文nodejs版本10.15.0
  • 安装npm,本文npm版本6.4.1
  • 安装yo

    1. npm install -g yo
  • 安装generator-code

    1. npm install -g generator-code
  • 注册microsoft用户,获取Personal Access Token

    1、注册链接: https://signup.live.com/signup ,live.com 是微软的,别怕,放心注册

    2、注册完成后,登录后,创建project,添加token,并记录这个token,为发布做准备。发布的时候需要这个token(Personal Access Token)
    登录链接: https://azure.microsoft.com/zh-cn/
    登录后访问: https://dev.azure.com/landun/_usersSettings/tokens (landun换成你的用户名)
    也可以点下图的security

    3、添加新token,需要注意两个问题: 一、”Organization”要选择All accessible organizations,二、Expiration (UTC)选择Custom defined,日期设置为1年吧。
    添加token成功后,注意要复制保存一下,这个token只会出现一次。否则需要重新创建


初始化vscode插件

1、项目目录下执行yo code

第一步: ? What type of extension do you want to create? (Use arrow keys)

是初始化插件类型,本例是创建代码高亮的,那我们选择”New Language Support”,还有其他类型,如”TypeScript[New Extension (TypeScript)]”,”Javascript[New Extension (JavaScript)]”,”主题颜色[New Color Theme]”,”代码片断[New Code Snippets]”等

  1. _-----_ ╭──────────────────────────╮
  2. | | Welcome to the Visual
  3. |--(o)--| Studio Code Extension
  4. `---------´ │ generator! │
  5. ( _´U`_ ) ╰──────────────────────────╯
  6. /___A___\ /
  7. | ~ |
  8. __'.___.'__
  9. ´ ` |° ´ Y `
  10. ? What type of extension do you want to create? (Use arrow keys)
  11. > New Extension (TypeScript)
  12. New Extension (JavaScript)
  13. New Color Theme
  14. New Language Support
  15. New Code Snippets
  16. New Keymap
  17. New Extension Pack
  18. (Move up and down to reveal more choices)

第二步:? URL or file to import, or none for new:
这一步直接Enter 就好了, 不用填

第三步:? What's the name of your extension?
填写插件名称

第三步:`? What’s the identifier of your extension?
填写插件标识符

第四步:? What's the description of your extension?
填写插件描述

第五、六步:
填写语言id和name

  1. Enter the id of the language. The id is an identifier and is single, lower-case name such as 'php', 'javascript'
  2. ? Language id: dotjs
  3. Enter the name of the language. The name will be shown in the VS Code editor mode selector.
  4. ? Language name: dotjs
  5. Enter the file extensions of the language. Use commas to separate multiple entries (e.g. .ruby, .rb)

第七步:? File extensions: ()
填写文件后缀

例子代码

  1. D:\project\vscode>yo code
  2. _-----_ ╭──────────────────────────╮
  3. | | Welcome to the Visual
  4. |--(o)--| Studio Code Extension
  5. `---------´ │ generator! │
  6. ( _´U`_ ) ╰──────────────────────────╯
  7. /___A___\ /
  8. | ~ |
  9. __'.___.'__
  10. ´ ` |° ´ Y `
  11. ? What type of extension do you want to create? New Language Support
  12. Enter the URL (http, https) or the file path of the tmLanguage grammar or press ENTER to start with a new grammar.
  13. ? URL or file to import, or none for new:
  14. D:\project\vscode>
  15. D:\project\vscode>yo code
  16. _-----_ ╭──────────────────────────╮
  17. | | Welcome to the Visual
  18. |--(o)--| Studio Code Extension
  19. `---------´ │ generator! │
  20. ( _´U`_ ) ╰──────────────────────────╯
  21. /___A___\ /
  22. | ~ |
  23. __'.___.'__
  24. ´ ` |° ´ Y `
  25. Unable to fetch latest vscode version: Error: connect ETIMEDOUT 104.42.78.153:443
  26. ? What type of extension do you want to create? New Language Support
  27. Enter the URL (http, https) or the file path of the tmLanguage grammar or press ENTER to start with a new grammar.
  28. ? URL or file to import, or none for new:
  29. ? What's the name of your extension? test
  30. ? What's the identifier of your extension? test
  31. ? What's the description of your extension? test
  32. Enter the id of the language. The id is an identifier and is single, lower-case name such as 'php', 'javascript'
  33. ? Language id: dotjs
  34. Enter the name of the language. The name will be shown in the VS Code editor mode selector.
  35. ? Language name: dotjs
  36. Enter the file extensions of the language. Use commas to separate multiple entries (e.g. .ruby, .rb)
  37. ? File extensions: .tpl
  38. Enter the root scope name of the grammar (e.g. source.ruby)
  39. ? Scope names: dotjs
  40. create test\syntaxes\dotjs.tmLanguage.json
  41. create test\.vscode\launch.json
  42. create test\package.json
  43. create test\README.md
  44. create test\CHANGELOG.md
  45. create test\vsc-extension-quickstart.md
  46. create test\language-configuration.json
  47. create test\.vscodeignore
  48. Your extension test has been created!
  49. To start editing with Visual Studio Code, use the following commands:
  50. cd test
  51. code .
  52. Open vsc-extension-quickstart.md inside the new extension for further instructions
  53. on how to modify, test and publish your extension.
  54. For more information, also visit http://code.visualstudio.com and follow us @code.
  55. D:\project\vscode>

代码开发

插件初始化之后 ,剩下的就是针对不对的插件写不同的代码了。这里略过,可参考官网内容

https://code.visualstudio.com/api

相关技巧

  • F5可以直接调试
  • 在新开的vscode中,按Ctrl+R会重新加载
  • 添加配置荐,直接在package.json中设置,如
  1. {
  2. "contributes": {
  3. "languages": [{
  4. "id": "dotjs",
  5. "aliases": ["doT", "dotjs"],
  6. "extensions": [".tpl"],
  7. "configuration": "./dotjs.configuration.json"
  8. }],
  9. "grammars": [{
  10. "language": "dotjs",
  11. "scopeName": "text.html.dotjs",
  12. "path": "./syntaxes/dotjs.tmLanguage"
  13. }],
  14. "configuration": {
  15. "type": "object",
  16. "title": "dotjs configuration",
  17. "properties": {
  18. "dotjs.1Brackets": {
  19. "type": "string",
  20. "default": "<",
  21. "description": "第1标识符, 默认: <"
  22. },
  23. "dotjs.2Brackets": {
  24. "type": "string",
  25. "default": "$",
  26. "description": "第2标识符,默认: $"
  27. },
  28. "dotjs.3Brackets": {
  29. "type": "string",
  30. "default": "$",
  31. "description": "第3标识符,默认: $"
  32. },
  33. "dotjs.4Brackets": {
  34. "type": "string",
  35. "default": ">",
  36. "description": "第3标识符,默认: >"
  37. }
  38. }
  39. }
  40. }
  41. }

插件内容开发好之后 ,设置好了README.mdpackage.json的各个参数后,就可以打包了

插件打包

打包需要安装vsce

  1. npm install -g vsce

打包:

  1. vsce package

插件发布

1、执行vsce create-publisher

这里的tokenPersonal Access Token是在本文最开始要你保存的token,这里就用到了

  1. D:\project\vscode\xndotjs>vsce create-publisher landun
  2. Publisher human-friendly name: (landun)
  3. E-mail: master@imqianduan.com
  4. Personal Access Token: ****************************************************
  5. DONE Created publisher 'landun'.

这一步可能会报的错误,解决办法:回到本文创建token时要注意的两点上

  1. ERROR Failed request: (401)
  1. ERROR Failed Request: Unauthorized(401) - https://marketplace.visualstudio.com/_apis/gallery
  2. ERROR Be sure to use a Personal Access Token which has access to **all accessible accounts**.
  3. See https://code.visualstudio.com/api/working-with-extensions/publishing-extension#publishing-extensions for more information.

2、在项目目录下执行

  1. vsce publish

一般会直接发布成功

参考

https://code.visualstudio.com/api/working-with-extensions/publishing-extension
https://segmentfault.com/a/1190000014758981
https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide
https://juejin.im/entry/5b50509d5188251967307780

版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •