一、前言 : O( m' N S8 c! V2 P" K 本文为vscode插件——code snippets开发的踩坑笔记,旨在提供一个快捷有效的方式打造一款自己的vscode插件。上手不难,但是就是坑比较多,为了避免更多人踩坑,于是写文避坑。本文针对新手,楼主也是花了半天时间上手去踩坑的。文末有github仓库地址,码友们可以直接clone下来当作以后code snippets插件的模板。! n. O8 a. b9 V. |- ^8 n 二、环境准备, r% r" e0 }- N$ ^0 S x+ T% @; A
node
npm
yeoman sudo npm i yo -g
gernerator-code sudo npm i gernerator-code -g * R% K5 v% d/ ^0 K A
三、开发者账号申请 I4 ^) D% e3 M% H 点击 Visual Studio Team Services,点击最上方立即注册,注册自己的账号,可以用GitHub账号直接登录。 . {( k6 P6 r7 D4 T e6 J& k1.注册并登录 Azure DevOps。 4 q! H7 A) I. Y( d2.选择或者创建一个组织(new organization)。& d9 I! Q+ k+ X; t0 M& b; Q! f
3.在该组织下创建一个项目(new project)。3 g# [( K `- n) C+ Q, ~ |. `
以上三步都是为了获取开发者(publisher)的token,获取token如下图: D5 @6 {! o0 R* ~8 o
& [( X3 p0 \4 a: P, J
4. 点击 New Token,注意这里创建token一定要下拉选择 all accessible organizations,然后点击右下角的 Show all scopes 找到 Marketplace 选择 Manage。. r" P" l: L* C; h: [7 D p1 H0 H) S9 x, q5. 注册vscode插件开发者(publisher):点击此处。注册保证name和id一致,并且只需要填写这两个就可以了。 4 q8 y2 z1 P( N) M( V三、项目搭建* Z$ {9 F6 p7 L+ a- ]# q* M& \
1、项目初始化 - h" P, e" h5 D, K( ]" B$ V% Q( C
终端输入 yo code。
选项如下设置:language选择javascript,名称就是你扩展的名称。( @& ]5 ?' N1 {8 [: }9 g2 V
' j% p: n3 p0 a \, A! k" Q2、项目改造) U2 J! S3 k' v0 m/ N- d7 Z( K, U
将项目文件夹yc-charts-code-snippets(你的扩展名字的文件夹)拖到vscode中打开。做以下改造:" O8 u' O' m7 `7 ]
1.将package.json改造成以下模样: . B. y X( q! v$ r& ]: S