package.json

在詳細介紹vscode外掛開發細節之前，這裡我們先詳細介紹一下vscode外掛的package.json寫法，但是建議先只需要隨便看一下，瞭解個大概，等後面講到具體細節的時候再回過頭來看。

如下是package.json檔案的常用配置，當然這裡還不是全部：

{
	// 外掛的名字，應全部小寫，不能有空格
 "name": "vscode-plugin-demo",// 外掛的友好顯示名稱，用於顯示在應用市場，支援中文
 "displayName": "VSCode外掛demo",// 描述
 "description": "VSCode外掛demo集錦",// 關鍵字，用於應用市場搜尋
 "keywords": ["vscode","plugin","demo"],// 版本號
 "version": "1.0.0",// 釋出者，如果要釋出到應用市場的話，這個名字必須與釋出者一致
 "publisher": "sxei",// 表示外掛最低支援的vscode版本
 "engines": {
  "vscode": "^1.27.0"
 },// 外掛應用市場分類，可選值： [Programming Languages,Snippets,Linters,Themes,Debuggers,Formatters,Keymaps,SCM Providers,Other,Extension Packs,Language Packs]
 "categories": [
  "Other"
 ],// 外掛圖示，至少128x128畫素
 "icon": "images/icon.png",// 擴充套件的啟用事件陣列，可以被哪些事件啟用擴充套件，後文有詳細介紹
 "activationEvents": [
  "onCommand:extension.sayHello"
 ],// 外掛的主入口
 "main": "./src/extension",// 貢獻點，整個外掛最重要最多的配置項
 "contributes": {
		// 外掛配置項
		"configuration": {
   "type": "object",// 配置項標題，會顯示在vscode的設定頁
   "title": "vscode-plugin-demo","properties": {
				// 這裡我隨便寫了2個設定，配置你的暱稱
    "vscodePluginDemo.yourName": {
     "type": "string","default": "guest","description": "你的名字"
    },// 是否在啟動時顯示提示
    "vscodePluginDemo.showTip": {
     "type": "boolean","default": true,"description": "是否在每次啟動時顯示歡迎提示！"
    }
   }
  },// 命令
  "commands": [
   {
    "command": "extension.sayHello","title": "Hello World"
   }
  ],// 快捷鍵繫結
  "keybindings": [
   {
    "command": "extension.sayHello","key": "ctrl+f10","mac": "cmd+f10","when": "editorTextFocus"
   }
  ],// 選單
  "menus": {
			// 編輯器右鍵選單
   "editor/context": [
    {
					// 表示只有編輯器具有焦點時才會在選單中出現
     "when": "editorFocus","command": "extension.sayHello",// navigation是一個永遠置頂的分組，後面的@6是人工進行組內排序
     "group": "navigation@6"
    },{
     "when": "editorFocus","command": "extension.demo.getCurrentFilePath","group": "navigation@5"
    },{
					// 只有編輯器具有焦點，並且開啟的是JS檔案才會出現
     "when": "editorFocus && resourceLangId == javascript","command": "extension.demo.testMenuShow","group": "z_commands"
    },{
     "command": "extension.demo.openWebview","group": "navigation"
    }
   ],// 編輯器右上角圖示，不配置圖片就顯示文字
   "editor/title": [
    {
     "when": "editorFocus && resourceLangId == javascript",// 編輯器標題右鍵選單
   "editor/title/context": [
    {
     "when": "resourceLangId == javascript",// 資源管理器右鍵選單
   "explorer/context": [
    {
     "command": "extension.demo.getCurrentFilePath","group": "navigation"
    },"group": "navigation"
    }
   ]
  },// 程式碼片段
  "snippets": [
   {
    "language": "javascript","path": "./snippets/javascript.json"
   },{
    "language": "html","path": "./snippets/html.json"
   }
  ],// 自定義新的activitybar圖示，也就是左側側邊欄大的圖示
  "viewsContainers": {
   "activitybar": [
    {
     "id": "beautifulGirl","title": "美女","icon": "images/beautifulGirl.svg"
    }
   ]
  },// 自定義側邊欄內view的實現
  "views": {
			// 和 viewsContainers 的id對應
   "beautifulGirl": [
    {
     "id": "beautifulGirl1","name": "國內美女"
    },{
     "id": "beautifulGirl2","name": "國外美女"
    },{
     "id": "beautifulGirl3","name": "人妖"
    }
   ]
  },// 圖示主題
  "iconThemes": [
   {
    "id": "testIconTheme","label": "測試圖示主題","path": "./theme/icon-theme.json"
   }
  ]
 },// 同 npm scripts
 "scripts": {
  "postinstall": "node ./node_modules/vscode/bin/install","test": "node ./node_modules/vscode/bin/test"
 },// 開發依賴
 "devDependencies": {
  "typescript": "^2.6.1","vscode": "^1.1.6","eslint": "^4.11.0","@types/node": "^7.0.43","@types/mocha": "^2.2.42"
 },// 後面這幾個應該不用介紹了
 "license": "SEE LICENSE IN LICENSE.txt","bugs": {
  "url": "https://github.com/sxei/vscode-plugin-demo/issues"
 },"repository": {
  "type": "git","url": "https://github.com/sxei/vscode-plugin-demo"
 },// 主頁
 "homepage": "https://github.com/sxei/vscode-plugin-demo/blob/master/README.md"
}

activationEvents

外掛在VS Code中預設是沒有被啟用的，哪什麼時候才被啟用呢？就是通過activationEvents來配置，目前支援一下8種配置：

• onLanguage:${language}
• onCommand:${command}
• onDebug
• workspaceContains:${toplevelfilename}
• onFileSystem:${scheme}
• onView:${viewId}
• onUri
• *

都比較好懂，我就不做一一介紹了，舉個例子，如果我配置了onLanguage:javascript，那麼只要我打開了JS型別的檔案，外掛就會被啟用。

重點說一下*，如果配置了*，只要一啟動vscode，外掛就會被啟用，為了出色的使用者體驗，官方不推薦這麼做。看到這裡相信大家知道了我們前面HelloWord裡面為啥要配置onCommand了吧。

3.contributes

• configuration：設定
• commands：命令
• menus：選單
• keybindings：快捷鍵繫結
• languages：新語言支援
• debuggers：除錯
• breakpoints：斷點
• grammars
• themes：主題
• snippets：程式碼片段
• jsonValidation：自定義JSON校驗
• views：左側側邊欄檢視
• viewsContainers：自定義activitybar
• problemMatchers
• problemPatterns
• taskDefinitions
• colors

參考

extension-manifest

activation-events

貢獻點清單

總結

到此這篇關於VSCode外掛開發全攻略之package.json詳解的文章就介紹到這了,更多相關VSCode外掛開發 package.json內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！