vscode从头开发一个笑话扩展

安装开发工具包

npm install -g yo generator-code

创建工程,选择插件开发

yo code

插件基本目录结构

package.json

activationEvents 声明视图命令和事件命令
contributes 定义了视图和命令的具体信息

"viewsContainers": {
    "activitybar": [{
        "id": "jokeMenu",
        "title": "jokeMenu😉😉😉😉😉😉",
        "icon": "resources/joke.svg"
    }]
}

1
2
3
4
5
6
7

"views": {
    "jokeMenu": [
        {
            "id": "view.joke",
            "name": "Joke"
        }
    ]
},

1
2
3
4
5
6
7
8

"commands": [
    {
       "command": "extension.joke",
        "title": "Joke"
    }
]

1
2
3
4
5
6

extension.ts 扩展入口文件，激活扩展执行的命令

绑定视图

vscode.window.registerTreeDataProvider('view.joke', new JokeDataProvider(service))

注册命令

const showcontent = vscode.commands.registerCommand('joke.click', (hasdId, content) => {})

绑定命令

context.subscriptions.push(showcontent)

创建webview

const panel = vscode.window.createWebviewPanel(
  'Webview', // viewType
  'stockWebview', // 视图标题
  vscode.ViewColumn.One, // 显示在编辑器的哪个部位
  {
    enableScripts: true, // 启用JS，默认禁用
    retainContextWhenHidden: true, // webview被隐藏时保持状态，避免被重置
  },
)

1
2
3
4
5
6
7
8
9

service.ts 提供api服务，就是封装了网络请求

JokeTreeItem 是TreeItem实例

async getJokes(page: number, key: string): Promise<Array<JokeTreeItem>> {
    console.log('fetching  data……');
    const url = 'http://v.juhe.cn/joke/content/text.php';
    const response = await axios.get(url,{
      headers: { 'content-type': 'application/json' },
      params: {
        page: page,
        key: key,
      },
    });

    for(let i=0; i<response.data.result.data.length; i++ ){
        const joke = {
            content:response.data.result.data[i].content,
            hashId:response.data.result.data[i].hashId,
            time:response.data.result.data[i].updatetime
        };
        this.items.push(new JokeTreeItem(joke));
    }

    return  this.items;

  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

joke.ts 封装treeview

export interface Joke {
  content: string
  hashId: string
  time: string
}

export class JokeTreeItem extends TreeItem {

  constructor(info: Joke) {
    super('', TreeItemCollapsibleState.None)
    this.label = '笑话'
    this.id = info.hashId
    this.description = 'by 梦回故里'
    this.command = {
      title: '今日笑话',
      command: 'joke.click',
      arguments: [
        info.hashId,
        info.content,
      ],
    }
    this.tooltip = '点击查看详情'
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

jokeDataProvider.ts 数据提供者，给treeview提供数据

实现TreeDataProvider接口，实现三个方法
构造函数传入service

export class JokeDataProvider implements TreeDataProvider<JokeTreeItem>{
    private _onDidChangeTreeData:EventEmitter<any> = new EventEmitter<any>();
    readonly onDidChangeTreeData:Event<any> = this._onDidChangeTreeData.event;

    private service: ApiService;

    constructor(service: ApiService){
        this.service = service;
    }

    refresh() {
        this._onDidChangeTreeData.fire(undefined);
    }

    getTreeItem(element:JokeTreeItem){
        return element;
    }

    getChildren(element:JokeTreeItem) {
        return this.service.getJokes(1, '23b9da300d551ea41a36559234c5dc64');
    }

    getParent(element:JokeTreeItem){
        return null;
    }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

上一篇: Unity+nodejs

下一篇: 扩展开发文档