【Windows】VSCodeで削除されたChatGPT拡張機能をローカルで復活させる

#
**【追記】**
**[# 6.もっと簡単にできるみたい？？](https://qiita.com/ku_a_i/items/fb7c80dd48edb392812d#6%E3%82%82%E3%81%A3%E3%81%A8%E7%B0%A1%E5%8D%98%E3%81%AB%E3%81%A7%E3%81%8D%E3%82%8B%E3%81%BF%E3%81%9F%E3%81%84)を追記しました。**
面倒ならこの方法でもいいみたいです。

**さらにわざわざ開発が終わったものを導入するのではなく、以下フォーク版の「ChatGPT Reborn」をvscodeで導入してみてもいいかもしれません。（開発者もこれに言及してました）**

https://github.com/Christopher-Hayes/vscode-chatgpt-reborn

# 0. はじめに


開発者の方がサポート終了を宣言してしまい、打ちひしがれた方も多いと思いますが開発者の方のリポジトリが公開されたのでこれをローカルから導入してみます。
※以下開発者がやり方を教えてくれているISSUEを参考にしました。

https://github.com/gencay/vscode-chatgpt/issues/239#issuecomment-1475024361

**vscodeの拡張機能/Node.js/yarnは全くのド素人ですが、ChatGPT君に聞きながらやってみました。**

- 動作環境
  *  OS : Windows10 pro
  *  Node.js: 18.15.0
  *  yarn: 1.22.19

# 1.Node.js＋yarnの導入

## 1-1.Node.jsの導入

https://nodejs.org/en
の左側のLTSからダウンロードし、道なりにインストール

プロンプトを再起動し、`node -v`でバージョンが出ていたらOK！

## 1-2.npmのアップデート
npmはNode.jsに付属するパッケージマネージャーで、VSCode拡張機能を開発するためにも必要になる。

以下コマンドでアップデートを実施する
`npm install -g npm@latest`


## 1-3.PATHを設定する
「ユーザー環境変数」の一覧から、Pathを選択して以下を追加しておく

`C:\Users\<ユーザー名>\AppData\Roaming\npm`


## 1-4.yarnのインストール

以下URLから確認する。

https://classic.yarnpkg.com/en/docs/install#windows-stable

コマンドで`npm install --global yarn`とすればいいみたい。

# 2.vsixファイルを作成する

## 2-1.vscode-chatgptリポジトリをローカルへクローン

ZIPでダウンロードかgitコマンドでローカルの適当なフォルダに持ってくる。
私はgitを使用した。
`git clone https://github.com/gencay/vscode-chatgpt.git`

https://github.com/gencay/vscode-chatgpt

## 2-2.必要(依存)パッケージをyarnで導入

`package.json`がある階層へcdコマンドで移動し、`yarn`コマンドを実行することで必要なものがインストールされる。

もしその後エラーが出たら`npm install -g **`で追加すればいいと思います。

## 2-3.vsceでパッケージング

`npm install -g vsce`でvsceというVisual Studio Code拡張機能のパッケージングおよび発行に使用されるコマンドラインツールをまず導入しておく。

で`package.json`がある階層のまま以下コマンドを実行。
`vsce package`

すると、図のようにvsixファイルが出来上がる。

![スクリーンショット 2023-03-19 100927.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373060/be8927e4-6ace-bdf7-53f1-d1f9fc1567a1.png)


# 3.vscodeにそれを適応させる

vscodeを起動し、`[Ctrl]+[Shift]+[P]`でコマンドパレットを出してパレットに`Extensions: Install from VSIX...`と入力してEnterを押す。で作成したVSIXファイルを選択すればOK！！

左側におなじみのあのマークが出てくればOK！

![スクリーンショット 2023-03-19 101214.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373060/79cc1380-83a1-9c53-15c2-b206d5f7c808.png)


# 4.設定

# 4-1.API設定

ブラウザログインが規約違反になって削除された？からなのか、今はAPI利用でしかできません。
※以前はここでブラウザが選べた気がします。。

![スクリーンショット 2023-03-19 122458.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373060/38452d1a-00d1-7d5b-ebf2-f309d3a47894.png)

よってChatgpt › Gpt3: Api KeyにAPI keyを入れましょう。

APIは以下から発行します。
https://platform.openai.com/account/api-keys

<font color="Red">**なお、無料枠は１８ドルなので注意**</font>


# 4-2.日本語化

拡張機能の中から選択して拡張機能の設定から。

![スクリーンショット 2023-03-19 104917.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373060/5ad6c585-6686-f1bd-a1ff-00804341439c.png)


![スクリーンショット 2023-03-19 105058.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373060/de06bfd7-4dbc-9ea5-6686-584a3daf8a78.png)


# 5.使ってみて・・・

やっぱりこれ有るのと無いのでは効率違いますね！
APIなので完全無料ではないですが、課金してでも使った方がいい気がしました。


# 6.もっと簡単にできるみたい？？

**Node.jsとかDL不要で、以下の方法でもいいみたいです**

## 6-1.vsixファイルをダウンロード

https://marketplace.visualstudio.com/items?itemName=gencay.vscode-chatgpt&ssr=false#version-history

ここから3.9.7の「gencay.vscode-chatgpt-3.9.7.vsix」ってやつがダウンロードできるらしいので、ダウンロードしておく。
※vsixとはVisual Studioにインストールできる拡張機能をパッケージ化したもの


## 6-2.vscodeにそれを適応させる

vscodeを起動し、`[Ctrl]+[Shift]+[P]`でコマンドパレットを出してパレットに`Extensions: Install from VSIX...`と入力してEnterを押す。で作成したVSIXファイルを選択すればOK！！

左側におなじみのあのマークが出てくればOK！

![スクリーンショット 2023-03-19 101214.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373060/79cc1380-83a1-9c53-15c2-b206d5f7c808.png)