侧边栏壁纸
博主头像
xuesheng博主等级

分享web知识,学习就是取悦自己!

  • 累计撰写 118 篇文章
  • 累计创建 14 个标签
  • 累计收到 3 条评论

目 录CONTENT

文章目录

使用vscode发布插件

xuesheng
2019-05-07 / 0 评论 / 0 点赞 / 282 阅读 / 2,890 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-01-04,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

😵 使用vscode发布插件
😵😵 使用vscode发布插件

当然默认了是安装nodejs跟vscode,这里我略过。
1/有一个微软的账号
2/登录code市场,创造一个团队
3/创建一个 Personal Access token
4/全局安装vsce模块
5/github 新建一个对应的仓库
6/创建项目 package.json版本的书写
7/code snippets 对应的json 文件
8/对应的静态文件等(vsix)
9/发布发布包publish

第一步:创建 微软账号

微软code登陆链接:https://marketplace.visualstudio.com/
注册完账号后,打开自己的个人中心

第二步:创建一个团队

1、选择发布创建!

第三步:创建一个Personal Access token令牌

注意注意: token 令牌要保留, 发布的时候需要用到。

第四步:全局安装 vsce

cmd窗口 使用命令

npm install -g vsce

vsce --help

vsce Options:

-V, --version  output the version number
-h, --help     output usage information
Commands:

ls [options]                         列出实际会发布的文件列表
package [options]                    打包成一个插件
publish [options] [<version>]        发布插件
unpublish [options] [<extensionid>]  插件下架
list <publisher>                     列出某个发布者下所有发布的,需要配置好token 额,不然会提示输入
ls-publishers                        列出所有已知的发布者
create-publisher <publisher>         创建一个新的发布者
delete-publisher <publisher>         删除一个发布者
login <publisher>                    登录一个发布者到发布者列表中
logout <publisher>                   反之,退出发布者

第五步:在github上新建一个仓库

这个就不多说了

github传送门地址 https://github.com/

第六步:项目创建 /package.json版本的书写

项目创建 vscode 团队,为插件开发提供了一个工具。

先全局安装这个,然后执行 yo code 来开始我们的工作。

npm install -g yo generator-code

在完成上面的安装后,可以通过执行命令 yo code

yo code

通过执行上面的命令后 得到如下 输入提示选择

(1)创建哪种类型的扩展?
(2)扩展的名称
(3)扩展项目的名称(项目创建的文件名称用这个)
(4)对这个扩展的描述
(5)是否启用类型检查
(6)是问你要不要创建一个git仓库用于版本管理
(7)使用哪个包管理器(npm & yarn )
(5)以后要发布用到的一名称(和以后再发布时候有一个名字是对应上的)

这几个描述都会在package.json 这个文件里面有对应的属性来表示。

{
    "name": "aa",              //插件扩展名称(对应创建项目时候的输入)
    "displayName": "",
    "description": "",  //插件扩展的描述(对应创建项目时候的输入)
    "version": "0.0.1",
    "publisher": "",       //发布时候的一个名称(对应创建项目时候的输入)
    "engines": {
        "vscode": "^0.10.10"
    },
    "categories": [
        "Other"
    ],
    "activationEvents": [          //这是我们要理解的地方,是触发插件执行一些代码的配置
        "onCommand:extension.sayHello" //这种是通过输入命令来触发执行的
    ],
    "main": "./out/src/extension",  //这个是配置TypeScript编译成js的输出目录
    "contributes": {
        "commands": [{             //title 和 command是一个对应关系的
            "command": "extension.sayHello", //这个是对应上面那个命令触发的,在代码里面也要用到
            "title": "Hello World"   //这个是我们在vscode里面输入的命令
        }]
    },
    "scripts": {                     //是在发布打包,或者其他运行时候,要执行的一些脚本命令
        "vscode:prepublish": "node ./node_modules/vscode/bin/compile",
        "compile": "node ./node_modules/vscode/bin/compile -watch -p ./",
        "postinstall": "node ./node_modules/vscode/bin/install"
    },
    "devDependencies": {           //这是开发的依赖包,如果有其他的依赖包,并要打包的话,需要把dev去掉
        "typescript": "^3.3.1",
				"vscode": "^1.1.28",
				"eslint": "^5.13.0",
				"@types/node": "^10.12.21",
				"@types/mocha": "^2.2.42"
    }
   }
	 

介绍完package.json后,我可以来看看目录。

我们可以来运行一下看看效果如果。我们打开一个vscode并把我们的目录自己拖拉到vscode的界面上,然后选择调试窗口,并点击开始调试

8、对应的静态文件等(vsix)

本地打包对应的vsix ,使用之前安装的vsce执行如下命令:

vsce package

9、发布发布包publish

使用vsce以下命令创建新的发布者

vsce create-publisher your-publisher-name

your-publisher-name必须是字母数字下划线,这是全网唯一的账号,然后会依次要求输入昵称、邮箱、令牌:

创建成功后会默认登录这个账号,接下来你可以直接发布了

发布vsix,使用命令

vsce publish
0
博主关闭了所有页面的评论