VS Code插件开发实战之--Code Review插件_vscode codereview 插件

概述

VS Code简介

Visual Studio Code（简称 VS Code）是一款由微软开发且跨平台的免费源代码编辑器([7])。该软件以扩展的方式支持语法高亮、代码自动补全（又称 IntelliSense）、代码重构功能，并且内置了命令行工具和 Git 版本控制系统。用户可以更改主题和键盘快捷方式实现个性化设置，也可以通过内置的扩展程序商店安装其他扩展以拓展软件功能。

何为插件？

插件（英语：plug-in、plugin、add-in、addin，又译外挂、扩展）是一种电脑程序，透过和应用程序（例如网页浏览器，电子邮件客户端）的互动，用来替应用程序增加一些所需要的特定的功能。最常见的有游戏、网页浏览器的插件和媒体播放器的插件。

应用程序之所以支持插件的使用原因很多，主要包括：使得第三方的开发者可以对应用程序进行扩充、精简，或者将源代码从应用程序中分离出来，去除因软件使用权限而产生的不兼容。

VS Code插件

VS Code编辑器本身是一个很轻量级的编辑器，但同时它的功能也非常强大，那它如何有保持轻量级又保证它的功能这么强大的呢？其实就是插件的方式来扩展了它本身的功能。

Electron

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。

多进程模型

可以看一下我们打开一个VS Code之后里面会有很多的进程：

你的第一个插件

安装环境

需要首先安装Yeoman和VS Code Extension Generator

js
复制代码
npm install -g yo generator-code
1
2
3

然后执行初始化项目命令直接生成一个初始化项目

js
复制代码
yo code

# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension? HelloWorld
### Press <Enter> to choose default for all options below ###

# ? What's the identifier of your extension? helloworld
# ? What's the description of your extension? LEAVE BLANK
# ? Enable stricter TypeScript checking in 'tsconfig.json'? Yes
# ? Setup linting using 'tslint'? Yes
# ? Initialize a git repository? Yes
# ? Which package manager to use? npm

code ./helloworld
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

插件的目录结构

go
复制代码
├── .vscode
│   ├── launch.json     // 插件加载和调试的配置
│   └── tasks.json      // 配置TypeScript编译任务
├── .gitignore          // 忽略构建输出和node_modules文件
├── README.md           // 一个友好的插件文档
├── src
│   └── extension.ts // 插件源代码
├── package .json // 插件配置清单
├── tsconfig.json       // TypeScript配置
1
2
3
4
5
6
7
8
9
10
11

插件功能介绍

命令

注册一个命令

js
复制代码
/**
    command：命令名称
    commandHandler: 命令执行函数
*/
vscode.commands.registerCommand(command, commandHandler)
1
2
3
4
5
6
7

配置一个命令

需要在package.json中的配置项(contribution)中添加一条命令

js
复制代码
{
    "contributes": {
        "commands": [
            {
                "command": "myExtension.sayHello",
                "title": "Say Hello"
            }
        ]
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

执行一个命令

js
复制代码
/**
    command: 命令名称
*/ 
vscode.commands.executeCommand(command);
1
2
3
4
5
6

配置

js
复制代码
// 获取所有的vs code编辑器中的配置
vscode.workspace.getConfiguration()
1
2
3
4

菜单

js
复制代码
"contributes": {
    "menus": { // 配置菜单
      "editor/context": [ // 编辑器上下文菜单
        {
          "when": "editorHasSelection",
          "command": "CodeReview.CodeReview",
          "group": "group1"
        }
      ],
      "editor/title/context": [ // 编辑器标题上下文菜单
        {
          "command": "CodeReview.CodeReview",
          "group": "group1"
        }
      ]，
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

消息通知

js
复制代码
// message：通知内容
vscode.window.showInformationMessage(message)
vscode.window.showWarningMessage(message)
vscode.window.showErrorMessage(message)
1
2
3
4
5
6

实战：Code Review 插件

仓库地址

github.com/MaAmos/Code…

项目调试

1. 直接使用F5就可以打开一个新的vs code窗口进行调试
2. 直接使用vs code中的调试功能

项目发布

js
复制代码
// 需要借助vsce 这个工具
npm i vsce -g

// 执行打包命令
vsce package
1
2
3
4
5
6
7

这里给大家分享一份Python全套学习资料，包括学习路线、软件、源码、视频、面试题等等，都是我自己学习时整理的，希望可以对正在学习或者想要学习Python的朋友有帮助！

CSDN大礼包：全网最全《全套Python学习资料》免费分享

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/797486