VSC 插件開發從入門到Hello World

1、原理放一邊，我們先來個Hello,World

1.1 安裝基礎環境

需要的基礎環境列表：

• Node.js
• npm
• vs code
• yo generator-code

• yo:全稱Yeoman,可以把他理解為一個代碼生成器
• yo generator-code:是vsc團隊基於yo編寫的vsc插件的代碼生成器

安裝npm后通過下面的命令，安裝yo generator -core

npm install -g yo generator-code

1.2 生成你的第一個VSC插件項目

執行下面的命令：

yo code

執行命令后，是下面一番景象：

這里我們先選擇New Code Snippets（代碼片段）

接着是各種讓你選擇的東西，我們可以按下面的方式選（粗體為你需要敲的字符）：

• ? Folder name for import or none for new:直接回車
• ? What's the name of your extension? hello-world
• ? What's the identifier of your extension? hello-world
• ? What's the description of your extension? it's a demo
• ? Language id: html

完事兒之后，就會幫你創建出來一個hello-world的文件夾，里面創建好各種需要的文件，我們用VSC打開這個文件夾，大概是這樣一個畫風：

我們打開snippets\snippets.json文件，並將其內容改為如下：

{
    "hello world": {
        "prefix": "hw",
        "body": [
          "<h1>hello world</h1>"
        ],
        "description": "hello world"
      }
}

1.3 調試擴展

在VSCode中，直接按下F5，稍等片刻即會自動啟動一個新的VSCode窗口，在這個新的窗口中，就是已經加載了我們剛才編寫的hello-world這個擴展。

我們可以通過ctrl + n創建一個新的頁面，並將點擊右下角的plan text，在彈出窗口中選擇html，將文件類型改為html，然后在新的頁面中鍵入hw,就可以看到我們剛寫的hello-world的代碼片段已經生效啦。

下面是一張成功后的動圖：

2. VSC 擴展初探

2.1 使用VSC擴展，我們能做哪些事兒？

以下內容來自：https://code.visualstudio.com/api/extension-capabilities/overview

• 基礎版

  • 注冊命令、配置、快捷鍵、右鍵菜單等
  • 存儲工作空間或者全局數據
  • 顯示消息通知
  • 使用快速選擇，收集用戶輸入
  • 打開系統文件選擇器，便於用戶選擇文件或文件夾
  • 使用Progress API顯示長時間運行的操作

• 定制主題

  • 更改代碼的顏色
  • 更改VSC UI的顏色
  • 自定義文件圖標

• 聲明語言特性

  • 創造一門新的語言，告訴VSC新語言的語法等語言信息
  • 添加常用代碼片段
  • 添加、替換編程語言的語法
  • 使用語法注入擴展現有語法

• 程序化的語言功能

  • 添加顯示API的示例用法的懸停
  • 檢測代碼的語法錯誤、拼寫錯誤、不規范的代碼
  • 格式化代碼
  • 為語言添加智能提示

• 擴展Workbench

• 添加自定義上下文菜單操作到文件資源管理器
• 在側欄中創建一個新的交互式TreeView。
• 定義新的活動欄視圖。
• 在狀態欄中顯示新信息。
• 使用WebViewAPI 呈現自定義內容。
• 貢獻源控制提供商。

• 調試

  • 通過提供調試適配器實現，將VS Code的調試UI連接到調試器或運行時。
  • 指定調試器擴展支持的語言。
  • 為調試器使用的調試配置屬性提供豐富的IntelliSense和懸停信息。
  • 提供調試配置片段。
  • 根據動態創建的調試配置啟動調試會話。
  • 跟蹤調試會話的生命周期。
  • 以編程方式創建和管理斷點。

是不是有點眼花繚亂？沒錯，VSC幾乎可以擴展所有的東西！

那有沒有什么不能擴展？

有！那就是出於安全考慮，禁止擴展訪問VSC的DOM元素！

啥？DOM元素？沒錯，VSC就是基於HTML + JavaScript編寫的

2.2 回頭仔細看看hello-world擴展

2.2.1 package.json

package.json文件中，其實放的很多東西是我們剛才在使用命令行初始化時敲的內容，如下：

 
 
 
         

  
  
  
          
