一、前言* B& b. w l" o i% d* @) q
本文为vscode插件——code snippets开发的踩坑笔记,旨在提供一个快捷有效的方式打造一款自己的vscode插件。上手不难,但是就是坑比较多,为了避免更多人踩坑,于是写文避坑。本文针对新手,楼主也是花了半天时间上手去踩坑的。文末有github仓库地址,码友们可以直接clone下来当作以后code snippets插件的模板。 : v3 f! R, C# e二、环境准备 / C, j. a. Q u C# n& f# b1 L
node
npm
yeoman sudo npm i yo -g
gernerator-code sudo npm i gernerator-code -g & n; f p9 I8 d/ v% g5 o) u
三、开发者账号申请6 I ]5 ?) A9 h" h) `. g- o
点击 Visual Studio Team Services,点击最上方立即注册,注册自己的账号,可以用GitHub账号直接登录。0 F7 u! r- K4 w* o4 a1 J4 \
1.注册并登录 Azure DevOps。0 z' D7 [9 ~+ B# A0 D+ H
2.选择或者创建一个组织(new organization)。 $ f) p! @0 U% Y3 S3.在该组织下创建一个项目(new project)。 : X3 p T' `$ P% T$ U, c, ? 以上三步都是为了获取开发者(publisher)的token,获取token如下图:7 h e# g/ ?. D" s
$ E. q: v' a" Y' [& g1 f
4. 点击 New Token,注意这里创建token一定要下拉选择 all accessible organizations,然后点击右下角的 Show all scopes 找到 Marketplace 选择 Manage。 1 }# v2 w1 D$ F " ?8 S: s/ H4 b% H+ ?: Z( }5. 注册vscode插件开发者(publisher):点击此处。注册保证name和id一致,并且只需要填写这两个就可以了。+ \0 u6 ?$ i8 h+ `- D 三、项目搭建$ o, Z( J: H* `4 P
1、项目初始化 & C' {0 ~" Y. n$ V, g
终端输入 yo code。
选项如下设置:language选择javascript,名称就是你扩展的名称。4 t9 o, l! b% A0 d2 V E
/ k8 p% h: E! p0 o4 |8 }6 u# v2、项目改造' X4 `+ {/ _) b e+ E7 `4 ^
将项目文件夹yc-charts-code-snippets(你的扩展名字的文件夹)拖到vscode中打开。做以下改造:) Y/ G, Z2 r. m0 B
1.将package.json改造成以下模样: . \0 `# [2 K" v: e* A4 ~/ B