本文目录

1.开始一个Hello World插件

1.1.初始化

安装脚手架：npm install -g yo generator-code
初始化项目，yo 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

打开新建demo后，按下F5(mac按下fn,会出现F5，选择),即会出现一个测试窗口， (Ctrl+Shift+P)后，输入Hello World 会出来Hello World提示弹窗，恭喜，第一个例子run起来了~

1.2.调试

在项目里console.log（'test'），调试时项目右下角的debug console栏可看到
在代码左侧点击，会出现红点，调试运行到此会暂停，能看到参数运行的值，即下方第一个图示
按F5,或项目头部出现的刷新按钮，会刷新测试窗口，进入调试，即下方第二个图示

1.3.发布

非首次：vsce publish
vsce publish patch可自动升级版本，例如1.0.1 => 1.0.2
首次
1. 安装vsce npm i vsce -g
2. Visual Studio Code的应用市场基于微软的Azure DevOps，所以需要申请Axure组织里的publisher账号,并创建个人的访问令牌(Personal Access Token)
  - a. 登陆微软账号：进入微软官网，登陆或创建Microsoft账号，（可用github账号登陆）
  - b. 登陆Azure DevOp：访问 Azure（需翻墙），如果你从来没有使用过Azure，按照提示进行创建
  - c. 生成token：登陆进入Azure首页后，点击，Personal access tokens，新建token，切记照着下图进行选择，时间选一年
  - d. 创建发布者：获得Personal access tokens后，使用vsce创建发布者vsce create-publisher test, 创建成功就可以在仓库 publisher 写为test，进行发布
  - e. 发布：vsce publish如需要登陆 vsce login (publisher name)

图1 入口图示

图2 填写范例

2.写vscode插件需知

2.1.工作台哪些可扩展

Tree View Container: 视图入口
Tree View 树状视图
Status Bar 状态栏
Webview 页面嵌套

2.2.功能哪些可扩展

主题
语言特性(悬停提示、转跳定义、错误诊断)
扩展工作台（扩充菜单、状态栏等）
调试（调试插件，vscode内调试UI）
...

2.3.插件目录说明

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

主要文件：package.json， extension.ts ，.vscodeignore ， tsconfig.json

2.3.1.package.json

{
    "name": "helloworld-sample",
    "displayName": "helloworld-sample",
    "description": "HelloWorld example for VS Code",
    "version": "0.0.1", //版本
    "publisher": "test", //申请的发布者名称
    "repository": "https://github.com/Microsoft/vscode-extension-samples/helloworld-sample",
    "engines": {
        "vscode": "^1.25.0"
    },
    "categories": ["Other"],
    "activationEvents": ["onCommand:extension.helloWorld"], //激活时机：helloWorld相关，运行命令时激活
    "main": "./out/extension.js", //发布后的入口文件
    "contributes": { //发布内容配置
        "commands": [
            {
                "command": "extension.helloWorld",  
                "title": "Hello World"
            }
        ]
    },
    "scripts": {   //命令
        "vscode:prepublish": "npm run compile",
        "compile": "tsc -p ./",
        "watch": "tsc -watch -p ./"
    },
    "devDependencies": {//依赖相关
    }
}

2.3.1.1.activationEvents 插件激活时机

• onLanguage：包含该语言类型的文件被打开
• onCommand：执行某个命令时
• onDebug：开始调试
• workspaceContains：有匹配规则的文件被打开
• onFileSystem：打开某个特殊协议的文件
• onView：某个 id 的视图被显示
• onUri：向操作系统注册的 schema跳转
• onWebviewPanel：某种 viewType 的 webview 打开时
• *：启动就立即打开

2.3.1.2.contributes：发布内容配置

• configuration："用户设置"和"工作区设置"可修改
• commands ：命令，一次注册，可在多个地方多费（直接调用，菜单，状态栏等）
• menus：菜单项会出现的命令，详见
• keybindings：按键组合触发命令，比如设置F10+P唤起
• languages：在特定语言文件里触发命令，比如java里可使用
• debuggers：调试时出现的命令
• breakpoints：断点相关命令
• grammars：语法相关命令（例如指定在哪显示语法高亮）
• themes：添加主题
• snippets：为语言添加代码片段
• jsonValidation：json文件校验器
• views：视图相关命令，可看Tree View Container对应视图名确认位置，可自定义视图

2.3.2..vscodeignore

发布需忽略的目录，为了插件使用更顺滑，请确保发布的内容尽量少，代码可用webpack进行压缩（配置链接）

2.3.3.extension.ts

• extension为入口文件,有activate,deactivate两个默认函数，插件激活触发activate，里面获取上下文信息，完成命令注册

// 'vscode'模块包含了VS Code extensibility API
import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
    // registerCommand中的参数必须与package.json中的command保持一致
     vscode.commands.registerCommand('extension.sayHello', () => {
        // 每次命令执行时都会调用这里代码
        // ...
        // 显示消息提示
        vscode.window.showInformationMessage('Hello World!');
    });
}
export function deactivate() {}

2.3.4.tsConfig.json

ts编译配置文件

下面就是实战了，附上详细的demo合集及官网地址，开始你的vscode插件之旅吧~

vscode插件，从0到1