VSCodeの拡張機能を作ってみる その1 導入編

# VSCodeの拡張機能を作ってみよう
## モチベーション
仕事をする上で欠かせないものとなりつつあるVSCode。
自分なりにカスタマイズして使ったりもしているけれども。
拡張機能を利用すればどんなことまで出来るのかという事を知っておくと、
より使いこなす事が出来るかなと思いチュートリアルを試してみる事に。
### 参考
https://code.visualstudio.com/api
# 前準備
## Node.jsのインストール
チュートリアルに入る前にnpmを叩けないといけないので、Node.jsをインストール

1. Node.js公式からLTS版をダウンロード  
   https://nodejs.org/ja/
1. msi を実行してインストール
1. コマンドの実行確認

```
>node -v
v14.17.5

>npm -v
6.14.14
```

## 作業フォルダの作成
今回はWindows環境で作業するので、以下のフォルダを作業フォルダとして準備

```
C:\code_extention
```

# Your First Extension 
https://code.visualstudio.com/api/get-started/your-first-extension

npm で extention の開発に必要な Yeoman と VS Code Extension Generator のインストールを実施

```
C:\code_extention>npm install -g yo generator-code
```
しばらく待ってインストールが完了したらVSCode Extension generatorを起動
対話式の質問に対して返答して自動生成の実行を待つ

```
C:\code_extention>yo code

? ==========================================================================
We're constantly looking for ways to make yo better!
May we anonymously report usage statistics to improve the tool over time?
More info: https://github.com/yeoman/insight & http://yeoman.io
========================================================================== Yes

     _-----_     ╭──────────────────────────╮
    |       |    │   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? HelloWorld
? What's the identifier of your extension? helloworld
? What's the description of your extension?
? Initialize a git repository? Yes
? Bundle the source code with webpack? No
? Which package manager to use? npm
```

終了すると、idで指定したフォルダ名に以下画像のようなファイルが出来上がる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/446082/4f263bb1-8920-585a-7e55-55b770d86dbf.png)

生成されたフォルダをVSCodeで開く

```
C:\code_extention>code ./helloworld
```

立ち上がり次第、F5を押すとExtentionが実行される。
この時、F5を押したら__新しいウィンドウ__が立ち上がるので、その中でCtrl＋Shift＋Pを押して Hello と入力すれば、作成したExtentionが出てくる。
※ 元のウィンドウで、あれ？動かないとしばらくやってしまった

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/446082/2f3fe8bf-2c60-9076-9502-f90faa790151.png)
↓ F5押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/446082/bb31105e-7a1b-f55a-bf18-3b6062d8f924.png)
↓ 新しいWindowでCtrl＋Shift＋Pを押下し、Helloと入力し実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/446082/b0e461d7-8067-cbee-8514-27b87ff4fbef.png)
↓ 実行すると、右下にインフォメーションが表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/446082/50ea8c40-813a-5ea2-a692-b467a69572f2.png)

## Githubへ登録
折角なので、作成したプロジェクトをGithubに登録
ローカルリポジトリへのcommitはあらかじめしておく。

Githubで新規プロジェクトを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/446082/907a26e2-be5a-a678-17d2-3008a3e4b0af.png)

プロジェクトのリモートリポジトリを追加してPush

```
C:\code_extention\helloworld>git remote add origin https://github.com/yakato-jun/vscode-extention-example-helloworld.git
C:\code_extention\helloworld>git push --set-upstream origin master
```


登録したGithubリポジトリは以下。

https://github.com/yakato-jun/vscode-extention-example-helloworld

## 拡張機能コードの変更
(続く)