vscode从头开发一个笑话扩展

安装开发工具包

npm install -g yo generator-code
1

创建工程,选择插件开发

yo code
1

插件基本目录结构

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))
    
    1
    • 注册命令
const showcontent = vscode.commands.registerCommand('joke.click', (hasdId, content) => {})
1
  • 绑定命令
context.subscriptions.push(showcontent)
1
  • 创建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