一、前言 4 L I( L0 r* ?. T 本文为vscode插件——code snippets开发的踩坑笔记,旨在提供一个快捷有效的方式打造一款自己的vscode插件。上手不难,但是就是坑比较多,为了避免更多人踩坑,于是写文避坑。本文针对新手,楼主也是花了半天时间上手去踩坑的。文末有github仓库地址,码友们可以直接clone下来当作以后code snippets插件的模板。+ J6 [- l, o% B6 r3 q0 B. b 二、环境准备 ; w0 ]+ i1 O# e! T. l* W _6 S
node
npm
yeoman sudo npm i yo -g
gernerator-code sudo npm i gernerator-code -g: u% Z9 Z! k4 D6 D
三、开发者账号申请 ; u5 e1 p2 I( | 点击 Visual Studio Team Services,点击最上方立即注册,注册自己的账号,可以用GitHub账号直接登录。4 Q' s6 S/ y& c# X
1.注册并登录 Azure DevOps。 + Z$ |" m5 f/ e* W2.选择或者创建一个组织(new organization)。6 f7 u U g& q9 k9 @
3.在该组织下创建一个项目(new project)。 7 ^$ u( M% I" ^5 d 以上三步都是为了获取开发者(publisher)的token,获取token如下图:4 Y: e0 H J- V/ {6 Z
( e; N6 h* J! z$ A2 q( \
4. 点击 New Token,注意这里创建token一定要下拉选择 all accessible organizations,然后点击右下角的 Show all scopes 找到 Marketplace 选择 Manage。" u: O* P* p" d5 j2 Z/ x+ l4 E 5 V* K- h* N) V. w& J1 c7 c, s5. 注册vscode插件开发者(publisher):点击此处。注册保证name和id一致,并且只需要填写这两个就可以了。 1 l9 V# L/ e \三、项目搭建 " d4 e5 h) D6 s1、项目初始化2 g2 g0 S. G, q5 t
终端输入 yo code。
选项如下设置:language选择javascript,名称就是你扩展的名称。5 _5 N& T" l+ Y5 z' D" a
! c, u, C. x5 P0 G
2、项目改造9 d0 L/ y0 H4 S4 s" I8 X- }/ X
将项目文件夹yc-charts-code-snippets(你的扩展名字的文件夹)拖到vscode中打开。做以下改造: j1 o9 W; t$ v" R1.将package.json改造成以下模样: , `- a9 \% {/ E* z/ L* r2 @' M
上面的代码片段是我自己封装的组件用法的示例代码。${1:treeConfig} 表示的是tab键会跳转的语句,数字代表跳转的顺序,注意:冒号后面没有空格。( ^) I, U, C) `: D' x 四、调试 2 g S# F- ^+ X4 F( \/ @; l1 J 单纯的开发代码片段的话测试和调试都非常简单:2 H! v) D( M# \8 y# q* L. P8 g
首先先自定义全局的code snippet。# c- o. V$ |+ x# L* w
0 V" K4 J: Y1 X4 g2 @+ c6 G
选择新建全局代码片段文件。 # M3 j$ w8 e8 V0 h% i7 N
& U- @. ?+ |' A9 ]
创建完文件名后会得到如下示例代码,放开example下面的代码即可测试。 $ w Z' e! o" y9 ?1 B