Linux上でAvaloniaUI+VSCodeを使用してdebugするまで


いいね、ストック、badボタン、低評価が励みになります！

AvaloniaUIの開発環境構築を行う。
やってみると結構面倒だった上に、わかりにくい点があったので整理してみる。
蛇足だがKali linuxを使用している。
とりあえずLinuxOSであれば何でも良いだろう（Kali LinuxはDebian系）

Avaloniaを使わずともLinux上でWPFプロジェクトをビルドできるようで、そちらもそのうち試したい。

https://tech.guitarrapc.com/entry/2022/11/11/031555


# 参考にしたサイト

https://zenn.dev/inuinu/books/2fd0c80341744b/viewer/whats-avalonia-ui

https://zenn.dev/inuinu/articles/avalonia-ui-for-absolute-beginners

https://qiita.com/kumasan1011/items/2caf860d90a05f1309ce


# まずVSCode入れる
https://code.visualstudio.com/Download

参考

https://zenn.dev/inuinu/books/2fd0c80341744b/viewer/install


本稿では```deb```を使用

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145714/95df85d8-6c1e-43a9-90d3-1b0b2f26d575.png)

```slim
sudo dpkg -i code_1.97.2-1739406807_amd64.deb
```

# .net 9をインストールする
.net8のほうが安定するというのが現行の記述ではあるが、Project作成に必要な```Avalonia for VSCode```が.net9.0を要求するため。
尚、.net8.0を指定してビルドすることは可能である。

https://dotnet.microsoft.com/ja-jp/download

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145714/d0251649-de66-4e41-a1a0-6753f329a25c.png)

不親切なことにMicrosoftのドキュメントに飛ばされるので、目的のものを探す（ここではDebian）

以下にたどり着く

https://learn.microsoft.com/ja-jp/dotnet/core/install/linux-debian?tabs=dotnet9sudo 



コマンド群の実行
以下はMicrosoftの公式パッケージリポジトリをDebian 12に追加します。
```slim
wget https://packages.microsoft.com/config/debian/12/packages-microsoft-prod.deb -O packages-microsoft-prod.deb
sudo dpkg -i packages-microsoft-prod.deb
rm packages-microsoft-prod.deb
```

***上記を実行の上で以下を行う***
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145714/689fa7c0-9797-4054-ab2b-8300b2242b29.png)

# ランタイムをインストールする

色々検証したが、.net9.0で問題ないっぽい。

```slim
sudo apt-get install -y aspnetcore-runtime-9.0
```

# VSCodeを起動する

VSCode経由でAvaroniaのテンプレート等を入れてみる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145714/759192a9-804a-45bd-b862-b1f4bb03d617.png)

```valonia Templates```と```Avalonia for VSCode```

Avalonia for VSCodeはPreview版で、***```.net9.0```を必要とする。***

導入後、VSCodeでAvaroniaプロジェクト作成のためのボタンが表示されるようになる(要VSCode再起動)。


 
### Create Avalonia Projectの表示位置
.net9.0がインストールされ、 ```Avaronia for VScode```が有効になった時点で
下記画像の通り、一番上の***Exploreタブで表示される***。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145714/5decf0db-17a8-4a6d-8a2b-d1685f43ead3.png)


デバッグにはC＃と```C# devkit```も必要で、これは入門のlink先に書いてなかった。
テストを実行すると以下のように出る

>Do you want to install the recommended 'C# Dev Kit' extension from Microsoft for the C# language?


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145714/8d4d30fb-5395-44d3-9646-8d6ac0831eea.png)

先程と同様にVSCode拡張からインストールする。


# test projectを作成する



新規タブから、Create Avalonia Projectをクリック
今回はAvaronia MVVM Appを作成する。
名前を```testAlllwomanareSheepGlory```などという長くて仰々しい名前にしておく。わかりやすいから。

作成先フォルダとして```Avalonia```とした。なんでも良いだろう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145714/37eff034-c288-4f7a-af7a-3f12222a9e85.png)

無事に```testAlllwomanareSheepGlory```プロジェクトが作成された。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145714/dee841e6-89cb-48d5-ac1e-c5ed197e0ee8.png)


# 更にエラーが出る
You don't have an extension for debugging 'Avalonia XAML'. Should we find a 'Avalonia XAML' extension in the Marketplace?

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145714/2cfb97fd-fef3-4b6d-b1c9-0a0d6b24a7f3.png)

検証が非常に面倒だったのだが、どうやら```avalonia-css-extension``` が必要だと判明。尚、どこにも書いてないからそれっぽいExtentionを一つずつ丁寧に試すしかなかった。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145714/74eea697-9e5a-495d-854b-6ddc2e6ab7ff.png)


最終的には以下のVSCode拡張が必要となる。

# 必要なVSCode拡張
Avalonia Templates
Avalonia for VSCode(Preview)
avalonia-css-extension
C#
C# Dev kit
以下は自動的に追加？
.Net Install tool
.Net Extention Pack

余分なExtentionは可能な限り省いている
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145714/78ee93e0-a04c-4f1b-a5f5-e5e38237a82e.png)


# 起動時スクリーンショット
低スペノートのせいでもあるがビルドはかなり遅い印象。

https://x.com/sheephuman/status/1898315572758139209

直接貼れないので間接的に表示する形式で

Linuxk系OSがソフト数自体少ない上にディストリビューションによってはそのOSに入れられないことがあり、開発に挑戦してみようかと思っている。もういい歳なんだけど。
Windows向けの便利なソフトがもっとあっていいと思うのだ


# あとがき
以上でデバッグを実行し、アプリを起動するところまで実現することが出来ました。よくみたら参考linkの記述よりもMicrosoftドキュメント寄りの記述になってた。

実行可能なファイルも生成されるので、圧縮ファイルとして配布も可能ではないかと思います。やったことないけど....

高評価はgoodボタン、低評価はbadボタン、ストックされると励みになります。編修リクは基本受け付けません（slimではないとか）。