vscode 拡張機能作成

※自分用のメモになります。

公式ドキュメント

https://code.visualstudio.com/api/get-started/your-first-extension


作成環境
- OS: windows10
- vscode バージョン: 1.81.1 

## Node.jsのインストール

https://nodejs.org/ja

上記リンクへアクセス。最新の安定バージョンをダウンロードし、インストールします。

インストールパス(デフォルト) `C:\Program Files\nodejs\`

動作確認
```
λ node --version
v18.17.1

λ npm -v
9.6.7

```

## vscode拡張機能に開発に必要なライブラリのインストール

```npm install -g yo generator-code```
でYeoman generator for Visual Studio Code Extensionsをインストール
```npm install -g vsce```
でVSCEをインストール

## プロジェクトを作成する。

``` yo code ``` を実行

ひとまずNew Extension (TypeScript)を作成してみる。

```
λ 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? first-extension                        
? What's the identifier of your extension? first-extension                  
? What's the description of your extension?                                 
? Initialize a git repository? Yes                                          
? Bundle the source code with webpack? Yes                                  
? Which package manager to use? npm                                         
                                                                            
Writing in C:\arrange\first-extension...                                    
   create first-extension\.vscode\extensions.json                           
   create first-extension\.vscode\launch.json                               
   create first-extension\.vscode\settings.json                             
   create first-extension\.vscode\tasks.json                                
   create first-extension\package.json                                      
   create first-extension\tsconfig.json                                     
   create first-extension\.vscodeignore                                     
   create first-extension\webpack.config.js                                 
   create first-extension\vsc-extension-quickstart.md                       
   create first-extension\.gitignore                                        
   create first-extension\README.md                                         
   create first-extension\CHANGELOG.md                                      
   create first-extension\src\extension.ts                                  
   create first-extension\src\test\runTest.ts                               
   create first-extension\src\test\suite\extension.test.ts                  
   create first-extension\src\test\suite\index.ts                           
   create first-extension\.eslintrc.json                                    
                                                                            
Changes to package.json were detected.                                      
```

最後にvscodeで開くかどうかを聞かれるので、開く
```
For more information, also visit http://code.visualstudio.com and follow us @code.


? Do you want to open the new folder with Visual Studio Code? Open with `code`
```

## 動作確認

そのまま[F5]でデバック、仮想環境のvscodeのwindowが開く

仮想環境ウィンドウでコマンドパレットを開く(`ctrl+shift+p`) , Hello worldと入力するとコマンドが出てくるので実行する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297931/2d6d13a5-6d97-2d5d-c087-6f26b6d8e663.png)

Hello worldが表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297931/9ae8cec7-67e1-5653-4f0e-8168fdcbc75e.png)

## パッケージ化

いろいろ作成するパートはまた今度とし、配布のためにパッケージ化(ビルド)を試してみる。
```
λ cd first-extension\
λ vsce package
```
結果
```
Executing prepublish script 'npm run vscode:prepublish'...

> first-extension@0.0.1 vscode:prepublish
> npm run package


> first-extension@0.0.1 package
> webpack --mode production --devtool hidden-source-map

    [webpack-cli] Compiler starting...
    [webpack-cli] Compiler is using config: 'C:\arrange\first-extension\webpack.config.js'
    [webpack-cli] Compiler finished
asset extension.js 623 bytes [emitted] [minimized] (name: main) 1 related asset
./src/extension.ts 1.42 KiB [built] [code generated]
external "vscode" 42 bytes [built] [code generated]
webpack 5.88.2 compiled successfully in 1887 ms
 ERROR  Make sure to edit the README.md file before you package or publish your extension.
```

なんか怒られた。。。readmeを書きなさいとのことでした。。。
readmeを適当に編集して再度、 `vsce package` を実行！
```
Executing prepublish script 'npm run vscode:prepublish'...

> first-extension@0.0.1 vscode:prepublish
> npm run package


> first-extension@0.0.1 package
> webpack --mode production --devtool hidden-source-map

    [webpack-cli] Compiler starting...
    [webpack-cli] Compiler is using config: 'C:\arrange\first-extension\webpack.config.js'
    [webpack-cli] Compiler finished
asset extension.js 623 bytes [compared for emit] [minimized] (name: main) 1 related asset
./src/extension.ts 1.42 KiB [built] [code generated]
external "vscode" 42 bytes [built] [code generated]
webpack 5.88.2 compiled successfully in 1900 ms
 WARNING  A 'repository' field is missing from the 'package.json' manifest file.
Do you want to continue? [y/N] y
 WARNING  LICENSE.md, LICENSE.txt or LICENSE not found
Do you want to continue? [y/N] y
 DONE  Packaged: C:\arrange\first-extension\first-extension-0.0.1.vsix (7 files, 3.73KB)
```

リポジトリやライセンスを書きなさいと警告が出ますが、気にせず突き進む！
`DONE  Packaged: C:\arrange\first-extension\first-extension-0.0.1.vsix`が出来上がりました！
これが拡張機能を入れるときに必要なわけですね。

## 拡張機能をインストール

vscodeの拡張機能ページの `VSIXからのインストール`をクリックし、先ほどビルドした .vsixを選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297931/8978b5dd-d1dd-704f-8acc-e65b66bb5d73.png)

拡張機能のインストールが完了。
通常のvscodeから作成した拡張機能が使用可能になります。

## 実行！

いざ、実行！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297931/91b03bdf-3b0e-7aa1-850f-208edf05a59f.png)

出来ました。
めでたしめでたし。


## 今後

vscodeがサポートしていないプログラミング言語のハイライトやスニペット、できればデバッガや文法チェックのような機能を開発したい。