LoginSignup
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@sukimaengineer

Visual Studio Code の拡張機能を自作してみよう ～最速で始めるExtension開発入門～

Last updated at Posted at 2025-01-12

はじめに

VS Codeは軽量・高速で、豊富な拡張機能（Extension）を導入して作業効率を高めることができます。さらに、この拡張機能を自分好みにカスタマイズして開発することも可能です。本記事では、VS Code拡張機能の自作手順を「Hello World」レベルから最速で解説し、作成から公開までの流れをひと通り紹介します。自分専用の拡張機能を作って、開発効率を飛躍的に高めてみましょう。

なお、Visual Studio Code（以下、VS Code）は、GitHub上の「microsoft/vscode」リポジトリでオープンソースとして開発が進められており、多くのコミュニティの貢献を受けています。名称や公式バイナリの配布は Microsoft が主体で行っているため、一般的には「Microsoftが開発しているエディタ」として紹介されることが多いです。

前提知識・環境

  1. Node.js / npm または Yarn

    • VS Code拡張機能はNode.js環境で動作します。
    • Node.jsとnpm（またはYarn）があらかじめインストールされている必要があります。

  2. VS Code本体

    • なるべく最新バージョンを推奨します。
    • 古いバージョンだと対応しないAPIがあるため、問題が発生する場合があります。

  3. Yeoman (yo) と generator-code

    • VS Code拡張機能のひな形を自動生成するためのツールです。
    npm install -g yo generator-code

    または

    yarn global add yo generator-code

1. VS Code拡張機能の雛形を作成する

1-1. Yeomanのインストール

すでにインストール済みの場合はスキップでOKです。

npm install -g yo generator-code

あるいはYarnを使う場合:

yarn global add yo generator-code

1-2. プロジェクトの生成

プロジェクトを作りたいディレクトリに移動し、次のコマンドを実行します。

yo code

すると、対話形式で設定が進みます。

  1. What type of extension do you want to create?
    • 「New Extension (TypeScript)」または「New Extension (JavaScript)」などを選択。
  2. What's the name of your extension?
    • 拡張機能名を入力（例: my-vscode-extension）。
  3. What's the identifier of your extension?
    • npmパッケージのような形式で指定（例: my-vscode-extension）。
  4. What's the description of your extension?
    • 簡単な概要を入力。
  5. Initialize a git repository?
    • 必要に応じてYes/Noを選択。
  6. Which package manager to use?
    • npm か yarn を選択。

以上の設定で、TypeScriptまたはJavaScriptをベースにした最小限の拡張機能プロジェクトが生成されます。

2. フォルダ構成の理解

雛形プロジェクト（TypeScript版）の例は以下のとおりです。

my-vscode-extension
├── .vscodeignore
├── .gitignore
├── .eslintignore (ある場合)
├── .eslintrc.json (ある場合)
├── package.json
├── tsconfig.json
├── src
│   └── extension.ts
└── README.md

主なファイルの役割は以下のようになっています。

  • package.json
    • 拡張機能名やバージョン、依存パッケージ、コマンドなどの設定を記述。
  • extension.ts (または extension.js)
    • 拡張機能のメインロジックを書くファイル。
    • VS Codeが起動時に読み込むエントリーポイント。
  • tsconfig.json
    • TypeScriptのビルド設定ファイル。
  • .vscodeignore
    • 拡張機能をパッケージ化するときに除外したいファイルを指定するファイル。

3. 拡張機能の実装：Hello Worldからはじめよう

3-1. Hello Worldコマンドの追加

extension.ts には「Hello World」を表示するサンプルコードがあらかじめ用意されていることが多いです（TypeScript版の例を示します）。

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    console.log('拡張機能 "my-vscode-extension" が有効化されました。');

    let disposable = vscode.commands.registerCommand('my-vscode-extension.helloWorld', () => {
        vscode.window.showInformationMessage('Hello World from My VSCode Extension!');
    });

    context.subscriptions.push(disposable);
}

