一、前言 3 t& |/ o0 [' X# `! h a; a 本文为vscode插件——code snippets开发的踩坑笔记,旨在提供一个快捷有效的方式打造一款自己的vscode插件。上手不难,但是就是坑比较多,为了避免更多人踩坑,于是写文避坑。本文针对新手,楼主也是花了半天时间上手去踩坑的。文末有github仓库地址,码友们可以直接clone下来当作以后code snippets插件的模板。 ) g. X: G6 R9 N p3 H二、环境准备$ `4 }4 M( g/ @, }4 i F
node
npm
yeoman sudo npm i yo -g
gernerator-code sudo npm i gernerator-code -g ) u% t, n0 F0 W' T# M6 S+ }( N
三、开发者账号申请 " x! j9 \! X" }% k 点击 Visual Studio Team Services,点击最上方立即注册,注册自己的账号,可以用GitHub账号直接登录。8 y3 L( n C ?; W* U2 D! B
1.注册并登录 Azure DevOps。* x @) c0 m( ~) L$ O+ O
2.选择或者创建一个组织(new organization)。 7 x" ~! s1 l5 I. `9 s- F% P J3.在该组织下创建一个项目(new project)。3 X, H x: f9 E* M
以上三步都是为了获取开发者(publisher)的token,获取token如下图:$ N8 D1 a! R, o
8 ]* j( A& I( m2 K! [+ K& a
4. 点击 New Token,注意这里创建token一定要下拉选择 all accessible organizations,然后点击右下角的 Show all scopes 找到 Marketplace 选择 Manage。 $ L5 ]" P. K. }* r / p* c& R0 r8 @- m0 c5. 注册vscode插件开发者(publisher):点击此处。注册保证name和id一致,并且只需要填写这两个就可以了。! h- s4 }0 M4 o+ j 三、项目搭建 / }! \4 l. |# D1、项目初始化. h9 S0 @0 F5 O& Q, s' `2 F
终端输入 yo code。
选项如下设置:language选择javascript,名称就是你扩展的名称。) A2 P# A; G8 S6 K' O' }
! O! V( G' G; B! A* Q
2、项目改造; d& S6 N7 n% M
将项目文件夹yc-charts-code-snippets(你的扩展名字的文件夹)拖到vscode中打开。做以下改造:0 E- W. ]$ p! d- p- m. z! R% V) H
1.将package.json改造成以下模样:9 p3 _& H# Y7 F
上面的代码片段是我自己封装的组件用法的示例代码。${1:treeConfig} 表示的是tab键会跳转的语句,数字代表跳转的顺序,注意:冒号后面没有空格。2 r! N# Y7 B% q, e 四、调试 0 C6 B/ m2 S+ I, N e 单纯的开发代码片段的话测试和调试都非常简单:1 J) v% B4 q) V: X4 z- l
首先先自定义全局的code snippet。, L8 v9 H0 Y! ^* Y0 U `! [
- ?5 V2 K- ^$ S/ `
选择新建全局代码片段文件。 M8 N; _, X8 V# @4 E) p Y
" c# I' _3 {; P, g7 C% \4 i
创建完文件名后会得到如下示例代码,放开example下面的代码即可测试。2 u1 U! e, w) n0 |
: ^+ u E6 s7 V) s+ j. a# l
command + shift + D 打开调试模式。
点击 Extension 旁边的绿色三角形,打开扩展开发宿主。
在扩展开发宿主中创建适合的文件类型如:test.js。
测试自己的写的 prefix 即可。这里我生成的代码片段是自己封装的组件的示例代码。 8 a# r* v _5 W# i
7 m( c. l0 J. u7 [
生成的代码片段如下:) i0 }1 i( t+ n P, P$ z6 Z$ Z