🚀 在 VS Code 中免費取得

擴充功能資訊清單

每個 Visual Studio Code 擴充功能都需要一個資訊清單檔案 package.json,位於擴充功能目錄結構的根目錄。

欄位

名稱 必要 類型 詳細資訊
name 字串 擴充功能的名稱 - 應全部小寫且不含空格。
名稱在市集中必須是唯一的。
version 字串 SemVer 相容的版本。
publisher 字串 發行者識別碼
engines 物件 一個物件,其中至少包含 vscode 鍵,以符合擴充功能 相容 的 VS Code 版本。不能為 *。例如:^0.10.5 表示與最低 VS Code 版本 0.10.5 相容。
license 字串 請參閱 npm 的文件。如果您的擴充功能根目錄中有 LICENSE 檔案,則 license 的值應為 "SEE LICENSE IN <filename>"
displayName 字串 在市集中使用的擴充功能顯示名稱。
顯示名稱在市集中必須是唯一的。
description 字串 簡短描述您的擴充功能是什麼以及做什麼。
categories 字串陣列 您想要用於擴充功能類別。允許的值:[程式語言, 程式碼片段, 語法檢查器, 佈景主題, 偵錯工具, 格式器, 鍵盤對應, SCM 提供者, 其他, 擴充功能包, 語言包, 資料科學, 機器學習, 可視化, 筆記本, 教育, 測試]
keywords 陣列 一個關鍵字陣列,讓擴充功能更容易被找到。這些關鍵字與市集上的其他擴充功能標籤一起包含在內。此列表目前限制為 5 個關鍵字。
galleryBanner 物件 協助格式化市集標頭以符合您的圖示。請參閱以下詳細資訊。
preview 布林值 設定擴充功能在市集中標記為預覽版。
main 字串 您的擴充功能的進入點。
browser 字串 您的 Web 擴充功能的進入點。
contributes 物件 描述擴充功能貢獻的物件。
activationEvents 陣列 此擴充功能的啟動事件陣列。
badges 陣列 要在市集擴充功能頁面的側邊欄中顯示的核准徽章陣列。每個徽章都是一個物件,包含 3 個屬性:徽章圖片 URL 的 url、使用者點擊徽章時將追蹤的連結 hrefdescription
markdown 字串 控制市集中使用的 Markdown 轉譯引擎。github (預設) 或 standard
qna marketplace (預設)、stringfalse 控制市集中的問與答連結。設定為 marketplace 以啟用預設市集問與答網站。設定為字串以提供自訂問與答網站的 URL。設定為 false 以完全停用問與答。
sponsor 物件 指定使用者可以贊助您的擴充功能的位置。這是一個具有單一屬性 url 的物件,該屬性連結到使用者可以贊助您的擴充功能的頁面。
dependencies 物件 您的擴充功能需要的任何執行階段 Node.js 相依性。與 npm 的 dependencies 完全相同。
devDependencies 物件 您的擴充功能需要的任何開發 Node.js 相依性。與 npm 的 devDependencies 完全相同。
extensionPack 陣列 一個陣列,包含可以一起安裝的擴充功能 ID。擴充功能的 ID 始終為 ${publisher}.${name}。例如:vscode.csharp
extensionDependencies 陣列 一個陣列,包含此擴充功能所依賴的擴充功能 ID。擴充功能的 ID 始終為 ${publisher}.${name}。例如:vscode.csharp
extensionKind 陣列 一個陣列,指示擴充功能應在遠端組態中執行的位置。值為 ui (在本機執行)、workspace (在遠端電腦上執行) 或兩者皆可,順序設定偏好設定。例如:[ui, workspace] 表示擴充功能可以在任一位置執行,但偏好在本機電腦上執行。有關更多詳細資訊,請參閱此處
scripts 物件 npm 的 scripts 完全相同,但具有額外的 VS Code 特定欄位,例如 vscode:prepublishvscode:uninstall
icon 字串 至少 128x128 像素(Retina 螢幕為 256x256)的圖示路徑。
pricing 字串 擴充功能的定價資訊。允許的值:FreeTrial。預設值:Free。有關更多詳細資訊,請參閱此處
capabilities 物件 一個物件,描述擴充功能在受限工作區中的功能:untrustedWorkspacesvirtualWorkspaces

另請查看 npm 的 package.json 參考資料

範例

以下是一個完整的 package.json