export function deactivate() {}

vscode.commands.registerCommandでmy-vscode-extension.helloWorldというコマンドを登録しており、ユーザーがこのコマンドを実行したときにshowInformationMessageが呼び出されます。

3-2. 実行・デバッグ方法

  1. VS Codeでこのプロジェクトを開く。
  2. F5キー、または画面左側の「Run and Debug」アイコン → 「Run Extension」を選択。
  3. 新たなVS Codeウィンドウが起動。
  4. コマンドパレット（Ctrl+Shift+P / Cmd+Shift+P）を開いて「Hello World」などと入力。
  5. 「Hello World from My VSCode Extension!」が表示されたら成功です。

4. コマンドや機能を追加する

4-1. 複数コマンドの追加

activate関数内に新しいコマンドをどんどん登録できます。

let command2 = vscode.commands.registerCommand('my-vscode-extension.sayGoodbye', () => {
    vscode.window.showInformationMessage('Goodbye from My VSCode Extension!');
});
context.subscriptions.push(command2);

さらに、package.json の "contributes" セクションにコマンドを定義すると、コマンドパレットでわかりやすい名前が表示されます。

{
  "contributes": {
    "commands": [
      {
        "command": "my-vscode-extension.helloWorld",
        "title": "Hello World"
      },
      {
        "command": "my-vscode-extension.sayGoodbye",
        "title": "Say Goodbye"
      }
    ]
  }
}

4-2. 設定項目（Settings）の追加

ユーザーが拡張機能をカスタマイズできるように、package.jsonで設定スキーマを定義できます。

{
  "contributes": {
    "configuration": {
      "type": "object",
      "title": "My Extension Configuration",
      "properties": {
        "my-vscode-extension.enableFeatureX": {
          "type": "boolean",
          "default": true,
          "description": "Feature X を有効にするかどうか"
        }
      }
    }
  }
}

これに対応する実装例（extension.tsなど）:

const config = vscode.workspace.getConfiguration('my-vscode-extension');
const isFeatureXEnabled = config.get<boolean>('enableFeatureX', true);

if (isFeatureXEnabled) {
    // Feature X を実行するロジック
}

5. 拡張機能のパッケージ化と公開

5-1. パッケージ化（VSIXファイルの作成）

社内や自分専用で配布したい場合には、.vsixファイルを作成し、ファイル共有などでインストールしてもらえます。

npm install -g vsce
vsce package

または

npx vsce package

これにより、(拡張機能名)-(バージョン).vsixファイルが生成されます。VS Code側では、コマンドパレットから「Extensions: Install from VSIX...」を選ぶだけでインストール可能です。

5-2. Marketplaceへの公開

Visual Studio Marketplaceに公開すると、世界中のVS Codeユーザーがインストールできるようになります。

  1. Azure DevOpsアカウントの取得
  2. Personal Access Token (PAT) の取得
    • Marketplaceへアップロードする際に必要。
  3. vsceで発行コマンドを実行 
    vsce publish
    バージョンを上げながら公開する場合は 
    vsce publish minor

