一、前言+ N3 t: ?6 j* C
本文为vscode插件——code snippets开发的踩坑笔记,旨在提供一个快捷有效的方式打造一款自己的vscode插件。上手不难,但是就是坑比较多,为了避免更多人踩坑,于是写文避坑。本文针对新手,楼主也是花了半天时间上手去踩坑的。文末有github仓库地址,码友们可以直接clone下来当作以后code snippets插件的模板。 2 V. E" u, P q7 ^二、环境准备 5 m- ~% `) ?. Q+ I
node
npm
yeoman sudo npm i yo -g
gernerator-code sudo npm i gernerator-code -g/ }& j. Y( D% n6 g7 I k( O; Z& i
三、开发者账号申请" y7 b4 J. a" V) B- k9 A- w- a
点击 Visual Studio Team Services,点击最上方立即注册,注册自己的账号,可以用GitHub账号直接登录。; b: R3 G3 p& e
1.注册并登录 Azure DevOps。 ! f- s) P4 F( V+ `: K7 V2.选择或者创建一个组织(new organization)。$ ]2 C# y/ E" d- g: J8 |5 |. j6 X
3.在该组织下创建一个项目(new project)。: P- g, _! S G1 V- q# C
以上三步都是为了获取开发者(publisher)的token,获取token如下图: ( w6 w$ G" B( @9 |! B% c % Q0 |: F3 g. i1 O( r& m+ _! Z4. 点击 New Token,注意这里创建token一定要下拉选择 all accessible organizations,然后点击右下角的 Show all scopes 找到 Marketplace 选择 Manage。 0 c! ~, y( ~4 k# H7 x! e% i, E1 A # Z3 n/ I, {+ X2 h$ E5. 注册vscode插件开发者(publisher):点击此处。注册保证name和id一致,并且只需要填写这两个就可以了。 3 Z6 } i g" F% \5 K5 X }: J* W三、项目搭建 8 C( ^; f4 t! `3 s" b$ _1、项目初始化 : ~& q, y' i( P' A0 U3 B
终端输入 yo code。
选项如下设置:language选择javascript,名称就是你扩展的名称。" x3 }' u( M7 d
+ L6 U) u( a2 M# c# v% h
2、项目改造( L; T, _" K& ^ R
将项目文件夹yc-charts-code-snippets(你的扩展名字的文件夹)拖到vscode中打开。做以下改造:; Z o4 K2 |* c! }* W- f
1.将package.json改造成以下模样: - H( Y, u3 B! y