{
    "name": "hello-world", // 擴展名稱（ID）
    "displayName": "hello-world", // 擴展展示名稱
    "description": "it's a demo", // 擴展描述
    "version": "0.0.1", // 版本號
    "engines": {
        "vscode": "^1.32.0" // 兼容的VSC的版本，^1.32.0表示從兼容1.32.0以上的版本
    },
    "categories": [ // 插件的類型
        "Snippets" //表示該插件中會包含代碼片段，
    ],
    "contributes": { // 一些額外的信息
        "snippets": [ // 用於代碼片段的額外信息
            {
                "language": "html", //該代碼片段的語言是html
                "path": "./snippets/snippets.json" // 代碼片段位於該文件中
            }
        ]
    }
}
 
 
 
         

那我的項目中，可能不僅僅有html，還會有typescript、javascript怎么辦？

其實很簡單，只需要在contributes下的snippets節點中增加即可，類似如下：

{
    "name": "hello-world",
    "displayName": "hello-world",
    "description": "it's a demo",
    "version": "0.0.1",
    "engines": {
        "vscode": "^1.32.0"
   },
    "categories": [
        "Snippets"
   ],
    "contributes": {
        "snippets": [
           {
                "language": "html",
                "path": "./snippets/snippets-html.json"
           },
           {
                "language": "typescript",
                "path": "./snippets/snippets-ts.json"
           },
           {
                "language": "javascript",
                "path": "./snippets/snippets-js.json"
           }
       ]
   }
}

當然了，path對應的json文件，也需要手動創建一下。

2.2.2 snippets 文件夾

snippets文件夾下面存放的是代碼片段，該目錄名字不是固定的，只要與package.json中配置的代碼片段目錄一致即可。

2.2.3 README.md 文件

用戶在VSCode插件中的Detail中展示的內容，用來存放插件的描述文件。

2.2.4 CHANGELOG.md

插件的變更記錄

2.2.5 .vscode 文件夾

是VS Code的一些信息，默認生成的項目中，主要用來存放Debug時的一些配置。

3. 如何發布擴展

出於公司代碼安全和IT策略限制，我們公司內部的擴展絕對不允許直接發布到VS Code Extension MarketPlace，所以本節只討論如何在公司范圍內發布VS Code擴展

3.1.安裝VSCE

 
 
 
         

  
  
  
          
npm install -g vsce
 
 
 
         

3.2 添加publisher

VS Code在發布時，需要在package.json中定義publisher,我們調整下上面hello-world擴展中的package.json為如下：

{
    "name": "hello-world",
    "displayName": "hello-world",
    "description": "it's a demo",
    "version": "0.0.1",
    "engines": {
        "vscode": "^1.32.0"
    },
    "publisher": "jax",
    "categories": [
        "Snippets"
    ],
    "contributes": {
        "snippets": [
            {
                "language": "html",
                "path": "./snippets/snippets.json"
            }
        ]
    }
}

3.3 填寫Readme.md

在上面第二節中已經提到過readme.md的作用了，vsc團隊要求在發布時，一定不能用默認生成的readme.md的內容，那我們就隨便改改吧（建議實際操作時，按VSC建議的格式認真寫）

3.4 打包成.vsix

在插件根目錄執行下面的命令：

 
 
 
         

  
  
  
          
vsce package
 
 
 
         

此時它會報個警告信息，讓你確認：

A 'repository' field is missing from the 'package.json' manifest file.

這個是由於我們沒有在package.json中填寫repository字段，可以直接忽略該警告，也可以將你放擴展的源碼Git路徑填寫一下，例如下面這樣：

{
    "name": "hello-world",
    "displayName": "hello-world",
    "description": "it's a demo",
    "version": "0.0.2",
    "engines": {
        "vscode": "^1.32.0"
    },
    "publisher": "jax",
    "repository": {
        "url": "https://github.com/"
    },
    "categories": [
        "Snippets"
    ],
    "contributes": {
        "snippets": [
            {
                "language": "html",
                "path": "./snippets/snippets.json"
            }
        ]
    }
}

重新執行上面的打包命令，他就會自動生成出一個hello-world-0.0.2.vsix文件。

3.5 安裝擴展

有了這個擴展，你就可以給你的小伙伴拿去安裝啦，那怎么安裝呢？

首先，在VS Code中按F1,並選擇Extensions:Install from VSIX...這個選項，然后在彈出框中選擇剛才通過vsce打包出來的hello-world-0.0.2.vsix文件即可安裝完成。

安裝完成后，我們可以在擴展中找到我們的擴展：

4. 相關資料推薦

• 官網文檔：https://code.visualstudio.com/api

• 官方Demo:https://github.com/Microsoft/vscode-extension-samples