M

VS Codeの拡張について公式ドキュメント読んだメモ

Apr 11, 2024

Your First Extension | Visual Studio Code Extension API読んでメモ。

  • Node.jsおよびGitがインストール済みの前提。

  • yomanでgenerator-code使ってプロジェクト作る。

    • yomanをローカルにインストールせずともnpx --package yo --package generator-code -- yo codeで大丈夫。
    • ❯ npx --package yo --package generator-code -- yo code
Need to install the following packages:
yo@5.0.0
generator-code@1.8.5
Ok to proceed? (y) y

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of extension do you want to create?
❯ New Extension (TypeScript)
  New Extension (JavaScript)
  New Color Theme
  New Language Support
  New Code Snippets
  New Keymap
  New Extension Pack
  New Language Pack (Localization)
  New Web Extension (TypeScript)
  New Notebook Renderer (TypeScript)
? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? vscode-ext-hello
? What's the identifier of your extension? vscode-ext-hello
? What's the description of your extension? hello
? Initialize a git repository? Yes
? Bundle the source code with webpack? Yes
? Which package manager to use? pnpm

  • src/extension.tsがエントリーポイント。

  • src/extension.tsを開いて、Debug: Start Debuggingをコマンドパレットで実行。

    • コンパイルして、拡張機能の開発ホストウィンドウが起動する。
    • 開発ホストウィンドウでコマンドパレットを開いて、Hello Worldを実行すると、Hello World!が表示される。
    • vscode.window.showInformationMessageでメッセージを表示できる。

  • APIはAPI Reference | Visual Studio Code Extension APIで確認できる。

  • ブレークポイント貼ってデバッグできる。