【Godot】GDScriptをVSCodeで編集しよう

# ■はじめに
Godotには、Godot内で編集できるというGDScriptというプログラミング言語があります。

エンジン内で完結できるというのは、初心者にはありがたいと思いますが、そこそこ慣れているプログラマー達からすると、少しモヤモヤする部分があったりします。

そこで今回は、VSCodeを利用してより効率的にコーディングできるようにしたいと思います

### 更新
- **2024.04.13：godot-toolsが2.0.0に更新されたので、一部変更**



## ●注意点
~~当記事の設定を行うと、**日本語のコメントが文字化けしてしまいます**。
既存のプロジェクトで使用するのは避け、拡張機能の更新がされるまで英語でのコメントをしましょう~~

:::note
godot-toolsがバージョンアップしたので、別のformatterは不要になりました。
- 日本語も対応可能です！
:::

# ■準備
- Godotバージョン：`v3.5.2.stable.mono.official [170ba337a]`
    - 更新後：`v4.1.1.stable.official [bd6af8e0e]`
- VSCodeバージョン：`1.82.2 (user setup)`






## ●Godot
まず、Godot側で外部エディタを設定します
今回はVSCodeを利用しますが、お好みのテキストエディタを利用してください。([ 詳細 ](https://docs.godotengine.org/ja/stable/tutorials/editor/external_editor.html))


1. ツールバーの[`Editor`]を開く
1. [`General`]タブ内で[`External`]と検索して、[`TextEditor`]項目内の[`External`]を選択
1. 色々設定する
    - [`Use External Editor`]を`On`にする
    - [`Exec Path`]を使用するテキストエディタのパスを入力する
    - [`Exec Flags`]に上記リンク内の[`実行フラグ`]テーブル内のものを利用する↓![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/e7167f4d-927b-0d6f-90f5-5ea546b3b214.png)

- VSCode: `{project} --goto {file}:{line}:{col}`

これで、.gdファイルなどをダブルクリックすると、設定したテキストエディタが開くようになります。



## ●VSCode
次に、VSCodeをインストールしましょう

1. こっからダウンロード、インストール
https://azure.microsoft.com/ja-jp/products/visual-studio-code

2. 次に、日本語にしましょう
    - 左側のテトリスみたいなアイコンをクリックして、検索欄に[`Japanese`]と入力
    - Microsoftの地球儀のやつをインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/fec5668b-ae96-f310-23b9-74922d738be0.png)

3. 設定画面を開いて、[`format`]と検索して、[`Format On Save`]を有効にすると楽です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/0a77866b-6e4b-ea28-a4de-f267750f1297.png)

4. 次に、**Godotの拡張機能を追加します**。先ほどと同様に、検索欄に下記の名前を入力して追加します。
    - [**Godot-Tools**](https://github.com/godotengine/godot-vscode-plugin)


6. さらに、Godot-Toolsを利用するために、Editorを登録します

    1. Godot-Toolsを選択して、歯車をクリックして、[拡張機能の設定]を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/b2455da9-61a9-3614-4657-23248ba34d6a.png)

    1. 一番上の項目の[`Editor_Path`]ってとこに、Godotのexeファイルのパスをコピペ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/b52506f5-d5bd-69da-5968-1d8cca332d8e.png)

        - エディタの.exeファイルを右クリックして、[パスのコピー]でパス取得できます
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/0d074d02-d111-109e-cdb5-fc9fdf9481ea.png)

これで下準備は完了です。






# ■使い方
次に、プロジェクトのフォルダを開きましょう
1. ツールバーの[ファイル]の[フォルダーを開く]を選択
1. 目的のプロジェクトのフォルダを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/f46a391f-1dd3-9565-a750-743fa8e193b8.png)

3. 追加できたら、.gdファイルを選択して開いてみましょう
    - 画面左側のファイルアイコンから、エクスプローラーを開けます。
    - そこにある.gdファイルをクリックして開いてみましょう(無ければGodot側で作成してください)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/bd40fd3b-d33c-a178-b4ef-debaca84c39d.png)

こんな感じに色がついてたらOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/296ea4c1-8e21-6b95-b7d5-b6492c5c5c17.png)

