我们周末愉快～，又是一个阳光明媚的晚上
今天给我们带来的是一个实战类的文章，对我自己来说很多时分停留在嘴上，手上却时常缺失，为了弥补这个“缺点”，特此推出实战课程，代码都是一行一行敲出来的。
为了便利我们的后续改造和查阅，代码已经上传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插件开发实战之--Code Review插件

能够看一下我们翻开一个VS Code之后里面会有很多的进程：

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

你的第一个插件

装置环境

需求首要装置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

插件的目录结构

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

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

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

插件功用介绍

指令

注册一个指令

/**
    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 插件

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

仓库地址

github.com/MaAmos/Code…

项目调试

  1. 直接运用F5就能够翻开一个新的vs code窗口进行调试
  2. 直接运用vs code中的调试功用

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

项目发布

// 需求凭借vsce 这个工具
npm i vsce -g
// 履行打包指令
vsce package