一、前言0 H. {6 O, q; l0 P, R3 ^
本文为vscode插件——code snippets开发的踩坑笔记,旨在提供一个快捷有效的方式打造一款自己的vscode插件。上手不难,但是就是坑比较多,为了避免更多人踩坑,于是写文避坑。本文针对新手,楼主也是花了半天时间上手去踩坑的。文末有github仓库地址,码友们可以直接clone下来当作以后code snippets插件的模板。4 d+ H# |2 I |' A* R 二、环境准备6 m7 \( F, q) v
node
npm
yeoman sudo npm i yo -g
gernerator-code sudo npm i gernerator-code -g ; Z' m2 P& M, ]" n7 q
三、开发者账号申请 ! K5 Z2 F& X, {2 O! S7 O. Y 点击 Visual Studio Team Services,点击最上方立即注册,注册自己的账号,可以用GitHub账号直接登录。 ) G/ o+ L3 t4 k, i2 H3 J7 f1.注册并登录 Azure DevOps。 5 r4 a1 m# j# m% N2.选择或者创建一个组织(new organization)。 5 U( H) Z3 P( F; Z3.在该组织下创建一个项目(new project)。: `: A L X' r# |0 _) k
以上三步都是为了获取开发者(publisher)的token,获取token如下图: 6 d& x6 I6 M L Y; S4 @ P
- y0 ^& a0 M8 n7 C1 ^
4. 点击 New Token,注意这里创建token一定要下拉选择 all accessible organizations,然后点击右下角的 Show all scopes 找到 Marketplace 选择 Manage。 ) U* s. s7 z) M- @6 j) m& f" r B8 y
5 O) d; I" L N7 Z8 B! B- J1 z. m
5. 注册vscode插件开发者(publisher):点击此处。注册保证name和id一致,并且只需要填写这两个就可以了。8 ?( A- p" l' T 三、项目搭建7 Y6 N0 l) T4 _1 i3 q; T4 a0 c
1、项目初始化& H: o9 _5 m: [4 z& ^4 ^3 M" l
终端输入 yo code。
选项如下设置:language选择javascript,名称就是你扩展的名称。 $ P# m* b* i$ s+ Z. c
8 J- ^) m4 e0 L
2、项目改造4 _: W+ l7 \% t' G
将项目文件夹yc-charts-code-snippets(你的扩展名字的文件夹)拖到vscode中打开。做以下改造: 1 q' G& h! C, \2 u2 W1.将package.json改造成以下模样:; `8 C: w8 M+ g: W! E# V