Vscode插件编写

# 使用脚手架工具快速创建插件示例代码

# 安装依赖包

yarn global add yo generator-code

yo是一个快速生成项目的工具，根据特定格式的项目生成器npm包来快速生成项目, 社区中目前有约上万个项目模板。
yeoman的包名一般以generator-开头，有兴趣可以参考此处来创建一个自己的生成器模板。

# 生成vscode插件代码

yo code

可生成TypeScript和JavaScript类型的的插件代码，以及不同的插件类型

     _-----_     ╭──────────────────────────╮
    |       |    │   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 
  New Language Pack (Localization) 

这里我们选择第一个，来创建基于TypeScript的插件；然后根据提示继续完成接下来的步骤，最后会自动安装依赖,这里我们输入的项目名为hello。
点此查看官方更多插件示例代码

# 本地调试运行插件

vscode打开项目根目录，按F5或点击侧边栏的debug,点击运行Run Extension,会打开扩展开发宿主窗口，在窗口中输入Command+Shift+P选择Hello world命令，会看到右下角成功弹出提示信息。

# 代码模板解析

项目初始化完成后会看到以下目录结构：

.
├── CHANGELOG.md
├── README.md
├── package.json
├── src
│   ├── extension.ts
│   └── test
│       ├── runTest.ts
│       └── suite
│           ├── extension.test.ts
│           └── index.ts
├── tsconfig.json
├── vsc-extension-quickstart.md
└── yarn.lock

# package.json

我们先来看下package.json文件，该文件除了我们常见的属性以外，会包含一些vscode插件特有的属性：

属性	是否必须	值类型	说明
displayName	否	string	插件市场中展示的名称
engines	是	Object	至少包含vscode字段，值为兼容的vscode版本，不能为*
categories	否	string[]	插件类型
activationEvents	否	array	激活插件的事件数组
main	否	string	插件入口
contributes	否	object	描述插件提供的各种功能，参考

详细配置文档
scripts中有几个脚本命令，当我们执行yarn compile命令后，就会生成编译后的out文件夹

# .vscode文件夹

该文件夹大家应该都不陌生，这个文件夹里定义了vscode开发环境工作区的一些配置。
当我们执行调试运行插件命令时，其实走的就是这里的配置。
参考链接

• launch.json配置
• tasks.json
• extensions.json工作区推荐的扩展插件
• settings.json 这里的配置和vscode中设置里的配置一样，只对当前工作区生效

# src/extension.ts

该文件是插件程序的入口文件，一般包含两个方法：

// 插件在激活的时候被调用
export function activate() {}

// 插件停用时被调用
export function deactivate() {}

示例模板的代码非常简单，如下：

let disposable = vscode.commands.registerCommand('hello.helloWorld', () => {
    vscode.window.showInformationMessage('Hello World from hello!');
});

这段代码，通过vscode.commands.registerCommand方法，注册了一个hello.helloWorld的命令，当执行此命令时，触发回调，通过vscode.window.showInformationMessage方法，在右下角弹出消息提示。

命令是如何触发呢？
这就是上面在package.json中配置的contributes中定义的：

{
  ...
  "contributes": {
    "commands": [
      {
        "command": "hello.helloWorld",
        "title": "Hello World"
      }
    ]
  },
  ...
}

当键入Command+Shift+P时，输入commands中定义的title字符即可调用hello.helloWorld命令，触发在src/extension.ts文件中定义的方法回调，从而触发showInformationMessage方法，弹出消息框。

# 插件打包

当插件开发完成后，想要给别使用，可以打包生成.vsix文件让别人安装使用，也可以发布到应用市场，首先要全局安装vsce：

yarn global add vsce

然后通过以下命令打包生成.vsix文件

vsce package
# 如果使用的是yarn,执行下面命令
vsce package --no-yarn

发布应用市场需要申请个人令牌，详细参考文档

# 常见错误

1、Missing publisher name: 在package.json中添加publisher字段即可

{
    ...
    "publisher": "cyyjs",
    ...
}

2、Make sure to edit the README.md file before you package or publish your extension.: 修改README.md文件，确保文件中不包含This is the README for your extension字符即可，主要为了防止开发者使用默认的README.md发布，报错源码地址。