一、前言
( [, B( @; V- d: U 本文为vscode插件——code snippets开发的踩坑笔记,旨在提供一个快捷有效的方式打造一款自己的vscode插件。上手不难,但是就是坑比较多,为了避免更多人踩坑,于是写文避坑。本文针对新手,楼主也是花了半天时间上手去踩坑的。文末有github仓库地址,码友们可以直接clone下来当作以后code snippets插件的模板。2 P9 F2 }; m, u: y
二、环境准备
: d( F( X. \/ J# E5 v7 ~" z3 m- node
- npm
- yeoman sudo npm i yo -g
- gernerator-code sudo npm i gernerator-code -g
, u5 F+ t$ s/ Z% n 三、开发者账号申请
& r. X$ H g4 T0 q 点击 Visual Studio Team Services,点击最上方立即注册,注册自己的账号,可以用GitHub账号直接登录。7 s! y/ x2 r7 ]/ @! H: z
1.注册并登录 Azure DevOps。8 |- y" W( U6 g6 Q) ]) W. N3 Q: g
2.选择或者创建一个组织(new organization)。" R: z1 k! n) g4 o
3.在该组织下创建一个项目(new project)。
4 [$ Y" S5 a6 R T# v2 d! U 以上三步都是为了获取开发者(publisher)的token,获取token如下图:
) s& w' w3 r' N
# I* T5 D9 Q6 {, q4. 点击 New Token,注意这里创建token一定要下拉选择 all accessible organizations,然后点击右下角的 Show all scopes 找到 Marketplace 选择 Manage。 P; I h# d1 D
& j4 @8 C6 R; O' a5. 注册vscode插件开发者(publisher):点击此处。注册保证name和id一致,并且只需要填写这两个就可以了。/ t9 F! _4 `2 g5 m* d
三、项目搭建
; J- {' e; c, L7 P% m5 d1、项目初始化: e' `0 V. \9 J8 ?; y" {
- 终端输入 yo code。
- 选项如下设置:language选择javascript,名称就是你扩展的名称。
% E5 \9 @- | T' L; S* j% |' @
2 D! M1 U. W3 q& Q$ i% T
2、项目改造
* J4 F4 [. ^! d q$ H 将项目文件夹yc-charts-code-snippets(你的扩展名字的文件夹)拖到vscode中打开。做以下改造: u0 m8 Y" S2 G* i) W
1.将package.json改造成以下模样:
# y& G8 k: K( S) q( j{
"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包会失败。
+ \( X% p$ ?3 F1 D3、编码( ]" K( Q& B8 i5 H% P
这里的编码其实并不是写js,而是写json配置,在哪里写呢?在项目的 snippets 文件夹中的 snippets.code-snippets 文件中写入:
7 g0 K* b. y# W4 V- y& g/ L{
"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键会跳转的语句,数字代表跳转的顺序,注意:冒号后面没有空格。
4 k- l1 m9 N: s9 h四、调试& s# F' i3 ~, j
单纯的开发代码片段的话测试和调试都非常简单:$ Q6 M# {3 }# E8 p" T
- 首先先自定义全局的code snippet。
2 E; x [% v, e% Q( R8 J0 c( K
w& L' k3 ~; R$ M+ m
- 选择新建全局代码片段文件。; L% `6 b+ ]9 r7 @4 S/ s* z
1 P, e* L6 S( N6 J: n
- 创建完文件名后会得到如下示例代码,放开example下面的代码即可测试。+ V: i4 Y L7 n1 b0 |, Q4 k
4 a1 m% Q! `9 Z) z" d* r. x
- command + shift + D 打开调试模式。
- 点击 Extension 旁边的绿色三角形,打开扩展开发宿主。
- 在扩展开发宿主中创建适合的文件类型如:test.js。
- 测试自己的写的 prefix 即可。这里我生成的代码片段是自己封装的组件的示例代码。% C! y) ?6 ^6 C$ {8 g+ k8 s1 t: R
) |/ q0 K1 s2 p u: P8 P
生成的代码片段如下:- |4 b+ r+ a, s0 ~* r) E
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; 五、打包" Q) w2 j% m2 z. \+ R* T: L2 w/ p
终端运行命令 vsce package 之后会生成一个打包好的二进制文件。4 x% p4 I/ g* o
六、发布
2 z, O( v% R5 c* k# p 终端运行命令 vsce publish,命令运行完之后需要等待几分钟,之后你注册账号的邮箱会收到一封发布成功的邮件,那么恭喜你成功发布了一款vscode插件!
, E+ t6 i1 {1 i( l7 t2 G
! }% l. h$ X* k' h8 F 点击上图标记的url可以看到自己插件的一个访问和下载情况的统计图,如果是404请耐心等待几分钟哦~$ c; H, e% P0 T, N
8 q2 v# x% Z3 [9 H, a7 ?
七、结语
8 |7 q+ K0 u" \/ I6 Y vscode的code snippets插件是最容易实现的一款插件,对于入门的同学来说是一个很好的上手例子。可以看到其实并没有什么编码工作,但是确实很多坑在里面。写这篇文章的目的就是让更少的人再去踩坑,希望对码友们有帮助~。本文项目github仓库:点击此处。 |