Vscode拡張機能開発　環境構築～Command実装

# はじめに
VSCode拡張機能開発関係の記事って少ないですよね…
仕事の案件で初めて開発したとき、かなり苦労したのでできるだけ初心者にもわかるように説明します。
記事の目標は、拡張機能のCommandを作成し呼び出せるようになることです。

# Nodeをインストール
### ダウンロード
[Node.js](https://nodejs.org/en/download/prebuilt-installer)へ飛んでください。
バージョン選択用のプルダウンがあるので、最新のLTSをダウンロードしてください。
※本記事では「20.16.0(LTS)」を使用しています
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794983/a4338162-2ce7-e7f3-f245-3aa307b6d1ed.png)
インストーラをダウンロードしたら、msiを起動してインスールしてください。
特別な設定はなく、ボタンを押していくだけなので説明は省きます。
<br>
インストールが完了したら
```powershell:PowerShell
$ npm -v
```
でインストールされていることを確認します。

# yo generator-codeをインストール

次に「yo generator-code」をグローバルインストールします。
PowerShellで下記コマンドを実行しましょう。
```java:PowerShell
$ npm install -g yo generator-code
```

# プロジェクト作成
yo generator-codeのインストール完了後、任意のフォルダをPowerShellで開き、下記コマンドを実行します。

```powershell:PowerShell
$ npx yo code
```
対話形式で質問されるため、下記のように回答します。
? What type of extension do you want to create? **New Extension (TypeScript)**
? What's the name of your extension? **Sample**
? What's the identifier of your extension? **Sample**
? What's the description of your extension? **そのままエンター**
? Initialize a git repository? **Yes**
? Wich bundler to use?(Use arrow keys) **webpack**
? Which package manager to use? **npm**

<br>
全ての質問に回答すると<br>
? Do you want to open the new folder with Visual Studio Code? (Use arrow keys) <br>
と質問されるため、 Open with `code` を選択し、VScodeを起動します。<br>
このような構成が表示されたら環境構築完了です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794983/cb0ea55b-9995-f79c-1e8b-d5f2987a011a.png)

# 処理実装
拡張機能の処理は、extension.tsに実装していきます。
今回はPersonクラスのNameを表示するCommandを実装します。
Commandとは、ctrl + Shift + P　で開くショートカットのようなものです。
### 前準備
そのままではかなりコードが見づらいため、まずは、src/extension.tsを開き、不要なコードを削除します。
```typescript:extension.ts
import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) 
{
	vscode.commands.registerCommand('sample.helloWorld', () => {});
}

export function deactivate() {}
```
かなりスッキリしましたね。
続いて、src/person.tsを新規作成し下記コードを実装します。
```typescript:person.ts
import * as vscode from 'vscode';

export class Person
{
    private Name: string

    constructor(name: string)
    {
        this.Name = name
    }

    public sayName(): void
    {
        vscode.window.showInformationMessage(`私の名前は${this.Name}です。`);
    }
}
```

ここまでの作業で構成はこうなります。
src配下にperson.tsが追加されただけですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794983/0ab637d7-cd1c-17bc-c7f9-f5a29b5ad5af.png)
### extension.tsの実装
それでは、commandにPersonクラスのメソッドを登録しましょう。
extension.tsを書き換えます。

```typescript:extension.ts
import * as vscode from 'vscode';
import { Person } from './person';

export function activate(context: vscode.ExtensionContext) 
{
	const taro = new Person("taro");
    //sayというCommandにsayName()のメソッドを登録
	vscode.commands.registerCommand('say', () => {taro.sayName()}); 
}

export function deactivate() {}

```

「say」というCommandにPerson.sayName()が登録できました。
これでCommandの登録は完了です。

# extension.tsとpackage.jsonの依存関係を作る
次に、UI操作とCommandを結びつけるために、package.jsonを編集していきます。
>command : 呼び出すCommand
>title : UI表示用ラベル

extension.tsで「say」というCommandを登録したので下記のように設定します。
今回はTaroの名前を表示したいのでCommand呼び出しは分かりやすいように「taroName」にします。

```json:package.json
{
// 省略
  "contributes": {
    "commands": [
      {
        "command": "say",
        "title": "taroName"
      }
    ]
  },
// 省略
```
これで拡張機能の実装は一通り終了です。

# 動作確認
extension.tsを開いてF5キーを押しましょう。
VSCodeの新規Windowが開いてデバッグが開始されます。
画面が表示されたら「**ctrl + shift + p**」を押してください。
上部にコマンドパレットが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794983/9f752ee5-3f83-14c9-35e7-000c2a692569.png)

コマンドパレットに「taroName」と入力し、Enterを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794983/3f2a7825-05bb-d33d-7499-5d7fcf5aebae.png)

画面右下にメッセージが表示されたら成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794983/0dda854d-a5a8-8058-0227-704b67e90231.png)

# まとめ
ここまで読んでいただきありがとうございます。
普段文章を書かないためかなり手こずりました。
今回は一番簡単なCommand作成でしたが、他にもViewやButtonなど様々なUIが実装できます。
また別の記事でUI実装についてお話しますので、興味ある方は確認お願いします