====== Develop VS Code extension ======

{{template>:meta:template:pageinfo#tpl
|desc=Introduce how to develop an extension for VS Code.}}

===== Overview =====

This page only records some of the key steps and commands. If you want to learn more details, please refer to [[https://code.visualstudio.com/api/get-started/your-first-extension|your-first-extension]] to get started.

===== Preparation =====

  - Install **[[https://nodejs.org/en|Node.js]] ,** **[[https://git-scm.com/|git]]** and **[[https://www.npmjs.com/|npm]].** 
  - Then install **[[https://yeoman.io/|yeoman]]** and **[[https://www.npmjs.com/package/generator-code|Vs Code generator code]]** with <wrap cmd>npm</wrap> command.

Below are the installation steps in Linux.

<codeprism cmd=true lang=bash>
sudo apt install nodejs
sudo apt install git
sudo apt install npm
sudo npm install -g yo generator-code
</codeprism>

===== Development And Test =====

  * Run <wrap cmd>yo code</wrap>. \\ This command scaffolds a **TypeScript**  or **JavaScript**  project ready for development.
  * Develop your extension.
  * Press <wrap key>F5</wrap> in the **VS Code**  editor. This will __compile and run the extension__ in a new <wrap menu>Extension Development Host</wrap> window.
  * Run the command you designed from the Command Palette (<wrap keys><wrap key>Ctrl</wrap><wrap key>Shift</wrap><wrap key>p</wrap></wrap>) in the new window.

<callout type="info">
I have found a way to develop extensions using **Python**. However, it __was 
archived__ because the author did not have time to maintain it. 
Please refer to **[[https://pypi.org/project/vscode-ext/|vscode-ext]].**
</callout>

===== Generate Extension =====

  * Run <wrap cmd>vsce package</wrap> in the root directory to package an extension.
  * Run <wrap cmd>vsce publish</wrap> in the root directory to publish an extension.

===== Extension Management =====

  * Run <wrap cmd>code --install-extension <wrap cmdp>/path/to/ext.vsix</wrap></wrap> to install an extension.
  * Run <wrap cmd>code --list-extensions</wrap> to list the <wrap cmdp>ext-id</wrap> of the installed extensions.
  * Run <wrap cmd>code --uninstall-extension <wrap cmdp>ext-id</wrap></wrap> to uninstall an extension.

<WRAP box round>
**Example**\\
{{:tools:vscode:how_to:media:img:20230610-094038.png?direct&600}}
</WRAP>

===== Useful Links =====

  * [[https://code.visualstudio.com/api/references/extension-manifest|Extension-manifest]] \\  The details of some fields in <wrap file>package.json</wrap> are listed here.
  * [[https://code.visualstudio.com/api/references/vscode-api|VS Code API]] \\  This page lists all VS Code APIs that you can invoke in your Visual Studio Code extension.