6. よくある質問（FAQ）

  1. Q. Node.jsがない環境で開発できますか？
    A. 残念ながらできません。Node.jsは必須です。Windows/Mac/Linuxどの環境でも簡単にインストールできるので、まずはNode.js公式サイトからインストールしましょう。

  2. Q. TypeScriptとJavaScript、どちらがおすすめですか？
    A. どちらでも構いませんが、型定義や補完が充実しているTypeScriptが人気です。VS Code公式ドキュメントのサンプルもTypeScriptが多めです。

  3. Q. 拡張機能にアイコンを設定するには？
    A. package.json の "icon" フィールドにアイコン画像（PNGやSVGなど）のパスを指定します。Marketplaceに公開したとき、拡張機能一覧でそのアイコンが使われます。

  4. Q. 拡張機能を何度も更新したい場合は？
    A. Marketplaceに公開後は、vsce publish patch / minor / majorで簡単にバージョンを上げながら再公開できます。VSIXファイルで配布の場合は、新しいVSIXを再度パッケージ化して配布すればOKです。

  5. Q. デバッグ起動中にエラーが出た場合は？
    A. VS Code左下の「Debug Console」や「Problems」タブを確認してみましょう。console.logやvscode.window.showErrorMessageなどを使って原因を特定するのも有効です。

  6. Q. WindowsとMacで違いはありますか？
    A. 基本的には同じです。Node.jsとVS Codeさえ動作すれば開発環境は同様に動きます。パスの違いなどOS依存の微調整をする場合はありますが、多くのケースで問題ありません。

  7. Q. 社内限定で拡張機能を配布するには？
    A. .vsixファイルを作り、社内ファイルサーバやGitHubなどにアップしてメンバーに配布します。VS Codeで「Extensions: Install from VSIX...」コマンドを使ってインストール可能です。

  8. Q. yo code 以外にも拡張機能作成のテンプレートがあるようですが？
    A. yo code は標準的な拡張機能を作るためのテンプレートです。テーマ作成やLanguage Server Protocol対応など、他にも多様なテンプレートがありますが、まずはこの基本形に慣れるのがおすすめです。

  9. Q. Visual Studio Codeは本当にMicrosoftが開発しているのですか？
    A. VS Codeはオープンソースプロジェクトとしてコミュニティの協力を得ながら開発されています。ただし、公式バイナリの配布や商標、全体的な指揮はMicrosoftが行っているため、一般的に「Microsoftが開発したエディタ」と言われます。

  10. Q. VS Code拡張機能で gRPC+protobuf を使って、自作サーバーと通信することもできますか？
    A. はい、可能です。VS Code拡張機能の実態はNode.js上で動作するため、Node.jsで利用できるgRPCクライアントライブラリ（たとえば @grpc/grpc-js など）やprotobufの実装を導入すれば、自作サーバーとの通信が実現できます。ただし、拡張がブラウザ環境ではなくNode.js環境で動作していること、またセキュリティやネットワーク接続の制限（企業内ネットワークなど）がないか確認する必要があります。設定ファイル(package.json)へライブラリの依存関係を追加し、通信に必要なコードを extension.ts 内で書くことで、VS Code上から外部サーバーへのgRPC通信が行えます。

7. さらに理解を深めるためのポイント

  • 他の拡張機能リポジトリを読む
    GitHub等で公開されている拡張機能のソースコードを読むと、実装のヒントが得られます。
  • VS Codeの公式ドキュメントを活用
    VS Code公式ドキュメントにはAPIの詳細やサンプルが豊富に載っています。
  • 独自言語機能やデバッガ拡張にも挑戦
    コマンド以外にも、キーバインド設定、独自言語のシンタックスハイライト、デバッグ構成など拡張の幅は広いです。package.json の "contributes" セクションや Language Server Protocol(LSP) に着目してみてください。
  • Extensionテストの自動化
    拡張機能の規模が大きくなる場合は、自動テストの導入を検討すると品質を高めやすいです。

8. まとめ

自作のVS Code拡張機能は、日常のちょっとした手間を省く操作から、大規模プロジェクトでの自動化処理まで応用できます。以下のステップで進めてみましょう。

  1. 雛形プロジェクト作成（yo code）
  2. Hello Worldで動作確認
  3. 追加したい機能（コマンドや設定）を実装
  4. 必要に応じて .vsix ファイルで配布 or Marketplaceで公開

Node.jsとJavaScript/TypeScriptの基礎があれば、スムーズに導入できます。拡張機能によってエディタが自分専用に最適化されるので、開発効率や作業効率が大幅に向上します。ぜひチャレンジしてみてください！

参考リンク

最後に

VS Codeの拡張機能開発は一度覚えてしまうと、作業効率やチームの生産性を驚くほど向上させられます。ぜひカスタマイズを楽しんで、あなただけの最強エディタを作り上げてください。

以上

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?