深入淺出Blazor webassembly之vs code 環境設置過程

本文轉載自查看原文 2021-08-13 23:35 251 Blazor

1. 安裝了最新的 dot net SDK 6.0.100-preview.3.21202.5

2. 為 VS code 安裝 C#插件, 需要在 v1.23.12 以上版本

3. 建立了blazor wasm 模版項目, 能正常運行起來.

4. 但發現VS code 的 intellicode 功能失效, 比如代碼導航功能不能使用

⒌ 在VS code 中重啟 OmniSharp , 發現如下報錯.

[info]: OmniSharp.Stdio.Host
        Starting OmniSharp on Windows 6.1.7601.65536 (x64)
[info]: OmniSharp.Services.DotNetCliService
        DotNetPath set to dotnet
[info]: OmniSharp.MSBuild.Discovery.MSBuildLocator Located 2 MSBuild instance(s) 1: Visual Studio Community 2019 16.6.30225.117 16.6.0 - "C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\MSBuild\Current\Bin" 2: StandAlone 17.0.0 - "c:\Users\drothy64\.vscode\extensions\ms-dotnettools.csharp-1.23.14\.omnisharp\1.37.15-beta.7\.msbuild\Current\Bin" [info]: OmniSharp.MSBuild.Discovery.MSBuildLocator
        Registered MSBuild instance: Visual Studio Community 2019 16.6.30225.117 16.6.0 - "C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\MSBuild\Current\Bin"
[info]: OmniSharp.WorkspaceInitializer
        Invoking Workspace Options Provider: OmniSharp.Roslyn.CSharp.Services.CSharpFormattingWorkspaceOptionsProvider, Order: 0
[info]: OmniSharp.WorkspaceInitializer
        Invoking Workspace Options Provider: OmniSharp.Roslyn.CSharp.Services.Completion.CompletionOptionsProvider, Order: 0
[info]: OmniSharp.WorkspaceInitializer
        Invoking Workspace Options Provider: OmniSharp.Roslyn.CSharp.Services.RenameWorkspaceOptionsProvider, Order: 100
[info]: OmniSharp.WorkspaceInitializer
        Invoking Workspace Options Provider: OmniSharp.Roslyn.CSharp.Services.ImplementTypeWorkspaceOptionsProvider, Order: 110
[info]: OmniSharp.WorkspaceInitializer
        Invoking Workspace Options Provider: OmniSharp.Roslyn.CSharp.Services.BlockStructureWorkspaceOptionsProvider, Order: 140
[info]: OmniSharp.Cake.CakeProjectSystem
        Detecting Cake files in 'c:\Users\drothy64\Desktop\blazor\projects'.
[info]: OmniSharp.Cake.CakeProjectSystem
        Could not find any Cake files
[info]: OmniSharp.MSBuild.ProjectSystem
        Detecting projects in 'c:\Users\drothy64\Desktop\blazor\projects\blazordemo.sln'.
[info]: OmniSharp.MSBuild.ProjectManager
        Queue project update for 'c:\Users\drothy64\Desktop\blazor\projects\blazorDemo1\blazorDemo1.csproj'
[info]: OmniSharp.Script.ScriptProjectSystem
        Detecting CSX files in 'c:\Users\drothy64\Desktop\blazor\projects'.
[info]: OmniSharp.Script.ScriptProjectSystem
        Could not find any CSX files
[info]: OmniSharp.WorkspaceInitializer
        Configuration finished.
[info]: OmniSharp.Stdio.Host
        Omnisharp server running using Stdio at location 'c:\Users\drothy64\Desktop\blazor\projects' on host 7256.
[info]: OmniSharp.MSBuild.ProjectManager
        Loading project: c:\Users\drothy64\Desktop\blazor\projects\blazorDemo1\blazorDemo1.csproj
[fail]: OmniSharp.MSBuild.ProjectManager
        Failed to load project file '{projectFilePath}'.
Microsoft.Build.Exceptions.InvalidProjectFileException: 找不到指定的 SDK“Microsoft.NET.Sdk.BlazorWebAssembly”。

問題分析:

程序能正常編譯運行, 說明 .net 6 SDK安裝沒有問題, 項目文件也是正常的, 而且可以運行, 不應該會報 InvalidProjectFileException 異常啊.

既然項目文件沒有問題, 會不會是 OmniSharp.MSBuild 的問題呢? 仔細看日志, OmniSharp 找到了兩個 msbuild, 一個是VS code 的C#插件自帶的, 另一個是 VS 2019 16.6 自帶的, 而且 OmniSharp 使用了 VS 2019 16.6 自帶的 msbuild, 可能是 VS 2019 16.6 的msbuild 版本較老, 和 OmniSharp 的roslyn編譯器不兼容.

參考 https://github.com/OmniSharp/omnisharp-roslyn/issues/1700 解決了該問題.

解決方案是: 強制 omnisharp 使用自帶的 msbuild.

具體為:

(1) 新建 C:\Users\{username}\.omnisharp\omnisharp.json 文件

(2) 編輯文件內容如下, 注意替換真實的路徑

{
    "msbuild": {
        "useBundledOnly": true
    },
    "RoslynExtensionsOptions": {
        "enableAnalyzersSupport": true
    },
    "FormattingOptions": {
        "enableEditorConfigSupport": true
    }
}

或者直接指定msbuild路徑

{
    "MSBuild": {
        "msbuildoverride": {
            "MSBuildPath": "C:\\Users\\{username}\\.vscode\\extensions\\ms-dotnettools.csharp-1.23.14\\.omnisharp\\1.37.15-beta.7\\.msbuild\\Current\\Bin",
            "Name": "OmniSharp MSBuild",
            "PropertyOverrides": {
                "MSBuildExtensionsPath": "C:\\Users\\{username}\\.vscode\\extensions\\ms-dotnettools.csharp-1.23.14\\.omnisharp\\1.37.15-beta.7\\.msbuild"
            }
        }
    }
}

然后重啟 onmisharp 服務, intellicode 恢復正常.

6. VS code 仍然報 Error Acquisition .Net 錯誤 , 這個沒有找到解決方案, 但不影響調試運行, 不用管它

7. 在瀏覽器端調試 Blazor 程序

步驟1: 按照正常方式運行 blazor 項目, 不需要在調試模式下.

步驟2. 以啟用調試模式打開 chrome 或edge 瀏覽器(不能使用firefox) , 命令行如下:
msedge --remote-debugging-port=9222 http://localhost:5000/

chrome --remote-debugging-port=9222 http://localhost:5000/

使用上面命令后, 瀏覽器會監聽 9222 調試端口, vscode為 blazor 項目已經實現了chrome devtools protocol 協議, 在vs code中開啟項目, 除了會監聽應用正常的http 5000端口外, 還會開啟 63021 端口, 在瀏覽器端的 chrome devtools 會連接 63021 端口.