VSCODE 扩展开发 02

发表于 更新于 分类于 阅读次数：

此文章的 撰写时间 撰写日期 绝对有问题

此文章的部分图片可能无法加载。这是因为大概这一版的博客搭建在云服务器上所以图片没有用图床
为什么呢？难道云服务器流量不要钱吗？白嫖图床不好吗？

概要

主要借助右键菜单和快捷键讲解一下package.json. 没错我就是标题党

添加右键菜单和快捷键

我们在package.json中找到contributes, 然后可以看到 

1
2
3
4
5
6
7
8
"contributes": {
    "commands": [
           {
               "command": "extension.sayHello",
               "title": "Hello World"
           }
    ]
}
我们在command数组的后面加一个,(英文逗号) 然后写如下代码 
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
"contributes": {
    "commands": [
           {
               "command": "extension.sayHello",
               "title": "Hello World"
           }
    ],
     //这个keybindings数组就是快捷键绑定了
    "keybindings": [
         {
              "command": "name.helloWorld", //要绑定的命令名字
              "key": "ctrl+f10",    //按下ctrl f10时执行name.helloworl命令
              "mac": "cmd+f10",   //mac下快捷键 (mac os x的ctrl键叫cmd键
              "when": "editorFocus"   //什么时候,editor focus 即编辑器获得焦点 也就是光标在编辑器上
         }
    ],
    //菜单
    "menus": { //注意这里不是[而是{了,表示不是数组而是对象
          "editor/context":[
               {
                   "when": "editorFocus",                  //同上
                   "command": "name.helloWorld",        //右键菜单命令
                   "group": "navigation"                   //显示位置,"navigation"是最上面
               }
           ]
     }
}
请手写一遍而不是复制粘贴,加深印象 可以照着写,单词不用死记硬背,vscode有自动补全和提示. 另外 标准json不支持注释,写的时候不要加上注释. Y1j5zF.png 这样我们就能看到右键菜单了,点击hello world命令或ctrl+f10 Y1vpsH.png great.

packag.json详细分析

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
{
	"name": "name",                    //扩展的名字  全部小写 没有空格
	"displayName": "name",             //"友好的"显示名称,显示在vscode应用市场 可以中文
	"description": "描述 可以中文",     //插件描述 建议写的丰富一点 可以中文
        "keywords": ["vscode", "plugin", "helloworld"],   //自动生成没有 手动添加  关键词,用于在vscode应用市场搜索
	"version": "0.1.1",                            //版本号
         "publisher": "airx",                           //发布者 请与发布者一致
	"engines": {                                     //支持的最低vscode版本
		"vscode": "^1.45.0"
	},
	"categories": [                      //应用分类,稍后详解
		"Other"
	],
        "icon": "images/icon.png",           //应用图标
	"activationEvents": [                    //表示插件会被哪些命令激活
		"onCommand:name.helloWorld"
	],
	"main": "./extension.js",       //入口
         //主要的插件配置项 据说叫贡献点 是个鬼畜名字
	"contributes": {
                 //插件设置,也就是在vscode设置中你的插件的设置项
                "configuration": {
                        "type": "object",
			     // 设置页面的配置项标题
                          "title": "helloworld插件设置",
                           "properties": {
                                   "name.name": {
                                        "type": "string",     //数据类型,string即字符串
                                        "default": "NoName",   //默认是什么
                                        "description": "写你的名字"   //描述
                                    },
                                     "name.isYoungLady ": {   //是小姐姐吗 (大雾
                                         "type": "boolean",         //数据类型: boolean,布尔值(真/假,对/错)
                                         "default": true,       //默认是小姐姐 (大雾  为真(true),假则是false
                                         "description": "是小姐姐吗"
                                    }
                           }
                  },          
                 //命令描述
		"commands": [
			{
				"command": "name.helloWorld",
				"title": "Hello World"
			}
		],
                  //之前说过了
		"keybindings": [
			{
				"command": "name.helloWorld",
				"key": "ctrl+f10",
				"mac": "cmd+f10",
				"when": "editorFocus"
			}
		],
                 //说过
		"menus": {
			"editor/context": [     //这里一会会详细讲一下
				{
					"when": "editorFocus",
					"command": "name.helloWorld",
					"group": "navigation"
				}
			]
		}
	},
        "editor/title": [      //编辑器右上角图标/文字
                {
                    "when": "editorFocus && resourceLangId == javascript",  //当编辑器具有焦点,打开文件为js文件时
                    "command": "name.helloWorld",  //显示命令name.helloworld (在右键菜单中)
                    "group": "navigation@2"          //位置在最上层分组的第2个
                }
        ],

			// 编辑器标题右键菜单
        "editor/title/context": [
                {
                    "when": "resourceLangId == javascript",
                    "command": "extension.demo.testMenuShow",
                    "group": "navigation"
                }
        ],
             //左边栏文件管理右键菜单
            "explorer/context": [
                {  //该咋写咋写
                    "command": "name.helloWorld",
                    "group": "navigation"
                }
            ]
        },
         // activitybar图标，就是最左边那个栏的几个图标
        "viewsContainers": {
            "activitybar": [
                {
                    "id": "nameid",            //id
                    "title": "标题",            //标题
                    "icon": "images/zc_icon.svg"  //icon (图标,推荐svg)
                }
            ]
        },
           //暂时忽略
	"scripts": {
		"lint": "eslint .",
		"pretest": "npm run lint",
		"test": "node ./test/runTest.js"
	},
         //开发依赖: bscode eslint等
	"devDependencies": {
		"@types/vscode": "^1.45.0",
		"@types/glob": "^7.1.1",
		"@types/mocha": "^7.0.2",
		"@types/node": "^13.11.0",
		"eslint": "^6.8.0",
		"glob": "^7.1.6",
		"mocha": "^7.1.2",
		"typescript": "^3.8.3",
		"vscode-test": "^1.3.0"
	}
}

Y3pIbQ.png Y39aIs.png

待更