猫でもわかるUnity入門(第17回 VSCodeで快適コーディング)

f:id:enia:20210228230354p:plain

えにあです。猫でもわかるUnity入門第17回を進めていきます。

今まではWindows標準のメモ帳を使って開発してきましたが、メモ帳での開発はとても効率が悪いです。 そこで、今回は私がTypescriptの開発で愛用していたVSCodeを使えるようにしていきます。

VSCodeを導入すると、以下のようなことができます。 - 文字に色をつけてくれる - 自動で字下げを行ってくれる - 入力補完ができる - 構文エラーをコーディング中に検出できる

VSCodeをインストールしよう

VSCodeマイクロソフトが開発している軽量エディタです。 有志が開発したプラグインが充実していて拡張が容易です。 VSCodeは以下からダウンロードできます。 azure.microsoft.com

私はすでにインストール済みなので細かいインストール手順は割愛しますが、標準設定でインストールすれば問題ないでしょう。

VSCodeにUnity用の拡張機能を追加しよう

VSCodeに「C#」と「Debugger for Unity」の二つの拡張機能をインストールしていきます。

C#拡張機能のインストール

左側のメニューバーで拡張機能を選択します。 検索ボックスに「C#」と入力して、一番上に出てくるC#拡張機能を選択します。
f:id:enia:20210303133546p:plain

表示される画面でインストールを押します。これでインストール完了です。
f:id:enia:20210303133146p:plain

C# XML Documentation Commentsのインストール(任意)

同様の手順で今度は検索ボックスに「C# XML Documentation Comments」と入力して、二番目に表示されたC# XML Documentation Commentsを選択します。
この拡張機能を入れることで、「///」とコメントを打った時にドキュメントコメントの枠を生成してくれます。

f:id:enia:20210314085129p:plain

Debugger for Unity拡張機能のインストール

同様の手順で今度は検索ボックスに「Unity」と入力して、一番上に表示されたDebugger for Unityを選択します。
f:id:enia:20210303133441p:plain

表示される画面でインストールを押します。これでインストール完了です。 f:id:enia:20210303133631p:plain

検索ボックスを空にしてみてください。
インストール済みの一覧が表示されるので、その中に「C#」と「Debugger for Unity」の二つが含まれていればOKです。
f:id:enia:20210303133932p:plain

UnityとVSCodeの連携を設定する

Unity側でスクリプトの編集に使うエディタをVSCodeに変更します。 トップメニューから「編集」->「環境設定」を選択します。
f:id:enia:20210303134628p:plain

環境設定のウィンドウが開きますので、「外部ツール」->「外部のスクリプトエディタ」->「Visual Studio Code」を選択します。 f:id:enia:20210303134824p:plain

これで、UnityEditorからスクリプトを編集する際にVSCodeが起動するようになりました。 試しに、前回作成したPlayerControllerをダブルクリックしてみます。
f:id:enia:20210303152804p:plain

おぉ、VSCodeが起動してPlayerControllerが開かれました。 f:id:enia:20210303152830p:plain

しかし、私の場合、VSCodeにエラーが表示されてしまいました。 次の手順でエラーを解消していきます。

VSCodeのエラーを解消しよう

私の環境では、3つのエラーメッセージが出力されました。 以下に、3つのエラーメッセージと、解消手順を記載しています。 すべて完了したら、上述の手順で再度VSCodeを起動し、エラーが消えたことを確認しましょう。

.NET core SDKのインストール

1つ目のエラーはこちらです。.NET Core SDKがインストールされていない、というメッセージです。

The .NET Core SDK cannot be located. .NET Core debugging will not be enabled. Make sure the .NET Core SDK is installed and is on the pah.
f:id:enia:20210303135058p:plain

エラーメッセージに従って、以下のサイトにアクセスします。 dotnet.microsoft.com

Install for Windowsを選択します。自動的にダウンロードが始まります。 f:id:enia:20210303135337p:plain

ダウンロードされたインストーラを実行します。 f:id:enia:20210303140508p:plain

インストールには少々時間がかかります。 f:id:enia:20210303140544p:plain

インストールが完了したら閉じたのち、パソコンを再起動しましょう。
f:id:enia:20210303140613p:plain

 .NET Framework Developer Packsのインストール

2つ目のエラーはこちらです。

Some projects have trouble loading. Please review the output for more details. f:id:enia:20210303141621p:plain

「Show Output」を押してエラーメッセージを見てみます。 version4.7.1の.NET Framework Developer Packsがインストールされていない、というメッセージです。

.vscode\extensions\ms-dotnettools.csharp-1.23.9.omnisharp\1.37.6.msbuild\Current\Bin\Microsoft.Common.CurrentVersion.targets(1180,5): Error: The reference assemblies for .NETFramework,Version=v4.7.1 were not found. To resolve this, install the Developer Pack (SDK/Targeting Pack) for this framework version or retarget your application. You can download .NET Framework Developer Packs at https://aka.ms/msbuild/developerpacks

