Visual Studio & VS Code

前言

会写这篇是因为想记入一个 bug. 随便以后记入一些 Visual Studio 和 VS Code 相关的冬冬呗.

当 VS Code Hot Reload 遇上 View Component 的 Bug

由于这个 Bug 涉及到多方面 (不容易提问), 所以我就没有 report github issue. 希望过阵子它自己好起来呗 (目前是 workaround)

Reproduction Setup

dotnet new webapp -o TestHotReload

创建 Component (参考: ASP.NET Core – View Component)

CallToAction/CallToActionViewComponent.cs

using Microsoft.AspNetCore.Mvc;

public class CallToActionViewComponent : ViewComponent
{
    public IViewComponentResult Invoke()
    {
        return View(
             $"~/Pages/Shared/Component/CallToAction/Index.cshtml"
         );
    }
}

CallToAction/Index.cshtml

<h1>Hello World!!</h1>

Index.cshtml

@page
@model IndexModel
@addTagHelper *, TestHotReload
@{
  ViewData["Title"] = "Home page";
}

<div class="text-center">
  <vc:call-to-action></vc:call-to-action>
</div>

注: 一定要用 TagHelper 引入. 如果使用 Component.InvokeAsync 那这个 Bug 不会出现.

Visual Studio Ctrl + F5 Run

先用 Visual Studio 跑看看

and then 我们修改 Index.cshtml

这时 Visual Studio 会 popup rebuild needed

注意哦, Component.InvokeAsync 的话则是不需要 rebuild 的.

VS Code dotnet watch run

当修改 Index.cshtml 以后会直接报错

解决方法是 Ctrl + R rebuild 就可以了.

VS Code Font Ligatures

参考

YouTube – Font Ligatures in VS Code: Set up Font ligatures in VS Code

Medium – Set Fira Code as your VS Code font | Windows 11

Ligatures 连字，长这样

本来时 === 和 !==

连字看上去很 cool，而且不是原装，所以深受大家喜爱。

首先去下载字体 Github – FiraCode

然后双击 .ttf 文件安装到 Windows（Light - Bold 装到完）

restart Windows

开启 VS Code > Ctrl + Shift + P 进入 User Settings (JSON)

添加 font setting

"editor.fontFamily": "Fira Code, Consolas, Courier New, monospace",
"editor.fontLigatures": true,
"editor.fontSize": 15,

fontFamily 加上 Fira Code。后面几个是默认 VS Code 的，当 Windows 没有安装 Fira Code 时就会 fallback 到后面几个选项。

fontLigatures 就是开启连字咯。

fontSize 不是必须的，看个人喜好。默认应该是 14，我觉得有点小。