一、前言& ]* A4 w) {. p5 X x0 h
本文为vscode插件——code snippets开发的踩坑笔记,旨在提供一个快捷有效的方式打造一款自己的vscode插件。上手不难,但是就是坑比较多,为了避免更多人踩坑,于是写文避坑。本文针对新手,楼主也是花了半天时间上手去踩坑的。文末有github仓库地址,码友们可以直接clone下来当作以后code snippets插件的模板。3 h% K6 u/ }* X 二、环境准备 $ i0 p. \9 N+ o6 j7 {- k. A7 D
node
npm
yeoman sudo npm i yo -g
gernerator-code sudo npm i gernerator-code -g 6 g, S q4 d8 m$ T* k# O6 p
三、开发者账号申请 G, Y6 J0 Y4 K! v2 s# w
点击 Visual Studio Team Services,点击最上方立即注册,注册自己的账号,可以用GitHub账号直接登录。 # L, U4 D+ u: y& P: l) A4 I; z1.注册并登录 Azure DevOps。 . H" o; w' z# Q* K& l7 u* u2.选择或者创建一个组织(new organization)。# d4 L* @3 b' K# e$ a* w
3.在该组织下创建一个项目(new project)。$ [4 M( }: \9 N7 n; R
以上三步都是为了获取开发者(publisher)的token,获取token如下图:0 M% `4 L. N# D- @! `0 @ g% o% S) r , |$ n: H( [8 M8 j% e3 T' {4. 点击 New Token,注意这里创建token一定要下拉选择 all accessible organizations,然后点击右下角的 Show all scopes 找到 Marketplace 选择 Manage。$ K1 Y0 C' R9 c! S ! _. C; h0 y* c9 g5. 注册vscode插件开发者(publisher):点击此处。注册保证name和id一致,并且只需要填写这两个就可以了。* A5 q7 J* r* u$ |8 ?* v ?2 t( e 三、项目搭建 . J+ W t) S. y! S) O. q1、项目初始化 ' [: S) _; h% s
终端输入 yo code。
选项如下设置:language选择javascript,名称就是你扩展的名称。 0 d0 P/ ~# l" ?7 _8 V
" k( e- i+ q* s
2、项目改造% y3 h6 t( f1 c7 X& m l
将项目文件夹yc-charts-code-snippets(你的扩展名字的文件夹)拖到vscode中打开。做以下改造: $ t# r, s l, v! k$ R4 @- P1.将package.json改造成以下模样:8 x! Z4 Z* z2 c* L- e: U. D# h