如何更改visual studio代码中的注释字体？

Question

在观看了着名的python程序员的Sublime3截屏后,我发现用精美字体显示代码评论是个好主意,让评论更加明显,让评论阅读更加愉快.一个例子如下:

在此演示中,代码注释以浅色手写字体显示,使其更容易与实际代码区分开来,同时保持评论的乐趣.

我浏览了https://code.visualstudio.com/docs/getstarted/,但似乎无法找到更改代码注释字体的设置.

所以我想知道如何设置另一种字体来评论普通代码字体.

Answer 1

下载字体 https://www.dafontfree.net/freefonts-script12-bt-f141942.htm

安装包 https://github.com/be5invis/vscode-custom-css

创建新的 css 文件 sudo nano ~/.vscode/vs-code-styles.css

复制 CSS

/* Set italics and comments to the script font */
.mtk3, .mtk4 {
    font-family: 'Script12 BT';
    font-size: 1.2em;
    font-style: normal;
    color: #57a649!important;
}
.comment {
  font-family: 'Script12 BT';
  font-style: italic;
  font-size: 1.2em;
  color: #57a649!important;
}
.comment:not(.punctuation) {
    font-family: 'Script12 BT';
    font-size: 1.5em;
    color: #57a649!important;
}

代码 > 首选项 > 用户设置

// Somewhere in your user / workspace settings file !

.
.
.
.

"vscode_custom_css.imports": ["file:///<PATH TO CSS FILE>/.vscode/vs-code-styles.css"],
"vscode_custom_css.policy": true,
"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "scope": "comment",
            "settings": {
                "fontStyle": "italic"
            }
        }
    ]
}

来源：https : //gist.github.com/psgganesh/d0815ece4b19ce24dde98e21d55f53f5

Answer 2

是的，您可以更改注释所用的字体，但是对于看似简单的东西，它相当冗长，而且结果也不是 100% 完美。例如，当您编写注释时，您可能会发现光标距离结果文本稍远。如果您可以接受这一点，那么流程如下。

这是我的设置，只是为了表明它可以完成：

您将执行以下操作：

• 创建一个全局自定义样式表来更改所有项目的注释外观。

• 在 VS Code 中创建指向此样式表的链接settings.json

• 安装一个插件，确保 VS Code 注册您的自定义样式。

创建样式表

对于此部分，您需要转到 VS Code 安装的根目录。我使用的是 Mac，因此如果使用 PC，您需要确定自己的路径。

对于 Mac 上的我来说，这是Users/username/.vscode/

导航到终端中的该目录，然后touch style.css创建样式表。

创建样式表后，您将需要添加字体规则。但首先您需要知道目标类别。要识别该类，请在 VS Code 中打开开发工具。然后将鼠标悬停在评论上即可查看课程。我的是.mtk3，但我听说这些随着更新而变化，所以最好自己检查一下。

好的，现在添加样式，例如

.mtk3 {
   font-family: "iosevka";
   font-size: 1em;
   font-style: italic;
}

链接到您的样式表

现在我们需要确保 VS Code 知道样式表。所以开放settings.json。（您需要具有此名称的全局文件，而不是单个项目中可能拥有的任何本地文件。）打开此文件后，添加以下条目：

"vscode_custom_css.imports": ["file:///Users/username/.vscode/style.css"],

请注意，您正在为文件指定 JSON 数组，而不是单个值。显然，这条路应该是你自己的。请记住，这是一个链接引用，实际上并不是文件路径，因此您可能需要在路径前面添加 Windows 等效的file://.

安装插件

这仍然不足以让样式发挥作用。您需要能够update custom css and js从编辑器中运行该命令，但这不是默认的。因此，安装以下插件：Custom CSS and JS Loader。

安装后，您可以Cmd+Shift+P输入“启用自定义 CSS 和 JS”。出现该选项，选择它。现在重新启动 VS Code，或者运行reload window，你应该会得到你喜欢的注释字体。

正如我所说，光标的行为有点不稳定，但它并不太分散注意力，因为与代码相比，您编写的注释不多。可能我需要瞄准更多的mtk课程。如果有人知道原因，也许可以在评论中详细说明这一点。