阅读 1721

vscode插件开发实践与demo源码

写在前面

工欲善其事必先利其器。vscode作为优秀的开发工具,给我的日常开发工作提供了极大的便利。其拓展机制更是如此。

但是,最近在做年度专业线任务时,有需要用到漂亮的行尾注释对齐,搜索后发现vscode官方插件市场没有我想要的。

于是便想着自己来开发这么个东西,一方面方便后边自己使用,一方面也能学习下vscode的插件开发、发布方法,另一方面要是发布后对其他人有所帮助就更好了。

本文主要内容

这篇文章是在我完成插件开发、发布后写的,记录下方法。

主要包含两个方面的内容:

  1. vscode插件开发、发布主要流程
  2. vscode插件demo源码:

(1)参考一,注释对齐插件 github.com/gitshan/vsc…

(2)参考二,console.log快速输出日志插件 github.com/gitshan/vsc…

vscode插件开发、发布主要流程

  1. 插件开发前的准备:vscode、nodejs、vscode插件生产工具、git、微软账号
  2. 插件开发:插件构思、官方文档查阅
  3. 插件发布:打包、上传、插件市场操作
  4. 插件维护:更新迭代后打包、上传、插件市场操作

插件开发前的准备:

vscode、nodejs、git、微软账号,这个的准备无需多说。

vscode插件生产工具:官方推荐使用Yeoman 和 VS Code Extension Generator。用如下命令安装:

npm install -g yo generator-code

至此开发所需的准备已做好。

插件开发

使用生产工具初始化代码

执行如下指令

yo code

结果如下:

$ yo code

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of extension do you want to create? (Use arrow keys)
> New Extension (TypeScript)
  New Extension (JavaScript)
  New Color Theme
  New Language Support
  New Code Snippets
  New Keymap
  New Extension Pack
(Move up and down to reveal more choices)
复制代码

在os系统上通过上下键来选择要创建的类型,在win上输入1、2、3后按回车来选择。

其余步骤根据提示即可。得到如下结构目录结构:

├── .vscode      // 资源配置文件
├── CHANGELOG.md // 更改记录文件,会展示到vscode插件市场
├── extension.js // 拓展源代码文件
├── jsconfig.json
├── package.json // 资源配置文件
├── README.md    // 插件介绍文件,会展示到vscode插件市场
├── test         // 测试文件
└── vsc-extension-quickstart.md
复制代码

ps:其余项目类型的文档目录可能会有所差别,以生成的文件目录为准。在js拓展项目下,最重要的就是extension.jspackage.json

插件构思

灵感来源于生活、工作,这个想到了就可以去做。比如我这个行尾注释对齐(上面的目录注释就是用的我刚开发好的插件)。

关于comment-aligner的具体思路就不写在这里了,感兴趣的可以去下载源码看看,里边包含了完整的注释。逻辑十分简单。

查阅文档开发

这里不得不说一下官方文档不太好看,至少不是那么友好。传送门code.visualstudio.com/api/referen…。英文实在吃力的可以使用chrome的一键翻译,翻译的还算准确的。

对于基本的应用主要查看window相关的就足够了,结合yo code生成的基本代码可以实现简单的功能。

插件发布

安装打包、发布工具

npm install -g vsce

创建发布人

插件市场官网创建发布人

创建发布人.png

完善package.json

package.json中有vscode的自定义配置,在执行打包命令时vscode会自检,如果配置错误或者遗漏会有提示信息。

较完整的信息如下(下方是我发布的comment aligner的package.json文件):

{
	"name": "comment-aligner",
	"displayName": "comment aligner",
	"description": "A tool for aligning the inline trailing comment",
	"version": "1.0.1",
	"publisher": "huangbaoshan", // 发布人,在插件市场官网创建的发布人id
	"icon": "icon/icon.png",     // 插件图标,用于在插件市场展示的icon;可以放到同级目录内,打包会带入
	"repository": {
		"type": "git",
		"url":"https://github.com/gitshan/vscode-extension-comment-aligner.git"
	},
	"engines": {
		"vscode": "^1.30.0"      // vscode版本号
	},
	"categories": [
		"Other"                  // vscode插件类别,会在插件市场的对应类别中展示
	],
	"activationEvents": [
		"onCommand:extension.commentaligner"
	],
	"main": "./extension.js",
	"contributes": {
		"commands": [{
			"command": "extension.commentaligner", // 插件注册的类名
			"title": "Comment Aligner"             // 插件在命令面包的展示名称
		}]
	},
	"scripts": {
		"postinstall": "node ./node_modules/vscode/bin/install",
		"test": "node ./node_modules/vscode/bin/test"
	},
	"devDependencies": {
		"typescript": "^3.1.4",
		"vscode": "^1.1.25",
		"eslint": "^4.11.0",
		"@types/node": "^8.10.25",
		"@types/mocha": "^2.2.42"
	}
}
复制代码

在开发console插件的时候,发现上述package.jons很不完善,因此附一个稍微全点的介绍,转发自https://www.cnblogs.com/liuxianan/p/vscode-plugin-package-json.html:

{
    // 插件的名字,应全部小写,不能有空格
    "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"
}
复制代码

打包

执行如下命令:

vsce package

在根目录得到:comment-aligner-1.0.1.vsix文件

发布

  1. 方法一:用vsce的vsce publish工具来发布,但是需要在官网配置Personal Access Token较为繁琐。可参考官方教程

  2. 方法二:在官网直接上传发布

    vscode插件发布1.png
    vscode插件发布2.png
    vscode插件发布3.png

    上传后点击确定即可发布成功。

发布检查

  1. 在插件市场官网看状态
    vscode插件发布4.png
  2. 在插件市场官网搜索
    vscode插件发布5.png
  3. 在vscode插件页搜索
    vscode插件发布6.png

以上均表示已发布成功。

插件维护

在发现bug和新功能开发完成后,需要更新插件,只需要将新生产的.vsix包上传到官网即可。

vscode插件发布7.png

最后

希望有用,谢谢大家。

关注下面的标签,发现更多相似文章
评论