VSCode 拡張開発入門① 環境構築 ~ HelloWorld

May 22, 2020

この記事は1年以上が経過しています。内容が古い可能性があります。

事前準備

あたりまえですが、VSCode は必要です。 Download Visual Studio Code - Mac, Linux, Windowsからダウンロードする

それと、Node.js(npm)が必要なのでインストール済みであること

公式サイト

Extension API | Visual Studio Code Extension API

以下リポジトリには実装のサンプルコードがあります。

microsoft/vscode-extension-samples: Sample code illustrating the VS Code extension API.

環境構築

インストール

VSCode 拡張の雛形生成には Yomen を使用します。下記コマンドで yoment と generator をインストールします。

npm install -g yo generator-code

HelloWorld

generator-codeでコード生成するだけで、コマンド実行で Info(通知)に「HelloWorld」と表示するコードを生成できます。

雛形生成

とりあえず試してみましょう。

yo code

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

? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? Hello
? What's the identifier of your extension? hello
? What's the description of your extension?
? Initialize a git repository? Yes
? Which package manager to use? yarn

yo codeを実行するとまずはじめに、どのタイプの拡張を生成するか聞かれます。

今回は、New Extension (TypeScript)を選択します。

その後は、エクステンション名やパッケージマネジャーなどを聞かれます。

適当に入力します。

フォルダ構成

yo codeを実行すると下記フォルダとファイルが生成されます。

.
├── .gitignore
├── .vscode
├── .vscodeignore
├── out
├── src
│   ├── extension.ts
│   └── test
│       ├── runTest.ts
│       └── suite
│           ├── extension.test.ts
│           └── index.ts
├── package.json
├── tsconfig.json
├── vsc-extension-quickstart.md
├── CHANGELOG.md
├── README.md
└── yarn.lock

主にsrcフォルダとpackage.jsonが編集するファイルになります。

src/extension.ts: エクステンションの実装をこのファイルに記述します。
src/test: テストの実装をします
package.json: コマンド・イベントなどの記述をする

起動してみる

アクティビティーバーのデバックアイコンもしくはF5から起動します。

cmd + Shift + pでHello Worldを選択すると、info が表示されます。

Alt text

※gif の速度が早く、わかりにくくてすいません。。。

Garbanzo Note