### 整形
**`Shit + Alt + F` で整形**できます

![GodotVSCodeFormatter.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/d1251508-f10b-ede4-a86f-0934c11b4c75.gif)

こんな感じで使用できます！

<br><br>

### 変更ダイアログの無効化
また、外部のテキストエディタで保存したら、Godot内でこのようにダイアログが表示されますが、**中央の`Reload`をクリックすればOK**です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/6faadc0d-4516-6ffa-977d-016399214c75.png)

また、これは鬱陶しいので、設定で無効化できます。
1. ツールバーの[`Editor`]を選択[`Editor Settings`]から、検索ボックスに[`Auto  Reload`]と入力
1. [`Auto Reload Scripts On External Change`]を`On`にする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/f84fd7fd-86bb-932c-7939-bf9df5e1e055.png)









# ■デバッガーを使う

https://docs.godotengine.org/ja/stable/development/cpp/configuring_an_ide/visual_studio_code.html

## ●Godot
1. ツールバーの[`Debug`]を選択して、[`Deploy with Remote Debug`]を有効化
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/2e01474b-b1f9-3738-8ff6-d66c779f54b8.png)

こんだけです。

## ●VSCode
### ・Godot4の場合の設定
こちらにやり方書いてます

https://github.com/godotengine/godot-vscode-plugin#vs-code

1. `gdscript_lsp_server_port` ってのを`6005`に変更する
1. 一番上の検索ボックス(コマンドパレット)に`>View: Show Run and Debug`と入力
1. 「`launch.jsonを作成`」をクリック
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/c460322c-7c0a-28c5-f25a-08702c6f2925.png)
1. クリックしたら出てくる、「`GDScript Godot Debug`」を選択
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/4ead8ca8-245e-9fb8-0a14-3d05fba414cb.png)
1. launch.jsonの内容を変更
    ```launch.json
        "configurations": [
            {
                "name": "GDScript Godot",
                "type": "godot",
                "request": "launch",
                "project": "${workspaceFolder}",
                "port": 6007,
                "debugServer": 6006,
                "address": "127.0.0.1",
                "launch_game_instance": true,
                "launch_scene": false
            }
    ```
1. エクスプローラー内にある`settings.json`の内容を変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/f991f9b9-7d5b-7c63-ea26-02e85cdb3f5c.png)

```setings.json
{
    "godot_tools.editor_path": "C:\\godot\\Godot_v4.1.1-stable_win64.exe",
    "godot_tools.gdscript_lsp_server_port": 6005
}
```

これでOK


### ・実行

F5を押してデバッグ開始します。

こんな感じの画面になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/ab8f2498-fccc-f9ba-cc21-1dcb0f52d60e.png)

値を確認したい変数上で右クリックして、[`ウォッチに追加`]を選択して、確認できます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/6fc22c4f-9a49-ea7a-763e-9f735648725e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/13f24d9c-f1c0-049f-3592-7e7af59ec736.png)

また、VSCode上でブレークポイントのところで停止しない場合、**Script Dock上の[`Debug`]の[`Debug with External Editor`]をOn**にすればいけると思います。
(僕の場合、これがオンになっててもVSCodeで行われなかったですが、一度オフにして再度オンにすればなおりました)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/e6732acc-e36d-6b2f-ea5b-c11549559d56.png)



# ■トラブルシューティング
## ●GDToolkit(GD Formater)をインストールしようとすると、`ValueError: Unknown options: dict_keys(['cache', 'regex'])`ってのが出てくる
ようわからん。

公用PCでPythonの拡張機能入れたらこれが出てきた。

[このサイト](https://www.techback.info/vs-code-python-pip-module-path-setting/)のように設定したら一瞬直ったけど、またエラー出たのでPythonの拡張機能無効化したら直った






# ■さいごに
これで、Godot内で作業するよりも楽に作業できます！(~~正直クッソめんどくさいですけど~~)


## ●参考サイト

https://docs.godotengine.org/ja/stable/tutorials/editor/external_editor.html

https://docs.godotengine.org/ja/stable/development/cpp/configuring_an_ide/visual_studio_code.html

https://note.com/himitsucrab/n/n15e1d173aad6