visual-studio-codemauiwinui-3uno

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


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

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,

dotnet build run errors

Question

Is it possible to use to run projects?

If yes


Solution

  • 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!