从构思到发布，程序员的一天竟是这样的！

写在前面

vscode插件开发听起来是一件头疼的事，但讲整个环节理清后会发现上手并没有想象中的困难。本篇文章以代码片段类型插件为例，简单讲一下插件从项目创建到开发再到上线的全过程。

一、打开vscode软件，创建插件项目

1. 安装typescript组件和yeoman脚手架工具

   npm install -g typescript yeoman
   

2. 安装yo generator

   npm install -g generator-code
   

3. 创建新的vscode插件项目

   yo code
   

二、vscode插件项目的目录结构

.
├── README.md
├── extension.js
├── package.json
├── src
│   ├── activate.ts
│   ├── extension.ts
│   ├── package.json
│   ├── product.json
│   └── tsconfig.json
└── tests
│   ├── suite
│   │   ├── activate.test.ts
│   │   ├── extension.test.ts
│   │   └── package.json
│   ├── testRunner.ts
│   └── tsconfig.json

• extension.js: 插件的主入口文件
• package.json: 插件的包文件
• src/activate.ts: 插件的激活脚本
• src/extension.ts: 插件的主类
• src/package.json: 插件的包文件
• src/product.json: 插件的产品描述文件
• src/tsconfig.json: TypeScript的配置文件
• tests/suite/activate.test.ts: 插件激活脚本的测试文件
• tests/suite/extension.test.ts: 插件主类的测试文件
• tests/suite/package.json: 插件测试包的包描述文件
• tests/testRunner.ts: 插件测试的运行脚本
• tests/tsconfig.json: TypeScript的配置文件

三、编写插件代码

1. 在extension.ts文件中编写插件的主类

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {

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

  context.subscriptions.push(disposable);
}

export function deactivate() {}

2. 在activate.ts文件中编写插件的激活脚本

import * as vscode from 'vscode';
import { activate } from './extension';

export function activate(context: vscode.ExtensionContext) {
  activate(context);
}

export function deactivate() {}

四、调试插件

1. 在package.json文件中添加调试脚本

{
  "scripts": {
    "debug": "node --inspect-brk=5858 extension.js"
  }
}

2. 运行调试脚本

npm run debug

3. 在vscode中打开调试视图

Ctrl + Shift + D

五、发布插件

1. 打包插件

npm run package

2. 上传插件到Visual Studio Marketplace

vsce publish

写在最后

vscode插件开发看似复杂，但理清各个环节后就会发现上手并没有想象中的困难。本文以代码片段类型插件为例，简单介绍了插件从项目创建到开发再到上线的全过程。了解清楚vscode插件开发流程后，才能提高开发效率和质量！