{
  "name": "wordcount",
  "displayName": "Word Count",
  "version": "0.1.0",
  "publisher": "ms-vscode",
  "description": "Markdown Word Count Example - reports out the number of words in a Markdown file.",
  "author": {
    "name": "sean"
  },
  "categories": ["Other"],
  "icon": "images/icon.png",
  "galleryBanner": {
    "color": "#C80000",
    "theme": "dark"
  },
  "pricing": "Free",
  "activationEvents": ["onLanguage:markdown"],
  "engines": {
    "vscode": "^1.0.0"
  },
  "main": "./out/extension",
  "scripts": {
    "vscode:prepublish": "node ./node_modules/vscode/bin/compile",
    "compile": "node ./node_modules/vscode/bin/compile -watch -p ./"
  },
  "devDependencies": {
    "@types/vscode": "^0.10.x",
    "typescript": "^1.6.2"
  },
  "license": "SEE LICENSE IN LICENSE.txt",
  "bugs": {
    "url": "https://github.com/microsoft/vscode-wordcount/issues",
    "email": "sean@contoso.com"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/microsoft/vscode-wordcount.git"
  },
  "homepage": "https://github.com/microsoft/vscode-wordcount/blob/main/README.md"
}

市集呈現技巧

以下是一些提示和建議,可讓您的擴充功能在 VS Code 市集上顯示時看起來更棒。

始終使用最新的 vsce,因此請執行 npm install -g @vscode/vsce 以確保您擁有它。

在您的擴充功能根目錄中建立一個 README.md Markdown 檔案,我們將在擴充功能詳細資訊的主體(在市集上)中包含其內容。您可以在 README.md 中提供相對路徑的圖片連結。

以下是一些範例

  1. Word Count
  2. MD Tools

提供良好的顯示名稱和描述。這對於市集和產品顯示非常重要。這些字串也用於 VS Code 中的文字搜尋,擁有相關的關鍵字將有很大幫助。

    "displayName": "Word Count",
    "description": "Markdown Word Count Example - reports out the number of words in a Markdown file.",

圖示和對比鮮明的橫幅色彩在市集頁面標頭上看起來很棒。theme 屬性指的是橫幅中要使用的字型 - darklight

{
  "icon": "images/icon.png",
  "galleryBanner": {
    "color": "#C80000",
    "theme": "dark"
  }
}

您可以設定幾個選用連結(bugshomepagerepository),這些連結會顯示在市集的資源區段下。

{
  "license": "SEE LICENSE IN LICENSE.txt",
  "homepage": "https://github.com/microsoft/vscode-wordcount/blob/main/README.md",
  "bugs": {
    "url": "https://github.com/microsoft/vscode-wordcount/issues",
    "email": "sean@contoso.com"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/microsoft/vscode-wordcount.git"
  }
}
市集資源連結 package.json 屬性
問題 bugs:url
存放庫 repository:url
首頁 homepage
授權 license

為您的擴充功能設定 category。相同 category 中的擴充功能在市集中會分組在一起,這有助於改善篩選和探索。

注意:僅使用對您的擴充功能有意義的值。允許的值為 [程式語言, 程式碼片段, 語法檢查器, 佈景主題, 偵錯工具, 格式器, 鍵盤對應, SCM 提供者, 其他, 擴充功能包, 語言包, 資料科學, 機器學習, 可視化, 筆記本, 教育, 測試]。對於一般語言功能(例如語法醒目提示和程式碼完成),請使用 程式語言 類別。語言包 類別保留給顯示語言擴充功能(例如,本地化的保加利亞語)。

{
  "categories": ["Linters", "Programming Languages", "Other"]
}

核准的徽章

由於安全考量,我們僅允許來自受信任服務的徽章。

我們允許來自以下 URL 前綴的徽章

  • api.bintray.com
  • api.travis-ci.com
  • api.travis-ci.org
  • app.fossa.io
  • badge.buildkite.com
  • badge.fury.io
  • badge.waffle.io
  • badgen.net
  • badges.frapsoft.com
  • badges.gitter.im
  • badges.greenkeeper.io
  • cdn.travis-ci.com
  • cdn.travis-ci.org
  • ci.appveyor.com
  • circleci.com
  • cla.opensource.microsoft.com
  • codacy.com
  • codeclimate.com
  • codecov.io
  • coveralls.io
  • david-dm.org
  • deepscan.io
  • dev.azure.com
  • docs.rs
  • flat.badgen.net
  • gemnasium.com
  • github.com (僅限工作流程)
  • gitlab.com
  • godoc.org
  • goreportcard.com
  • img.shields.io
  • isitmaintained.com
  • marketplace.visualstudio.com
  • nodesecurity.io
  • opencollective.com
  • snyk.io
  • travis-ci.com
  • travis-ci.org
  • visualstudio.com
  • vsmarketplacebadges.dev
  • www.versioneye.com