エラーメッセージに従って、以下のURLから.NET Framework Developer Packsをダウンロードします。 aka.ms

.NET Framework 4.7.1」をクリックします。 f:id:enia:20210303150457p:plain

NOTE:
2021年3月時点では、4.7.1以降のバージョンは4.7.1、4.7.2、4.8の3つがありました。メジャーバージョンが同じであれば互換性があるのかと思い、4.8だけ入れてみたところエラーは解消しませんでした。4.7.1でないとダメなのか、4.7.2でも良いのかは試してないのでわかっておりません。

RuntimeとDeveloper Packsの二つがありますが、警告に従ってDeveloper Packesをダウンロードします。
f:id:enia:20210303150518p:plain

ダウンロードが完了したらインストーラを起動して、条項に同意したうえでインストールします。
f:id:enia:20210303150542p:plain

1分程度でインストールが完了します。 f:id:enia:20210303150609p:plain

インストールが完了したら閉じたのち、パソコンを再起動しましょう。
f:id:enia:20210303150620p:plain

Gitのインストール

3つめのエラーはこちらです。Gitがインストールされていないというエラーです。 f:id:enia:20210323120015p:plain

規約を読んでNextを押します。 f:id:enia:20210325081509p:plain

インストール先フォルダを指定してNextを押します。
私はデフォルトのパスのままとしました。
f:id:enia:20210325081540p:plain

インストールするコンポーネントを設定して、Nextを押します。
私はデフォルトの設定のままとしました。
f:id:enia:20210325081832p:plain

スタートメニューフォルダの名前を設定して、Nextを押します。
私はデフォルトの設定のままとしました。 f:id:enia:20210325081805p:plain

Gitがデフォルトで使うエディタを設定して、Nextを押します。 何でもよいですが、私はNotepad(Windowsのメモ帳)にしました。
f:id:enia:20210325082325p:plain

デフォルトのブランチ名を設定して、Nextを押します。 デフォルト設定ではGit推奨の名前にしてくれるので、そのままの設定が良いでしょう。
f:id:enia:20210325082454p:plain

環境変数関連の設定のようです。ここはRecommendedのままでよいでしょう。 Nextを押します。
f:id:enia:20210325082644p:plain

デフォルトでOpenSSLにチェックが入っているのでそのままNextを押します。 f:id:enia:20210325082827p:plain

改行コードの設定です。
デフォルトでpush時はLF、チェックアウト時はCR+LFです。
デフォルトの設定のままNextを押します。
f:id:enia:20210325083001p:plain

git bushが使うコンソールを指定して、NEXTを押します。 私はデフォルトの設定のままとしました。 f:id:enia:20210325083319p:plain

pull時のふるまいを指定します。デフォルト設定のままNextを押します。 f:id:enia:20210325083414p:plain

Credential Helperを選択するようですが、パスワードや鍵の管理に使うものでしょうか。
デフォルト設定のままNextを押します。二つ目に至ってはDeprecatedですしね。
f:id:enia:20210325083532p:plain

追加オプションを指定して、Nextを押します。 デフォルト設定のままとしました。
f:id:enia:20210325083729p:plain

実験的機能のオンオフを設定します。 私はデフォルト設定(オフ)にしました。
ここまで長かったですね。ようやく現れたInstallボタンを押します。 f:id:enia:20210325083827p:plain

しばらく待ちましょう。 f:id:enia:20210325083935p:plain

インストール完了です! f:id:enia:20210325084036p:plain

VSCodeの設定を変えて、より便利にしよう

これで、Riと入れただけでRigidbodyが候補に出てきます。 f:id:enia:20210303154358p:plain

既に便利ではありますが、以下のようにif文の括弧の位置がバラバラだったり、if文の中がインデントされていなかった場合に、自動で整形してくれればより便利ですね。 なんと、ファイルを保存した時に自動整形することができるのです。そう、VSCodeならね。

        if (other.gameObject.CompareTag("Pick Up"))
        {
            other.gameObject.SetActive(false);
            count = count + 1;
            countText.text = "Count: " + count.ToString();
            if (count >= 12) {
            winText.text = "Your Win!";
            }
        }

早速設定していきましょう。 メニューバーから「ファイル」->「ユーザ設定」->「設定」と選択します。 f:id:enia:20210303152118p:plain

表示された設定画面で、上の検索ボックスに「format」と入力します。 表示された「Format On Paste」と「Format On Save」にチェックを入れます。 f:id:enia:20210303152216p:plain

この状態で、先ほどのフォーマットが崩れたファイルを保存してみると、以下のようにキレイに整形されました!

        if (other.gameObject.CompareTag("Pick Up"))
        {
            other.gameObject.SetActive(false);
            count = count + 1;
            countText.text = "Count: " + count.ToString();
            if (count >= 12)
            {
                winText.text = "Your Win!";
            }
        }

他にも設定しておいた方が良い項目があるかもしれませんが、おいおい追加していきます。

これでUnityの開発がさらに捗りますね! 今回はここまで!