个人中心
gpt4 book ai didi

VSCode插件开发全攻略之package.json详解

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 27 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章VSCode插件开发全攻略之package.json详解由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

package.json 。

在详细介绍vscode插件开发细节之前，这里我们先详细介绍一下vscode插件的package.json写法，但是建议先只需要随便看一下，了解个大概，等后面讲到具体细节的时候再回过头来看.

如下是package.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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
{
     // 插件的名字，应全部小写，不能有空格
  "name" : "vscode-plugin-demo" ,
     // 插件的友好显示名称，用于显示在应用市场，支持中文
  "displayName" : "VSCode插件demo" ,
     // 描述
  "description" : "VSCode插件demo集锦" ,
     // 关键字，用于应用市场搜索
  "keywords" : [ "vscode" , "plugin" , "demo" ],
     // 版本号
  "version" : "1.0.0" ,
     // 发布者，如果要发布到应用市场的话，这个名字必须与发布者一致
  "publisher" : "sxei" ,
     // 表示插件最低支持的vscode版本
  "engines" : {
   "vscode" : "^1.27.0"
  },
     // 插件应用市场分类，可选值： [Programming Languages, Snippets, Linters, Themes, Debuggers, Formatters, Keymaps, SCM Providers, Other, Extension Packs, Language Packs]
  "categories" : [
   "Other"
  ],
     // 插件图标，至少128x128像素
  "icon" : "images/icon.png" ,
     // 扩展的激活事件数组，可以被哪些事件激活扩展，后文有详细介绍
  "activationEvents" : [
   "onCommand:extension.sayHello"
  ],
     // 插件的主入口
  "main" : "./src/extension" ,
     // 贡献点，整个插件最重要最多的配置项
  "contributes" : {
         // 插件配置项
         "configuration" : {
    "type" : "object" ,
             // 配置项标题，会显示在vscode的设置页
    "title" : "vscode-plugin-demo" ,
    "properties" : {
                 // 这里我随便写了2个设置，配置你的昵称
     "vscodePluginDemo.yourName" : {
      "type" : "string" ,
      "default" : "guest" ,
      "description" : "你的名字"
     },
                 // 是否在启动时显示提示
     "vscodePluginDemo.showTip" : {
      "type" : "boolean" ,
      "default" : true ,
      "description" : "是否在每次启动时显示欢迎提示！"
     }
    }
   },
         // 命令
   "commands" : [
    {
     "command" : "extension.sayHello" ,
     "title" : "Hello World"
    }
   ],
         // 快捷键绑定
   "keybindings" : [
    {
     "command" : "extension.sayHello" ,
     "key" : "ctrl+f10" ,
     "mac" : "cmd+f10" ,
     "when" : "editorTextFocus"
    }
   ],
         // 菜单
   "menus" : {
             // 编辑器右键菜单
    "editor/context" : [
     {
                     // 表示只有编辑器具有焦点时才会在菜单中出现
      "when" : "editorFocus" ,
      "command" : "extension.sayHello" ,
                     // navigation是一个永远置顶的分组，后面的@6是人工进行组内排序
      "group" : "navigation@6"
     },
     {
      "when" : "editorFocus" ,
      "command" : "extension.demo.getCurrentFilePath" ,
      "group" : "navigation@5"
     },
     {
                     // 只有编辑器具有焦点，并且打开的是JS文件才会出现
      "when" : "editorFocus && resourceLangId == javascript" ,
      "command" : "extension.demo.testMenuShow" ,
      "group" : "z_commands"
     },
     {
      "command" : "extension.demo.openWebview" ,
      "group" : "navigation"
     }
    ],
             // 编辑器右上角图标，不配置图片就显示文字
    "editor/title" : [
     {
      "when" : "editorFocus && resourceLangId == javascript" ,
      "command" : "extension.demo.testMenuShow" ,
      "group" : "navigation"
     }
    ],
             // 编辑器标题右键菜单
    "editor/title/context" : [
     {
      "when" : "resourceLangId == javascript" ,
      "command" : "extension.demo.testMenuShow" ,
      "group" : "navigation"
     }
    ],
             // 资源管理器右键菜单
    "explorer/context" : [
     {
      "command" : "extension.demo.getCurrentFilePath" ,
      "group" : "navigation"
     },
     {
      "command" : "extension.demo.openWebview" ,
      "group" : "navigation"
     }
    ]
   },
         // 代码片段
   "snippets" : [
    {
     "language" : "javascript" ,
     "path" : "./snippets/javascript.json"
    },
    {
     "language" : "html" ,
     "path" : "./snippets/html.json"
    }
   ],
         // 自定义新的activitybar图标，也就是左侧侧边栏大的图标
   "viewsContainers" : {
    "activitybar" : [
     {
      "id" : "beautifulGirl" ,
      "title" : "美女" ,
      "icon" : "images/beautifulGirl.svg"
     }
    ]
   },
         // 自定义侧边栏内view的实现
   "views" : {
             // 和 viewsContainers 的id对应
    "beautifulGirl" : [
     {
      "id" : "beautifulGirl1" ,
      "name" : "国内美女"
     },
     {
      "id" : "beautifulGirl2" ,
      "name" : "国外美女"
     },
     {
      "id" : "beautifulGirl3" ,
      "name" : "人妖"
     }
    ]
   },
         // 图标主题
   "iconThemes" : [
    {
     "id" : "testIconTheme" ,
     "label" : "测试图标主题" ,
     "path" : "./theme/icon-theme.json"
    }
   ]
  },
     // 同 npm scripts
  "scripts" : {
   "postinstall" : "node ./node_modules/vscode/bin/install" ,
   "test" : "node ./node_modules/vscode/bin/test"
  },
     // 开发依赖
  "devDependencies" : {
   "typescript" : "^2.6.1" ,
   "vscode" : "^1.1.6" ,
   "eslint" : "^4.11.0" ,
   "@types/node" : "^7.0.43" ,
   "@types/mocha" : "^2.2.42"
  },
     // 后面这几个应该不用介绍了
  "license" : "SEE LICENSE IN LICENSE.txt" ,
  "bugs" : {
   "url" : "https://github.com/sxei/vscode-plugin-demo/issues"
  },
  "repository" : {
   "type" : "git" ,
   "url" : "https://github.com/sxei/vscode-plugin-demo"
  },
     // 主页
  "homepage" : "https://github.com/sxei/vscode-plugin-demo/blob/master/README.md"
}

