VSC 插件開發從入門到Hello World

時間 2019-12-13

標籤 vsc 插件開發入門 hello world 简体版

原文原文鏈接

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

1.1 安裝基礎環境

須要的基礎環境列表：javascript

Node.js
npm
vs code
yo generator-code

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

安裝npm後經過下面的命令，安裝yo generator -corehtml

npm install -g yo generator-code

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

執行下面的命令：java

yo code

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

這裏咱們先選擇New Code Snippets（代碼片斷）github

接着是各類讓你選擇的東西，咱們能夠按下面的方式選（粗體爲你須要敲的字符）：typescript

? 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打開這個文件夾，大概是這樣一個畫風：npm

咱們打開snippets\snippets.json文件，並將其內容改成以下：編程

  1 {
  2     "hello world": {
  3         "prefix": "hw",
  4         "body": [
  5           "<h1>hello world</h1>"
  6         ],
  7         "description": "hello world"
  8       }
  9 }

1.3 調試擴展

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

咱們能夠經過ctrl + n建立一個新的頁面，並將點擊右下角的plan text，在彈出窗口中選擇html，將文件類型改成html，而後在新的頁面中鍵入hw,就能夠看到咱們剛寫的hello-world的代碼片斷已經生效啦。api

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

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文件中，其實放的不少東西是咱們剛纔在使用命令行初始化時敲的內容，以下：

 
 
 
 
 
  
  
  
  
    1 {
  2     "name": "hello-world", // 擴展名稱（ID）
  3     "displayName": "hello-world", // 擴展展現名稱
  4     "description": "it's a demo", // 擴展描述
  5     "version": "0.0.1", // 版本號
  6     "engines": {
  7         "vscode": "^1.32.0" // 兼容的VSC的版本，^1.32.0表示從兼容1.32.0以上的版本
  8     },
  9     "categories": [ // 插件的類型
 10         "Snippets" //表示該插件中會包含代碼片斷，
 11     ],
 12     "contributes": { // 一些額外的信息
 13         "snippets": [ // 用於代碼片斷的額外信息
 14             {
 15                 "language": "html", //該代碼片斷的語言是html
 16                 "path": "./snippets/snippets.json" // 代碼片斷位於該文件中
 17             }
 18         ]
 19     }
 20 }

那個人項目中，可能不單單有html，還會有typescript、javascript怎麼辦？

其實很簡單，只須要在contributes下的snippets節點中增長便可，相似以下：

  1 {
  2     "name": "hello-world",
  3     "displayName": "hello-world",
  4     "description": "it's a demo",
  5     "version": "0.0.1",
  6     "engines": {
  7         "vscode": "^1.32.0"
  8    },
  9     "categories": [
 10         "Snippets"
 11    ],
 12     "contributes": {
 13         "snippets": [
 14            {
 15                 "language": "html",
 16                 "path": "./snippets/snippets-html.json"
 17            },
 18            {
 19                 "language": "typescript",
 20                 "path": "./snippets/snippets-ts.json"
 21            },
 22            {
 23                 "language": "javascript",
 24                 "path": "./snippets/snippets-js.json"
 25            }
 26        ]
 27    }
 28 }

固然了，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爲以下：

  1 
  2 {
  3     "name": "hello-world",
  4     "displayName": "hello-world",
  5     "description": "it's a demo",
  6     "version": "0.0.1",
  7     "engines": {
  8         "vscode": "^1.32.0"
  9     },
 10     "publisher": "jax",
 11     "categories": [
 12         "Snippets"
 13     ],
 14     "contributes": {
 15         "snippets": [
 16             {
 17                 "language": "html",
 18                 "path": "./snippets/snippets.json"
 19             }
 20         ]
 21     }
 22 }

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"
            }
        ]
    }
}