VSCode外掛開發全攻略(三)package.json詳解
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": "
[email protected]" }, { "when": "editorFocus", "command": "extension.demo.getCurrentFilePath", "group": "[email protected]" }, { // 只有編輯器具有焦點,並且開啟的是JS檔案才會出現 "when": "editorFocus && resourceLangId == javascript", "command": "extension.demo.testMenuShow", "group": "z_commands" }, { "command": "extension.demo.openWebview", "group": "navigation" } ], // 編輯器右上角圖示,不配置圖片就顯示文字 "editor/title": [ { "when": "editorFocus && resourceLangId == javascript", "command": "extension.demo.testMenuShow", "group": "navigation" } ], // 編輯器標題右鍵選單 "editor/title/context": [ { "when": "resourceLangId == javascript", "command": "extension.demo.testMenuShow", "group": "navigation" } ], // 資源管理器右鍵選單 "explorer/context": [ { "command": "extension.demo.getCurrentFilePath", "group": "navigation" }, { "command": "extension.demo.openWebview", "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
了吧。
contributes
參考
相關推薦
VSCode外掛開發全攻略(三)package.json詳解
package.json 在詳細介紹vscode外掛開發細節之前,這裡我們先詳細介紹一下vscode外掛的package.json寫法,但是建議先只需要隨便看一下,瞭解個大概,等後面講到具體細節的時候再回過頭來看。 如下是package.json檔案的常用配置,當然這裡還不是全部: { // 外掛的
VSCode外掛開發全攻略(七)WebView
更多文章請戳VSCode外掛開發全攻略系列目錄導航。 什麼是Webview 大家都知道,整個VSCode編輯器就是一張大的網頁,其實,我們還可以在Visual Studio Code中建立完全自定義的、可以間接和nodejs通訊的特殊網頁(通過一個acquireVsCodeApi特殊方法),這個網頁就叫W
VSCode外掛開發全攻略(六)開發除錯技巧
更多文章請戳VSCode外掛開發全攻略系列目錄導航。 前言 在介紹完一些比較簡單的內容點之後,我覺得有必要先和大家介紹一些開發中遇到的一些細節問題以及技巧,特別是後面一章節將要介紹WebView的知識,這個坑會比較多,避免大家走彎路。 開發方式 最理想的方式是準備雙顯示器,一個寫程式
VSCode外掛開發全攻略(五)跳轉到定義、自動補全、懸停提示
更多文章請戳VSCode外掛開發全攻略系列目錄導航。 跳轉到定義 跳轉到定義其實很簡單,通過vscode.languages.registerDefinitionProvider註冊一個provider,這個provider如果返回了new vscode.Location()就表示當前游標所在單詞支援跳轉
VSCode外掛開發全攻略(一)概覽
文章索引 寫在前面 一年前我寫了一篇3萬多字的Chrome外掛(擴充套件)開發全攻略,反響還不錯,幫助了很多新手快速上手,甚至包括大名鼎鼎的紅芯瀏覽器(戳這裡瞭解更多)。 最近因工作需要又接觸到了vscode外掛開發,所以趁勢再寫一篇有關vscode外掛開發的文章,記錄一些自己踩過的坑以及接觸vscod
VSCode外掛開發全攻略(八)程式碼片段、設定、自定義歡迎頁
程式碼片段 程式碼片段,也叫snippets,相信大家都不陌生,就是輸入一個很簡單的單詞然後一回車帶出來很多程式碼。平時大家也可以直接在vscode中建立屬於自己的snippets: 建立程式碼片段 那麼如何在擴充套件中建立snippets呢? package.json檔案新增如下: "contribut
VSCode外掛開發全攻略(十)打包、釋出、升級
釋出方式 外掛開發完了,如何釋出出去分享給他人呢?主要有3種方法: 方法一:直接把資料夾發給別人,讓別人找到vscode的外掛存放目錄並放進去,然後重啟vscode,一般不推薦; 方法二:打包成vsix外掛,然後傳送給別人安裝,如果你的外掛涉及機密不方便釋出到應用市場,可以嘗試採用這種方式; 方法三:註冊
VSCode外掛開發全攻略(九)常用API總結
本文提煉一些常見的API使用場景供參考,本文內容有待完善。 編輯器相關 修改當前啟用編輯器內容 替換當前編輯器全部內容: vscode.window.activeTextEditor.edit(editBuilder => { // 從開始到結束,全量替換 const end = ne
VSCode外掛開發全攻略(二)HelloWord
寫著前面 學習一門新的語言或者生態首先肯定是從HelloWord開始。 您可以直接克隆我放在GitHub上vscode-plugin-demo 的程式碼到本地,然後嘗試修改程式碼並執行,也可以使用微軟官方的腳手架vscode-generator-code來生成專案結構,腳手架的使用我們後面再來介紹,先來熟悉
VSCode外掛開發全攻略(四)命令、選單、快捷鍵
命令 我們在前面HelloWord章節中已經提到了命令寫法,這裡再重溫一下。 context.subscriptions.push(vscode.commands.registerCommand('extension.sayHello', () => { vscode.window.showI
【乾貨】Chrome外掛(擴充套件)開發全攻略(轉載)
轉載來源:https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html 【乾貨】Chrome外掛(擴充套件)開發全攻略 寫在前面 我花了將近一個多月的時間斷斷續續寫下這篇博文,並精心寫下完整demo,寫部落格的辛苦大家懂的,
ClearCase完全攻略(三) UCM下的一些概念全解析1
上篇文章中的連結搞錯, clearcase的實施方案 ,Base的。其實就是較多的使用分支和標籤兩種策略 用來初步明白Base專案差不多。深入的還需要看更多的資料 先講下UCM的發展歷史,1999就提出了,然後到現在已經10多年了。所以算是相當成熟了,IBM官方出了
【微軟大法好】VS Tools for AI全攻略(2)
port shell orf 方式 virt cnblogs 我們 玩耍 虛擬 接著上文,我們來討論如何使用Azure資源來訓練我們的tensorflow項目。Azure雲我個人用得很多,主要是因為微軟爸爸批了150刀每月的額度,我可以愉快地玩耍。 那麽針對Azure,有成
C#微信公眾號全攻略(3)--接管所有訊息驗證部分 C#程式碼
新建網站 新建一般處理程式 怎麼操作SQL資料庫不寫了 只發一些關鍵部分程式碼 一般處理程式關鍵程式碼 public class Interface : IHttpHandler { public stati
C#微信公眾號全攻略(5)--群發訊息時的openid對應的使用者是誰呢
有一個openid不屬於公眾號關注使用者的任何一位 在通過微信控制檯群發訊息後 將有一個Event為MASSSENDJOBFINISH的事件推送 對應的openid 他是誰呢 他的nickname是張三瘋 來自 中國 廣東 廣州 簽名是DayDayUpUp
C#微信公眾號全攻略(4)--實現回覆訊息C#程式碼
接上文 這個函式把使用者發來的內容交接給messageHelp來處理 最後返回messageHelp.ReturnMessage private void Handle(string postStr) { messageHelp help = new
VS Tools for AI全攻略(2)低配置虛擬機器也能玩轉深度學習,無需NC/NV系列
接著上文VS Tools for AI全攻略,我們來討論如何使用Azure資源來訓練我們的tensorflow專案。Azure雲我個人用得很多,主要是因為微軟爸爸批了150刀每月的額度,我可以愉快地玩耍。 那麼針對Azure,有成套的兩個方案解決問題。 方案一(比較有錢的、對速度要求高的):使用De
Linux使用者管理全攻略(二)
摘要:本文詳解使用者(User)和使用者組(Group)的配置檔案,本文是《Linux 使用者(User)和使用者組(Group)管理概述》文件的關健部份的細化;通過本文,您至少能明白/etc/passwd /etc/group ,以及什麼是UID和GID 等;其中對UID的
Android程序保活全攻略(中)
在上一篇部落格Android程序保活全攻略(上)中介紹了程序保活的背景和一些方法的思路和實現方式,本篇部落格我將承接上篇部落格,繼續進行介紹。 9) 1畫素懸浮層 **思路:**1畫素懸浮層是傳說的QQ黑科技,監控手機鎖屏解鎖事件,在螢幕鎖屏時啟動1個
在Struts2中實現自定義分頁標籤全攻略(一)
我們先看看這個分頁標籤的效果: 使用標籤的最大好處就是下次再用到的話直接引用就行,而不必重寫。 本人對Struts2自定義標籤沒有太深究,在網上找了一些資料可以參考參考: 其實,開發自定義標籤並不需要Struts2的支援,一般情況下,只需要繼承javax.servle