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

vscode插件开发,发布

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

开发插件时的准备

  • 安装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 国际 许可协议,如需转载,请注明出处

评论

  •  
  • 使用git hooks(post-receive)实现简单的远程自动部署

    使用git hooks(post-receive)实现简单的远程自动部署

    发布:2019-06-05 阅读(438)

  • linux下设置git(pull,push等)免密码操作

    linux下,设置git免密码操作

    发布:2019-06-04 阅读(417)

  • 批量转换LF和CRLF的小技巧

    做跨平台开发移植的时候,最常见的问题就是不同操作系统的换行不同(例如,Windows 上是 CRLF,而 Linux 上是 LF,MacOS 以前是 CR,现在也是 LF),如果不注意的话,可能会导致编译的时候报诡异的错误,虽然说有些优秀的文本工具(notepad++, vscode 等)可以自动转换,但是它们都没有提供批量转换的方法,所以一旦遇到有成百上千个的文件需要转换,那么一个个手动去转明显效率低下。虽然网上提到批量转换的文章很多,但是感觉都没有介绍清楚,可能大神们都觉得太简单了吧。。。为了同学们能够和我一样少走弯路,我就把我的转换过程详细记录下来。

    发布:2019-05-24 阅读(671)

  • 源文件名长度大于文件系统支持的长度。请尝试将其移动到具有较短路径名称的位置,或者在执行此操作前尝试将其重命名为较短的名称

    源文件名长度大于文件系统支持的长度。请尝试将其移动到具有较短路径名称的位置,或者在执行此操作前尝试将其重命名为较短的名称

    发布:2019-05-07 阅读(534)

  • vscode插件开发,发布

    vscode插件开发过程

    发布:2019-03-27 阅读(667)

  • 什么是第一输入延迟(First Input Delay)

    第一输入延迟(FID)测量用户首次与您的站点交互时的时间(即,当他们单击链接,点击按钮或使用自定义的JavaScript驱动控件时)到浏览器实际能够的时间回应这种互动。

    发布:2019-03-07 阅读(919)

  • vs code非常实用的插件

    推荐一些vs code开发中,非常实用的插件

    发布:2019-03-04 阅读(633)

  • 查看浏览器、操作系统、分辨率等使用份额~

    浏览器、操作系统、分辨率等使用份额~

    发布:2019-02-25 阅读(506)

  • 使用MuMu模拟器和fiddler抓包app

    是不是觉得用手机调试app h5页面很麻烦?是不是不方便抓APP的包?在电脑上可以抓吗,可以,用mumu+fiddler就走向人生巅峰了。。。

    发布:2019-01-24 阅读(499)

  • ESLint的使用

    eslint使用注意事项

    发布:2019-01-03 阅读(592)

  • 'define' is not defined.'$' is not defined.

    eslint环境变量设置

    发布:2019-01-02 阅读(868)

  • windows下利用nvm安装node,管理node版本

    nvm是node安装及版本管理工具

    发布:2018-12-29 阅读(681)

  • git cherry-pick使用指南

    **git cherry-pick**可以选择某一个分支中的一个或几个commit(s)来进行操作。例如,假设我们有个稳定版本的分支,叫v2.0,另外还有个开发版本的分支v3.0,我们不能直接把两个分支合并,这样会导致稳定版本混乱,但是又想增加一个v3.0中的功能到v2.0中,这里就可以使用cherry-pick了,其实也就是对已经存在的commit 进行再次提交.

    发布:2018-12-28 阅读(613)

  • 找回Git中丢失的Commit(git如何撤消reset操作)

    在使用Git的过程中,有时候会因为一些误操作,比如reset、rebase、merge等。特别是在Commit之后又执行了`git reset --hard HEAD`强制回滚本地记录以及文件到服务器版本,导致本地做的修改全部恢复到Git当前分支的服务器版本,同时自己的Commmit记录也消失了。碰到这种情况,不要慌,我们在Git上做的任何操作都只是在原来之前的操作上做修改,并且会被记录下来保存,也就是说无论你做了什么,对于Git来说都可以进行回滚操作。

    发布:2018-12-28 阅读(553)

  • eslint:no-case-declarations

    该规则禁止词法声明(`let`,`const`,`function`和`class`在)`case/ default`条款。原因是词法声明在整个开关块中是可见的,但只有在分配时才会被初始化,这只有在达到定义它的情况下才会发生。

    发布:2018-12-28 阅读(595)

  • eslint:no-restricted-globals

    如果您希望通过启用环境来允许一组全局变量,但仍希望禁止其中某些变量,则禁止使用特定的全局变量非常有用。 例如,早期的Internet Explorer版本将当前的DOM事件暴露为全局变量 event,但是长期以来,使用此变量一直被认为是一种不好的做法。限制此操作将确保在浏览器代码中不使用此变量。

    发布:2018-12-28 阅读(693)

  • git bisect 命令教程

    它的原理很简单,就是将代码提交的历史,按照两分法不断缩小定位。所谓&amp;quot;两分法&amp;quot;,就是将代码历史一分为二,确定问题出在前半部分,还是后半部分,不断执行这个过程,直到范围缩小到某一次代码提交。

    发布:2018-12-27 阅读(620)

  • git输入不显示,只有光标在闪的问题

    当在git操作log,如`git log`后,然后非正常退出,即使用`CTRL+C`退出,这个时候git输入命令就不会显示了,只有光标,这时怎么办?

    发布:2018-12-26 阅读(648)

  • .gitignore文件配置不生效

    .gitignore文件配置不生效

    发布:2018-12-24 阅读(631)

  • 使用husky、lint-staged、prettier、eslint保持团队代码一致

    团队成员多,虽然制定了代码规范,但也不一定能执行的起来,时间一长,各自的代码规范可能又会有出入了。husky解决了这个问题,让代码检查自动化,流程化,如果不符合规范,则不能commit

    发布:2018-12-24 阅读(1859)

  • Sinon 入门,看这篇文章就够了

    当我们在开发前端项目的时候, 很多时候需要根据后端返回的数据来渲染页面, 我们通常使用AJAX发送请求给服务端。当我们开发后端逻辑的时候有时候需要连接数据库,根据从数据库中得到的数据来执行后续的逻辑代码, 或者其他的依赖, 甚至会更加复杂棘手。这些开发都存在一个共同的局限性, 就是会去依赖别的服务, 需要别的系统的支持。 例如, 如果我们使用Ajax请求网络, 您需要有一个服务器来响应对应的请求。对于数据库, 您需要有一个为测试设置的测试数据库

    发布:2018-12-21 来源:segmentfault

  • 使用tree命令生成目录树(目录结构)

    项目目录树是如何做的?手动写吗,不可能的,很简单就是使用tree命令

    发布:2018-12-20 阅读(1328)

  • git修改当前项目用户

    git修改当前项目用户

    发布:2018-12-11 阅读(525)

  • Git修改最近一次已经提交了的commit及push

    Git修改最近一次已经提交了的commit及push

    发布:2018-12-11 阅读(489)

  • git查看某个文件的修改记录

    git查看某个文件的修改记录

    发布:2018-11-30 阅读(538)

  • Git 分支 - 分支的新建与合并

    发布:2018-11-27

  • ESlint: switch case缩进问题:Expected indentation of 16 spaces but found 20.

    ESlint报错:Expected indentation of 16 spaces but found 20,Expected indentation of 12 spaces but found 16.

    发布:2018-11-08 阅读(1090)

  • ESLint Parsing error: Unexpected token ...

    eslist报错: Unexpected token ...

    发布:2018-11-07 阅读(1047)

  • git diff忽略某些文件,不比较

    通过设置git-diff driver,结合.gitattributes文件,使git diff命令忽略某些目录。例如我们只希望看到比较src目录,不希望看到比较dist目录

    发布:2018-10-26 阅读(719)

  • git教程(写的比较详细,适合初学者,值得阅读)

    学习这本书的目的是让你了解版本控制,并且尽可能快速简单的掌握 Git。但是和另外一些关于介绍版本控制的图书不一样,阅读这本书并不需要你有很专业的 IT 或者电脑背景知识,它也面向那些编程的初学者,软件构架师,或者是项目经理。在技术方面你也不需要有很多专业知识,我们会以循序渐进的方式帮助你来理解版本控制和掌握 Git。

    发布:2018-10-19 来源:git-tower.com

  • git打包成tar\zip文件

    git如何打包增量文件?

    发布:2018-05-30 阅读(645)

  • github push免密码

    github push时免密码

    发布:2015-01-05 阅读(296)

  • Image Optimizer5.0—非常不错的JPG,GIF,PNG,TIFF图片无损压缩工具

    用了很多图片压缩工具,Image Optimizer5.0图片压缩工具,个人觉得是非常不错的,特别是对JPG图片的压缩,真正能达到不改变图片质量,图片大小压缩达到50%以上。图片压缩能达到50%以上,这对网站性能是很大的提升的。

    发布:2013-10-29 阅读(358)