Can I use VSCode for developing WINDOW DESKTOP Apps using WinUI 3 or MAUI or UNO stack?

Question

I am trying to set up a project in VSCode to build & run windows desktop apps: WinUI / MAUI / UNO because our team is mostly using VSCode.

I am aware that Visual Studio 2022 is recommended for WinUI 3 projects None of the Microsoft documentation clearly denotes

• if it's possible to run these technologies in VSCode,
• Or if Visual Studio 2022 is required to run WinUI 3 projects

What did i try

I created a working sample WinUI 3 project in Visual Studio 2022 using the available templates. My attempts to run this sample in VSCode failed (see Error below). No workaround so far. Any help is much appreciated.

Please feel free to modify my sample code / repo to make it run in VSCode.

dotnet build / run returns error below,

Question

Is it possible to use vscode to run winui-3 projects?

If yes

• could anyone share the git repo of any WinUI projects that can run in VSCode
• with the launch settings in the .vscode folder
• and other project config files subjected to change to get it work.

Embroider

Visual Studio should not be mandatory, but MsBuild is. With C#, if you copy paste a Visual Studio project into a folder and from that folder you run "dotnet build", it should use MsBuild to build the project (w/o Visual Studio, w/o Visual Studio Code, just command line + MsBuild). Have you done that? Otherwise please paste the error and a fully minimal reproducing sample stackoverflow.com/help/minimal-reproducible-example – Milesmilesian

@SimonMourier yes, I am using the cli to build/run this project. As requested updated with git repo and screenshot for the same in the question. Thanks for looking into this. – Embroider

You shouldn't post screenshot of errors but errors as text (so search engines work fine). Try to add this to the csproj: <Platform>x64</Platform> as said in the message (don't confuse with plural Platforms, and yes it's confusing...). – Milesmilesian

@SimonMourier thanks, <Platform>x64</Platform> instead of Platforms helped dotnet build fine. But when I do dotnet run nothing happens. I am expecting the exe to run when I do dotnet run but it's not up even though exe is available in the workspace path, WinUI3TestRunInVSCode\bin\Debug\net6.0-windows10.0.19041.0\WinUI3TestRunInVSCode.exe where you able to run the project at your end please? – Embroider

You must run "dotnet publish" to publish but output depends on the type of application, etc. – Milesmilesian

Sorry that just published project. I am expecting the app to run "dotnet run" so that we can see the UI but that's not happening. Is there any way we can see windows desktop app run from VSCode? – Embroider

WinUI3 are not necessarily standard desktop app. Depending on parameters they must be deployed and/or published to run. – Milesmilesian

Answer 1

Finally, yes VSCode can be used to run WinUI 3 apps.

In the WinUI csproj, please make sure you add these properties in the property group,

 - <Platform>x64</Platform> (Required for VSCode)
 - <Platforms>x86;x64;arm64</Platforms> (Required for Visual Studio)
 - <WindowsAppSDKSelfContained>true</WindowsAppSDKSelfContained>
 (Required for exe)

It's ok to have both Platform and Platforms in the same project. Perhaps, having the common architecture would be an ideal way. In my case I preferred to go with X64 for both Platform and Platforms (based on my requirement).

Please also add launch.json & tasks.json in .vscode folder (as in, https://github.com/to-marss/WinUI3TestRunInVSCode-)

launch.json

{
 "version": "0.2.0",
 "configurations":[{
   "name": ".NET Core Launch (console)",
   "type": "coreclr",
   "request": "launch",
   "preLaunchTask": "build",
   // if target frameworks was changed, update program path.
   "program": 
     "${workspaceFolder}/WinUI3TestRunInVSCode/bin/x64/Debug/net6.0-windows10.0.19041.0/win10-x64/WinUI3TestRunInVSCode.exe",
   "args": [],
   "cwd": "${workspaceFolder}/WinUI3TestRunInVSCode",
     // 'console' field https://aka.ms/VSCode-CS-LaunchJson-Console
   "console": "internalConsole",
   "stopAtEntry": false
 },
 {
   "name": ".NET Core Attach",
   "type": "coreclr",
   "request": "attach"
 }]
}

tasks.json

{
 "version": "2.0.0",
 "tasks":[{
    "label": "build",
    "command": "dotnet",
    "type": "process",
    "args": ["build", 
"${workspaceFolder}/WinUI3TestRunInVSCode/WinUI3TestRunInVSCode.csproj",
     "/property:GenerateFullPaths=true",
     "/consoleloggerparameters:NoSummary"
    ],
    "problemMatcher": "$msCompile"
   },
   {
    "label": "publish",
    "command": "dotnet",
    "type": "process",
    "args": ["publish",
 "${workspaceFolder}/WinUI3TestRunInVSCode/WinUI3TestRunInVSCode.csproj",
       "/property:GenerateFullPaths=true",
       "/consoleloggerparameters:NoSummary"],
    "problemMatcher": "$msCompile"
   },
   {
    "label": "watch",
    "command": "dotnet",
    "type": "process",
    "args": ["watch","run","--project",                
    "${workspaceFolder}/WinUI3TestRunInVSCode/WinUI3TestRunInVSCode.csproj"
     ],
     "problemMatcher": "$msCompile"
    }
 ]
}

With this setup we can use dotnet cli commands to build and run the app from VSCode. We can do the commands below,

1. dotnet build - Build the libraries.
2. dotnet run - Run the exe and app is displayed.
3. dotnet watch - To have the hot reload behavior, update changes on runtime.
4. dotnet publish - To publish the app.

P.S. This works fine for any WinUI3 apps and UNO's WinUI target. I hope same can be achieved in MAUI with the minor .csproj changes as above. Hope this helps!

Embroider

How do you create the WinUI.csproj file / a WinUI project without Visual Studio? – Ascertain

Answer 2

According to the Microsoft document, the document shows that Developing native, cross-platform .NET Multi-platform App UI (.NET MAUI) apps requires Visual Studio 2022 17.3 or greater, or Visual Studio 2022 for Mac 17.4 or greater.

Then I found the discussion on the GitHub shows that for now you can not develop the MAUI project on the VSCode platform. But you can use the cli to run the project on emulator.

Sammysamoan