activationEvents 。

插件在VS Code中默认是没有被激活的，哪什么时候才被激活呢？就是通过activationEvents来配置，目前支持一下8种配置:

  • onLanguage:${language}
  • onCommand:${command}
  • onDebug
  • workspaceContains:${toplevelfilename}
  • onFileSystem:${scheme}
  • onView:${viewId}
  • onUri
  • *

都比较好懂，我就不做一一介绍了，举个例子，如果我配置了onLanguage:javascript，那么只要我打开了JS类型的文件，插件就会被激活.

重点说一下*，如果配置了*，只要一启动vscode，插件就会被激活，为了出色的用户体验，官方不推荐这么做。看到这里相信大家知道了我们前面HelloWord里面为啥要配置onCommand了吧.

3.contributes 。

  • configuration：设置
  • commands：命令
  • menus：菜单
  • keybindings：快捷键绑定
  • languages：新语言支持
  • debuggers：调试
  • breakpoints：断点
  • grammars
  • themes：主题
  • snippets：代码片段
  • jsonValidation：自定义JSON校验
  • views：左侧侧边栏视图
  • viewsContainers：自定义activitybar
  • problemMatchers
  • problemPatterns
  • taskDefinitions
  • colors

参考 。

extension-manifest 。

activation-events 。

贡献点清单 。

VSCode插件开发全攻略之package.json详解

总结 。

到此这篇关于VSCode插件开发全攻略之package.json详解的文章就介绍到这了,更多相关VSCode插件开发 package.json内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我！ 。

原文链接：https://www.cnblogs.com/liuxianan/p/vscode-plugin-package-json.html 。

最后此篇关于VSCode插件开发全攻略之package.json详解的文章就讲到这里了,如果你想了解更多关于VSCode插件开发全攻略之package.json详解的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

27 4 0
文章推荐： vscode+platformIO开发stm32f4的实现
文章推荐： VSCode插件开发全攻略之命令、菜单、快捷键
文章推荐： 详解Java泛型之详解通配符
文章推荐： VSCode插件开发全攻略之打包、发布、升级的详细教程
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com