Visual Studio Code での Extension開発01 (わたくしの最初の拡張)



# Visual Studio Code での Extension開発01<br>(わたくしの最初の拡張)
---


* [Visual Studio Code での Extension開発<br>(わたくしの最初の拡張)](#visual-studio-code-での-extension開発brわたくしの最初の拡張)
	* [概要](#概要)
	* [わたくしの最初の拡張](#わたくしの最初の拡張)
		* [ジェネレータの実行](#ジェネレータの実行)
		* [コードの実行](#コードの実行)
		* [メッセージの変更](#メッセージの変更)
		* [さらに、いくつかの試すべきアイディア](#さらに-いくつかの試すべきアイディア)
			* [1.コマンドパレット上のコマンド名の変更](#1コマンドパレット上のコマンド名の変更)
			* [2.現在時刻を表示するコマンドの作成](#2現在時刻を表示するコマンドの作成)
			* [3.警告メッセージの表示](#3警告メッセージの表示)


---

## 概要
「わたくしの最初の拡張」を目的とします
※これは公式ドキュメントのタイトル「あなたの最初の拡張」であることに因みます

公式ドキュメントと前回分は以下の通りです

- 公式ドキュメント  [あなたの最初の拡張 Visual Studioコード拡張API](https://code.visualstudio.com/api/get-started/your-first-extension)
- 前回分: [Visual Studio Code での Extension 開発(環境構築)](https://qiita.com/intertext543210/items/3a593f14c543ff4fed91)


前回は開発環境の構築までをおこないました
今回も公式ドキュメントを参照しながら進めていきます
では、はじめます

以下、引用は断りがない限り、公式ドキュメントからの引用とします

---

## わたくしの最初の拡張
### ジェネレータの実行
>The generator scaffolds a project ready for development. 
Run the generator and fill out a few fields:
日本語google翻訳
ジェネレータは開発の準備ができているプロジェクトを足場にします
ジェネレータを実行して、いくつかのフィールドに記入してください

まずはじめに、コマンドラインで以下を実行します

`yo code`

⬇

```
PS C:\Users\************> yo code

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

? What type of extension do you want to create? (Use arrow keys)
> New Extension (TypeScript)
  New Extension (JavaScript)
  New Color Theme
  New Language Support
  New Code Snippets
  New Keymap
  New Extension Pack
(Move up and down to reveal more choices)
```
いろいろと聞かれます
次のように入力します
⬇

`? What type of extension do you want to create?` New Extension (TypeScript)

`? What's the name of your extension?` HelloWorld

`? What's the identifier of your extension?` helloworld

`? What's the description of your extension?` LEAVE BLANK　
※これはもしかすると何も入力しなくてよいのかもしれません

`? Initialize a git repository?` Yes

`? Which package manager to use?` npm

入力を完了するとファイル群がインストールされます

### コードの実行

コマンドラインで以下を実行します

`code ./helloworld`

すると、新しいウィンドウが起動します

>Then, inside the editor, press F5. 
This will compile and run the extension in a new Extension Development Host window.
日本語google翻訳
次に、エディタ内で __F5__ を押します
これにより、新しい拡張機能開発ホストウィンドウで拡張機能がコンパイルおよび実行されます

__F5__ を押下します(ビルドに少し時間がかかります)

新しい拡張機能開発ホストウィンドウが開きます
コマンドパレット`(Ctrl+Shift+P)`を表示し __Hello World__ と入力します

実行結果
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347291/ce67130b-007c-69be-b2e1-67d6e753b69a.jpeg" width="350">

無事、通知がポップアップされました


### メッセージの変更
>Let's make a change to the message

チュートリアルに従ってメッセージを変更します


以下の手順が紹介されています（番号はこちらで付記しました）

```
1. Change the message from Hello World to Hello VS Code in extension.ts
2. Run Reload Window in the new window
3. Run the command Hello World again.You should see the updated message showing up.
```

実施していきます
 ⬇
__extension.ts__ のメッセージを変更すればいいので __extension.ts__ を探します
パス：helloworld\src\ __extension.ts__

__extension.ts__

```ts
import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
    console.log('Congratulations, your extension "helloworld" is now active!');
  let disposable = vscode.commands.registerCommand('extension.helloWorld', () => {
    vscode.window.showInformationMessage('Hello VS Code!');
    //「Hello World!」から「Hello VS Code!」に変更
  });
  context.subscriptions.push(disposable);
}
export function deactivate() {}
```

memo:メッセージの出力
`vscode.window.showInformationMessage('Message');`

実行結果
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347291/9befd5b0-03a4-1f55-347f-4efb85e9eb86.jpeg" width="350">

無事、通知がポップアップされました

### さらに、いくつかの試すべきアイディア

以下を試してみます（番号はこちらで付記しました）

```
Here are some ideas for you to try:
1. Give the Hello World command a new name in the Command Palette.
2. Contribute another command that displays current time in an information message.
3. Replace the vscode.window.
  showInformationMessage with another VS Code API call to show a warning message.
```

結構厳しい感じです
ひとつずつ片づけます

---
#### 1.コマンドパレット上のコマンド名の変更

結論から言えば、__package.json__ を編集することで解決できました
※package.jsonは`yo code`コマンドで作成したフォルダ直下にあります

__package.json__ は様々な、定義ファイルのようです
>Each VS Code extension must have a __package.json__ as its Extension Manifest.
日本語google翻訳
各VS Code拡張機能は、その拡張機能マニフェストとして __package.json__ を持つ必要があります

package.json の __"title"__ 欄を「myApp」に変更しました 
以下、部分の抜粋です

```json
 "contributes": {
    "commands": [
      {
        "command": "extension.helloWorld",
        "title": "myApp"
      }
    ]
  }
```
⬇
結果
コマンドパレット上のコマンド名を変更できました
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347291/416149e1-c3c3-4329-0d3f-d4fc90754945.jpeg" width="450">

---

#### 2.現在時刻を表示するコマンドの作成

対象は, __extension.ts__　のメッセージ部分です
`showInformationMessage`の引数に`Date()`を指定

```ts
vscode.window.showInformationMessage(Date());
```
 ⬇
 実行結果
 日付が表示できました
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347291/2ce4c75f-263e-2b25-c447-aa0c058a4313.jpeg" width="450">

#### 3.警告メッセージの表示
>vscode.window.showInformationMessage with another VS Code API call to show a warning message.
日本語googel翻訳
警告メッセージを表示するには、vscode.window.showInformationMessageを
別のVS Code API呼び出しに置き換えます

- 各種メソッドについて　[VSコードAPI | Visual Studioコード拡張API](https://code.visualstudio.com/api/references/vscode-api)<br>
上記のリンクからそれらしいメソッド`showWarningMessage`がありました

memo:警告の出力
`showWarningMessage(message: string, ...items: string[]): Thenable<string | undefined>`

以下、修正します

__extension.ts__

```ts
import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    console.log('Congratulations, your extension "helloworld" is now active!');
  let disposable = vscode.commands.registerCommand('extension.helloWorld', () => {
    vscode.window.showWarningMessage("WarningMessag");
    //vscode.window.showInformationMessage('Hello VS Code!');から変更
  });
  context.subscriptions.push(disposable);
}

export function deactivate() {}
```
⬇
 実行結果
 警告が表示できました
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347291/0e2554f7-ef6d-7c0f-234e-9b60cd97a62a.jpeg" width="350">

---

以上で、公式ドキュメントあなたの最初の拡張(Your First Extension)が完了しました
>In the next topic, Extension Anatomy, 
we'll take a closer look at the source code of the Hello World sample and explain key concepts.  

この先では、ソースコードを詳しく見ていくようです


---

## 参考
- 公式ドキュメント  [あなたの最初の拡張 Visual Studioコード拡張API](https://code.visualstudio.com/api/get-started/your-first-extension)
- 公式ドキュメント [VSコードAPI | Visual Studioコード拡張API](https://code.visualstudio.com/api/references/vscode-api)
- TypeScript [ハンドブック](https://www.typescriptlang.org/docs/handbook/basic-types.html)