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

大家周末愉快～，又是一个阳光明媚的晚上

今天给大家带来的是一个实战类的文章，对我自己来说很多时候停留在嘴上，手上却时常缺失，为了弥补这个"缺陷"，特此推出实战课程，代码都是一行一行敲出来的。

为了方便大家的后续改造和查阅，代码已经上传GitHub，欢迎各位哥哥姐姐动动小手点亮小星星

概述

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

npm install -g yo generator-code

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

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

插件的目录结构

├── .vscode
│   ├── launch.json     // 插件加载和调试的配置
│   └── tasks.json      // 配置TypeScript编译任务
├── .gitignore          // 忽略构建输出和node_modules文件
├── README.md           // 一个友好的插件文档
├── src
│   └── extension.ts // 插件源代码
├── package .json // 插件配置清单
├── tsconfig.json       // TypeScript配置

插件功能介绍

命令

注册一个命令

/**
    command：命令名称
    commandHandler: 命令执行函数
*/
vscode.commands.registerCommand(command, commandHandler)

配置一个命令

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

{
    "contributes": {
        "commands": [
            {
                "command": "myExtension.sayHello",
                "title": "Say Hello"
            }
        ]
    }
}

执行一个命令

/**
    command: 命令名称
*/ 
vscode.commands.executeCommand(command);

配置

// 获取所有的vs code编辑器中的配置
vscode.workspace.getConfiguration()

菜单

"contributes": {
    "menus": { // 配置菜单
      "editor/context": [ // 编辑器上下文菜单
        {
          "when": "editorHasSelection",
          "command": "CodeReview.CodeReview",
          "group": "group1"
        }
      ],
      "editor/title/context": [ // 编辑器标题上下文菜单
        {
          "command": "CodeReview.CodeReview",
          "group": "group1"
        }
      ]，
    }
  },

消息通知

// message：通知内容
vscode.window.showInformationMessage(message)
vscode.window.showWarningMessage(message)
vscode.window.showErrorMessage(message)

实战：Code Review 插件

仓库地址

github.com/MaAmos/Code...

项目调试

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

项目发布

// 需要借助vsce 这个工具
npm i vsce -g

// 执行打包命令
vsce package