系列文章目录
VSCode插件开发(一) —— 第一个插件VSCode插件开发(二) —— 常用贡献点
文章目录
- 系列文章目录
- 关于VSCode
- 第一个扩展
- 关于package.json
关于VSCode
VSCode（即Visual Studio Code）：一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。
VSCode插件市场：vscode的大部分功能都是基于插件实现的，其本身只是一个框架，插件帮助其实现了众多复杂的功能。
VSCode插件编写官方文档：vscode本身是electron编写的，所以其本身和插件都是基于node环境的，所以使用js来编写插件也是相当顺手。
第一个扩展
首先确保已安装Node.js和Git，然后使用以下命令安装Yeoman和VS Code Extension Generator：
npm install -g yo generator-code生成插件框架：
D:\Practice\vscodeExPractice\fast-admin>yo code
_-----_ ╭──────────────────────────╮
| | │ Welcome to the Visual │
|--(o)--| │ Studio Code Extension │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
? What type of extension do you want to create? New Extension (JavaScript)
? What's the name of your extension? fast-admin
? What's the identifier of your extension? fast-admin
? What's the description of your extension? Quickly generate admin page
? Enable JavaScript type checking in 'jsconfig.json'? Yes
? Initialize a git repository? No
? Which package manager to use? npm运行完成后，在编辑器中，按 F5 。这将在新的 “扩展开发主机” 窗口中编译并运行扩展。
在新窗口中使用命令面板（ Ctrl + Shift + P ）运行命令 Hello World：
如果能看到弹出提示 Hello World XXX ，那么恭喜你，第一步成功了！
关于package.json
新建的项目，大致目录如下，下面简单进行介绍：
{
// 插件的名字，应全部小写，不能有空格
"name": "fast-admin",
// 插件的友好显示名称，用于显示在应用市场，支持中文
"displayName": "fast-admin",
// 描述
"description": "Quickly generate admin page",
// 版本号
"version": "0.0.1",
// 插件最低支持的vscode版本
"engines": {
"vscode": "^1.48.0"
},
// 插件应用市场分类，可选值： [Programming Languages, Snippets, Linters, Themes, Debuggers, Formatters, Keymaps, SCM Providers, Other, Extension Packs, Language Packs]
"categories": [
"Other"
],
/** 扩展的激活事件数组，可以被哪些事件激活扩展：
** 1.onLanguage:${language}
** 2.onCommand:${command}
** 3.onDebug
** 4.workspaceContains:${toplevelfilename}
** 5.onFileSystem:${scheme}
** 6.onView:${viewId}
** 7.onUri
** 8.*
**/
"activationEvents": [
"onCommand:fast-admin.helloWorld"
],
// 插件的主入口
"main": "./extension.js",
// 贡献点，整个插件最重要最多的配置项，下面单独列出
"contributes": {
// 命令
"commands": [
{
"command": "fast-admin.helloWorld",
"title": "Hello World"
}
]
},
// 同 npm scripts
"scripts": {
"lint": "eslint .",
"pretest": "npm run lint",
"test": "node ./test/runTest.js"
},
// 开发依赖
"devDependencies": {
"@types/vscode": "^1.48.0",
"@types/glob": "^7.1.3",
"@types/mocha": "^8.0.0",
"@types/node": "^14.0.27",
"eslint": "^7.6.0",
"glob": "^7.1.6",
"mocha": "^8.0.1",
"typescript": "^3.8.3",
"vscode-test": "^1.4.0"
},
// 以下为一些非关键配置
// 关键字，用于应用市场搜索
"keywords": ["vscode", "plugin", "fast", "admin"],
// 发布者，如果要发布到应用市场的话，这个名字必须与发布者一致
"publisher": "kukudelaomao",
// 插件图标，至少128x128像素
"icon": "images/icon.png",
// 许可
"license": "SEE LICENSE IN LICENSE.txt",
// 问题
"bugs": {
"url": "https://github.com/kukudelaomao/fast-admin/issues"
},
// 仓库
"repository": {
"type": "git",
"url": "https://github.com/kukudelaomao/fast-admin"
},
// 主页
"homepage": "https://github.com/kukudelaomao/fast-admin/blob/master/README.md"
}因为contributes太丰富了，所以下面单独列出注释。
- configuration：设置
- commands：命令
- menus：菜单
- keybindings：快捷键绑定
- languages：新语言支持
- debuggers：调试
- breakpoints：断点
- grammars
- themes：主题
- snippets：代码片段
- jsonValidation：自定义JSON校验
- views：左侧侧边栏视图
- viewsContainers：自定义
- activitybar
- problemMatchers
- problemPatterns
- taskDefinitions
- colors
"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": "美女1"
},
{
"id": "beautifulGirl2",
"name": "美女2"
},
{
"id": "beautifulGirl3",
"name": "美女3"
}
]
},
// 图标主题
"iconThemes": [
{
"id": "testIconTheme",
"label": "测试图标主题",
"path": "./theme/icon-theme.json"
}
]
},
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
