# 【VSCode】VSCodeのプラグイン開発を始める > VSCodeのプラグイン開発を始めるためのメモ - Canonical: https://c-a-p-engineer.github.io/vscode-extension-develop/ - Published: 2021-12-29T17:10:00.000Z - Modified: 2021-12-29T17:10:00.000Z - Tags: VSCode VSCodeのプラグイン開発を始めるためのメモ ## 1. 環境の用意私の場合は `Docker` と `.devcontainer` を使用しました。 `.devcontainer` はこちらのものを使用しました。 * masoncusack / nodejs-typescript-dev-container ## 2. ジェネレーターインストール最初に VSCode の拡張機能のジェネレーターをインストールします。 ```shell npm install -g yo generator-code ``` ## 3. 雛形の作成 `yo code` とコマンドを打つと以下のように雛形の作成が始まります。 ```shell _-----_ ╭──────────────────────────╮ | | │ Welcome to the Visual │ |--(o)--| │ Studio Code Extension │ `---------´ │ generator! │ ( _´U`_ ) ╰──────────────────────────╯ /___A___\ / | ~ | __'.___.'__ ´ ` |° ´ Y ` ? What type of extension do you want to create? ? What's the name of your extension? ? What's the identifier of your extension? ? What's the description of your extension? ? Initialize a git repository? ? Bundle the source code with webpack? ? Which package manager to use? ? Do you want to open the new folder with Visual Studio Code? ``` * ? What type of extension do you want to create? * 拡張機能のタイプ * ? What's the name of your extension? * 拡張機能名 * ? What's the identifier of your extension? * 拡張機能のID * ? What's the description of your extension? * 拡張機能の説明 * ? What's your publisher name? * 公開者 * ? Initialize a git repository? * git の初期化 ## 4.プラグインの確認テンプレートを作成すると `Hello,World` が表示されるプラグインが作られます。テンプレートが作成されたディレクトリをルートディレクトリになるようにVSCodeを開きます。 1. `F5` を押すとデバックが実行され、デバック時に新たなVSCodeが開きます。 2. 開いたVSCode側で `Ctrl + Shift + P` でコマンドパレットを開きます。 3. `Hello World` と入力 4. `Hello, World` とダイアログが表示されます。 ## 5. パッケージ化 1. パッケージ化をするためにパッケージを入れます。 ```shell npm i -D vsce ``` 2. パッケージ化を実行 ※`README.md` がデフォルトのままだと警告が出て止まります。 ```shell npx vsce package ``` 3. パッケージをインストールする出力されたパッケージを指定してVSCodeにインストールする事が可能です。 ``` code --install-extension helloworld-0.0.1.vsix ``` ## 参考情報 * Your First Extension | Visual Studio Code Extension API * vscodeの拡張機能を作ってみた - Zenn