1、vsCode插件開發流程入門

1、工具准備

　　需要安裝一個生產插件代碼的東西，也就是Yeoman和VS Code Extension generator

npm install -g yo generator-code

2、接着在項目目錄下面生成項目結構

yo code

　在os系統上可以通過用上下鍵來選擇要創建哪種類型的項目，在win可以通過輸入1、2、3這樣的數字然后按回車來選擇。
　　生成過程中，需要做一些初始化的設置，如下

1. 輸入你擴展的名稱
2. 輸入一個標志（項目創建的文件名稱用這個）
3. 輸入對這個擴展的描述
4. 輸入以后要發布用到的一名稱（和以后再發布時候有一個名字是對應上的）
5. 是問你要不要創建一個git倉庫用於版本管理

　　看一下目錄結構

.
├── .gitignore                  //配置不需要加入版本管理的文件
├── .vscode                     // VS Code的整合
│   ├── launch.json
│   ├── settings.json
│   └── tasks.json
├── .vscodeignore                //配置不需要加入最終發布到拓展中的文件
├── README.md
├── src                         // 源文件
│   └── extension.ts            // 如果我們使用js來開發拓展，則該文件的后綴為.js
├── test                        // test文件夾
│   ├── extension.test.ts       // 如果我們使用js來開發拓展，則該文件的后綴為.js
│   └── index.ts                // 如果我們使用js來開發拓展，則該文件的后綴為.js
├── node_modules
│   ├── vscode                  // vscode對typescript的語言支持。
│   └── typescript              // TypeScript的編譯器
├── out                         // 編譯之后的輸出文件夾(只有TypeScript需要，JS無需)
│   ├── src
│   |   ├── extension.js
│   |   └── extension.js.map
│   └── test
│       ├── extension.test.js
│       ├── extension.test.js.map
│       ├── index.js
│       └── index.js.map
├── package.json                // 該拓展的資源配置文件
├── tsconfig.json               // 
├── typings                     // 類型定義文件夾
│   ├── node.d.ts               // 和Node.js關聯的類型定義
│   └── vscode-typings.d.ts     // 和VS Code關聯的類型定義
└── vsc-extension-quickstart.md 

3、運行調試

　　用vscode打開項目目錄，點擊調試按鈕或者使用快捷鍵F5，在調試運行起來之后,會新打開一個vsCode窗口，在新vscode窗口標題欄中顯示[Extension Development Host]

　　

 

 

  　　然后在當前窗口中，運行命令，快捷鍵ctrl+shift+p打開命令行，會展示出vscode的命令列表，選擇對應命令並執行hello world命令；

　　　可以看到vscode窗口中會彈出hello world，這樣一個插件就運行起來了

4、開發擴展插件

　　在開發之前看兩個重要的文件內容，一遍后續順利開發，一個是package.json，這里面是配置命令的，即commands

　　另一個是extension.ts，這個文件是用於封裝插件邏輯，並注冊插件的。

　　基本整個插件編寫都是圍繞着這兩個文件來開發的

　　首先來看一下package.json配置文件：

   {
    "name": "testDemo",              //插件擴展名稱（對應創建項目時候的輸入）
    "displayName": "testDemo",
    "description": "message tips",  //插件擴展的描述（對應創建項目時候的輸入）
    "version": "0.0.1",
    "publisher": "ssx",             //發布時候的一個名稱（對應創建項目時候的輸入,在插件打包和發布的時候必須的，所以不能少）
    "engines": {
        "vscode": "^0.10.10"
    },
    "categories": [
        "Other"
    ],
    "activationEvents": [              //這是觸發插件執行的配置，通過名稱來執行extension.ts里面的插件代碼
        "onCommand:extension.sayHello" //這種是通過輸入命令來觸發執行的
    ],
    "main": "./out/src/extension",    //這個是配置TypeScript編譯成js的輸出目錄
    "contributes": {
        "commands": [{               //title 和 command是一個對應關系的
            "command": "extension.sayHello", //這個是對應上面那個命令觸發的，在代碼里面也要用到
            "title": "Hello World"   //這個是我們在vscode里面輸入的命令
        }]
    },
    "scripts": {                     //是在發布打包，或者其他運行時候，要執行的一些腳本命令
        "vscode:prepublish": "node ./node_modules/vscode/bin/compile",
        "compile": "node ./node_modules/vscode/bin/compile -watch -p ./",
        "postinstall": "node ./node_modules/vscode/bin/install"
    },
    "devDependencies": {           //這是開發的依賴包，如果有其他的依賴包，並要打包的話，需要把dev去掉
        "typescript": "^1.8.5",
        "vscode": "^0.11.0"
    }
   }

　　接着看一下extension.ts代碼文件

// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
import * as vscode from 'vscode';

// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
export function activate(context: vscode.ExtensionContext) {

    // Use the console to output diagnostic information (console.log) and errors (console.error)
    // This line of code will only be executed once when your extension is activated
    console.log('Congratulations, your extension "testdemo" is now active!');

    // The command has been defined in the package.json file
    // Now provide the implementation of the command with registerCommand
    // The commandId parameter must match the command field in package.json
　　 //這是注冊擴展的API，第一個參數是擴展的ID，必須跟package.json保持一致，第二個參數是封裝插件邏輯的回調函數，所有的插件邏輯在這里編寫

    let disposable = vscode.commands.registerCommand('extension.helloWorld', () => {
        // The code you place here will be executed every time your command is executed
　　　　　//這里就是編寫插件邏輯的地方
        // Display a message box to the user
        vscode.window.showInformationMessage('Hello World!自定義的提示');
    });
　　//通過subscriptions訂閱插件
    context.subscriptions.push(disposable);

    let heDemo = vscode.commands.registerCommand('extension.helloDemo',() => {
        vscode.window.showInformationMessage('自定義的提示');
    })
    context.subscriptions.push(heDemo);

}

// this method is called when your extension is deactivated
export function deactivate() {}

 5、打包和發布

　　需要安裝一個打包工具vsce

npm install -g vsce

　　安裝完成后可以用命令窗口 cd 到你的項目目錄下去，然后執行命令，進行打包

vsce package

　　執行完成后會打包出一個.vsix格式的文件插件，這就是插件安裝包了

vsce publish

      來發布到marketplace.visualstudio.com上面去。發布成功后可以在vscode里面用 ext install 來按這個插件

6、從VSIX安裝擴展插件

　　通過以下命令行進行安裝

code --install-extension myextension.vsix

　　最后的參數為擴展插件的路徑文件名稱，安裝完成就可以使用了

　　

 

參考：https://www.jianshu.com/p/9a2a346b10dc

　　   https://www.cnblogs.com/yihr/p/8747044.html