注意:請將 vsmarketplacebadge.apphb.com 徽章替換為 vsmarketplacebadges.dev 徽章。

如果您有其他想要使用的徽章,請開啟一個 GitHub issue,我們很樂意查看。

合併擴充功能貢獻

yo code 產生器可讓您輕鬆封裝 TextMate 佈景主題、著色器和程式碼片段,並建立新的擴充功能。當產生器執行時,它會為每個選項建立一個完整的獨立擴充功能包。但是,擁有一個結合多個貢獻的單一擴充功能通常更方便。例如,如果您要新增對新語言的支援,您會希望為使用者提供語言定義與著色,以及程式碼片段,甚至可能包括偵錯支援。

若要合併擴充功能貢獻,請編輯現有的擴充功能資訊清單 package.json,並新增新的貢獻和相關檔案。

以下是一個擴充功能資訊清單,其中包含 LaTex 語言定義(語言識別碼和檔案擴充名)、著色 (grammars) 和程式碼片段。

{
  "name": "language-latex",
  "description": "LaTex Language Support",
  "version": "0.0.1",
  "publisher": "someone",
  "engines": {
    "vscode": "0.10.x"
  },
  "categories": ["Programming Languages", "Snippets"],
  "contributes": {
    "languages": [
      {
        "id": "latex",
        "aliases": ["LaTeX", "latex"],
        "extensions": [".tex"]
      }
    ],
    "grammars": [
      {
        "language": "latex",
        "scopeName": "text.tex.latex",
        "path": "./syntaxes/latex.tmLanguage.json"
      }
    ],
    "snippets": [
      {
        "language": "latex",
        "path": "./snippets/snippets.json"
      }
    ]
  }
}

請注意,擴充功能資訊清單的 categories 屬性現在同時包含 程式語言程式碼片段,以便在市集中輕鬆探索和篩選。

提示:請確保您合併的貢獻使用相同的識別碼。在上面的範例中,所有三個貢獻都使用 "latex" 作為語言識別碼。這讓 VS Code 知道著色器 (grammars) 和程式碼片段適用於 LaTeX 語言,並且在編輯 LaTeX 檔案時將會啟用。

擴充功能包

您可以將個別的擴充功能捆綁在擴充功能包中。擴充功能包是一組將一起安裝的擴充功能。這讓您可以輕鬆地與其他使用者分享您最喜歡的擴充功能,或為特定情境(例如 PHP 開發)建立一組擴充功能,以協助 PHP 開發人員快速開始使用 VS Code。

擴充功能包使用 package.json 檔案內的 extensionPack 屬性來捆綁其他擴充功能。

例如,以下是一個 PHP 的擴充功能包,其中包含偵錯工具和語言服務

{
  "extensionPack": ["xdebug.php-debug", "zobo.php-intellisense"]
}

安裝擴充功能包時,VS Code 現在也會安裝其擴充功能相依性。

擴充功能包應在 擴充功能包 市集類別中分類

{
  "categories": ["Extension Packs"]
}

若要建立擴充功能包,您可以使用 yo code Yeoman 產生器,並選擇 New Extension Pack 選項。有一個選項可以使用您目前在 VS Code 執行個體中安裝的擴充功能集來播種套件。這樣一來,您可以輕鬆地使用您最喜歡的擴充功能建立擴充功能包,將其發佈到市集,並與他人分享。

擴充功能包不應與其捆綁的擴充功能有任何功能相依性,並且捆綁的擴充功能應可獨立於套件進行管理。如果擴充功能依賴另一個擴充功能,則應使用 extensionDependencies 屬性宣告該相依性。

擴充功能解除安裝 Hook

如果您的擴充功能在從 VS Code 解除安裝時需要完成一些清理工作,您可以在擴充功能的 package.json 中 scripts 區段下註冊一個 node 腳本到解除安裝 Hook vscode:uninstall

{
  "scripts": {
    "vscode:uninstall": "node ./out/src/lifecycle"
  }
}

此腳本會在擴充功能從 VS Code 完全解除安裝時執行,也就是在擴充功能解除安裝後重新啟動 VS Code(關閉並啟動)時執行。

注意:僅支援 Node.js 腳本。

實用的 Node 模組

npmjs 上有幾個 Node.js 模組可用於協助編寫 VS Code 擴充功能。您可以將這些模組包含在擴充功能的 dependencies 區段中。

後續步驟

若要深入瞭解 VS Code 擴充性模型,請嘗試以下主題