一、前言
$ Q, _( s) A$ L: Y 本文为vscode插件——code snippets开发的踩坑笔记,旨在提供一个快捷有效的方式打造一款自己的vscode插件。上手不难,但是就是坑比较多,为了避免更多人踩坑,于是写文避坑。本文针对新手,楼主也是花了半天时间上手去踩坑的。文末有github仓库地址,码友们可以直接clone下来当作以后code snippets插件的模板。5 [2 N+ O4 z8 z- M$ H5 f' V! i
二、环境准备
+ L: V; T' M9 K# z% T4 j- node
- npm
- yeoman sudo npm i yo -g
- gernerator-code sudo npm i gernerator-code -g
5 C, o1 v' Q/ Y$ \, e6 O 三、开发者账号申请. e$ Q& u5 ] S; V6 h
点击 Visual Studio Team Services,点击最上方立即注册,注册自己的账号,可以用GitHub账号直接登录。; D3 @6 L0 I1 p$ c1 T
1.注册并登录 Azure DevOps。- K" |8 M/ r [+ ?4 X: Z/ r
2.选择或者创建一个组织(new organization)。1 I% O1 P8 b2 [, V
3.在该组织下创建一个项目(new project)。+ W' A0 n, j, x8 w( `5 _
以上三步都是为了获取开发者(publisher)的token,获取token如下图:4 e$ H2 L# S2 _; W8 j5 d; u
) D0 d! D: r9 \3 D% Q4. 点击 New Token,注意这里创建token一定要下拉选择 all accessible organizations,然后点击右下角的 Show all scopes 找到 Marketplace 选择 Manage。6 M7 h( J1 D& e7 k1 Q
6 [2 F& [4 y6 D6 {5. 注册vscode插件开发者(publisher):点击此处。注册保证name和id一致,并且只需要填写这两个就可以了。 x' [, e" k- [. X! K- L
三、项目搭建
1 c( V2 ]" S4 o+ R/ u4 d: q: `1、项目初始化 }% S9 Z4 b" C( ]8 {
- 终端输入 yo code。
- 选项如下设置:language选择javascript,名称就是你扩展的名称。
9 ^0 L: x, {4 m* n4 V
1 n7 @. f/ `2 _% w
2、项目改造
0 W0 P6 F% |% ]3 ` F% L& ~ 将项目文件夹yc-charts-code-snippets(你的扩展名字的文件夹)拖到vscode中打开。做以下改造:& D8 ^% q9 [4 |- y8 w' C) B- X
1.将package.json改造成以下模样:
8 S$ ]$ V) I$ a2 Q9 n) `{
"name": "yc-charts-code-snippets",
"displayName": "yc-charts-code-snippets",
"description": "",
"version": "0.0.1",
// 开发者名称,很重要!!!
"publisher": "yuanchen-ljx",
"engines": {
"vscode": "^1.56.0"
},
"categories": [
"Snippets"
],
"contributes": {
"snippets": [
// 在.js、.jsx、.ts、.tsx文件中智能提示code snippets
{
"language": "javascript",
"path": "./snippets/snippets.code-snippets"
},
{
"language": "javascriptreact",
"path": "./snippets/snippets.code-snippets"
},
{
"language": "typescript",
"path": "./snippets/snippets.code-snippets"
},
{
"language": "typescriptreact",
"path": "./snippets/snippets.code-snippets"
}
]
},
// 仓库地址。很重要!!!
"repository": {
"type": "git",
"url": "https://github.com/ljx94nb/yc-charts-code-snippets.git"
},
// 扩展的介绍的md文档地址,也很重要!!!
"homepage": "https://github.com/ljx94nb/yc-charts-code-snippets/blob/master/README.md"
} 2.修改一下你项目目录中的README.md,无论怎么修改都可以!!!否则生成package包会失败。
7 O# |+ q" Y* A4 L5 L) C* o1 E1 ~3 c3、编码4 d" @; V* K* ?4 E; g! ~' c; G$ ^; F( R
这里的编码其实并不是写js,而是写json配置,在哪里写呢?在项目的 snippets 文件夹中的 snippets.code-snippets 文件中写入:
- r1 e! z0 N" m& h' s) C9 y% d: ~# P, @{
"FormTable": {
"prefix": "ycft",
"body": [
"import React from 'react';",
"import YcCharts from 'xxx';",
"",
"function App() {",
" const ${1:treeConfig} = {",
" // config",
" ${2:primaryColumn}: {},",
" ${3:columnWidth}: 120,",
" ${4:indicators}: [],",
" ${5:leftDimensions}: [],",
" ${6:topDimensions}: [],",
" ${7:topDimensionDataSource}: {},",
" ${8:leftDimensionDataSource}: {},",
" ${9:dataSource}: {},",
" ${10:operatorColumn}: {},",
" ${11:filters}: {},",
" ${12:actions}: [],",
" ${13:downloadCfg}: {},",
" // ${14:onSort}: (colIndex, sortOrder) => {},",
" // ${15:decorateValue}: (indicatorKey, value) => {}",
" };",
"",
" return <YcCharts.FormTable {...${16:treeConfig}} />;",
"}",
"",
"export default App;"
],
"description": "Code snippet for 'yc-charts FormTable'"
}
} 上面的代码片段是我自己封装的组件用法的示例代码。${1:treeConfig} 表示的是tab键会跳转的语句,数字代表跳转的顺序,注意:冒号后面没有空格。
/ ~( P, Q. M$ L1 z4 @四、调试7 Q+ k$ r. E7 _- G" X* s
单纯的开发代码片段的话测试和调试都非常简单:
! D, C, d! p. k; q2 s- 首先先自定义全局的code snippet。
4 ]& V0 l2 U( }2 D: Q. h) z8 f
5 W% G* X$ R+ U2 I# y$ i- 选择新建全局代码片段文件。
/ @) Z- J( q# k5 H0 n( {" x k+ Y
- I0 k0 s+ j7 l9 `1 @
- 创建完文件名后会得到如下示例代码,放开example下面的代码即可测试。- X+ J b* p& j; v5 W
" D# i: ]# |7 A9 W3 O' g6 _1 u- command + shift + D 打开调试模式。
- 点击 Extension 旁边的绿色三角形,打开扩展开发宿主。
- 在扩展开发宿主中创建适合的文件类型如:test.js。
- 测试自己的写的 prefix 即可。这里我生成的代码片段是自己封装的组件的示例代码。1 Q3 O: e( l+ x X
+ ?. v3 F& x! U3 M& c5 F 生成的代码片段如下:9 d% x! w, P6 B! o* w5 h
import React from 'react';
import YcCharts from 'xxx';
function App() {
const treeConfig = {
// config
primaryColumn: {},
columnWidth: 120,
indicators: [],
leftDimensions: [],
topDimensions: [],
topDimensionDataSource: {},
leftDimensionDataSource: {},
dataSource: {},
operatorColumn: {},
filters: {},
actions: [],
downloadCfg: {},
// onSort: (colIndex, sortOrder) => {},
// decorateValue: (indicatorKey, value) => {}
};
return <YcCharts.FormTable {...treeConfig} />;
}
export default App; 五、打包: P6 o! O+ J h; k
终端运行命令 vsce package 之后会生成一个打包好的二进制文件。
; f! e5 d' @% o六、发布% l8 p7 B% z( @5 y4 J e" \ Y6 Q
终端运行命令 vsce publish,命令运行完之后需要等待几分钟,之后你注册账号的邮箱会收到一封发布成功的邮件,那么恭喜你成功发布了一款vscode插件! @5 j' a4 h2 E( G6 L2 p
4 S# Y: F+ |# S$ g 点击上图标记的url可以看到自己插件的一个访问和下载情况的统计图,如果是404请耐心等待几分钟哦~
" C# u9 a3 S) ]. s/ L3 W! J
+ M" J$ Z2 k# L! r, S6 I" |七、结语0 u+ T3 M/ ~$ _
vscode的code snippets插件是最容易实现的一款插件,对于入门的同学来说是一个很好的上手例子。可以看到其实并没有什么编码工作,但是确实很多坑在里面。写这篇文章的目的就是让更少的人再去踩坑,希望对码友们有帮助~。本文项目github仓库:点击此处。 |