VSCode 更漂亮的显示错误

如果你是一名程序员，你一定遇到过各种错误。在调试阶段，错误信息是你最好的朋友。但是，在默认设置下，VSCode 显示的错误信息可能并不够清晰、美观。幸运的是，我们可以通过一些插件和设置来使错误信息更加美观，更容易被理解。在本篇文章中，我们将介绍如何优化 VSCode 的错误信息。

安装 Better Comments 插件

Better Comments 是一个非常有用的插件，可以使你更好地理解代码中的注释，并根据注释的不同类型使用不同的颜色。不仅如此，Better Comments 还可以将报错信息以不同的颜色加以区分。

安装 Better Comments 插件的步骤如下：

1. 点击 VSCode 左侧栏的扩展按钮
2. 在搜索框中输入 "Better Comments"
3. 安装插件

Better Comments 默认提供了以下注释类型和颜色：

• // TODO: - 黄色
• // FIXME: - 红色
• // XXX: - 紫色

你也可以自定义注释类型和颜色。例如：

// ! 表示特别注意
// ? 表示疑问
// * 表示重要
// - 表示普通
// TODO: 表示待处理

// 在设置中添加自定义注释
"better-comments.highlightPlainText": true,
"better-comments.tags": [
    {
        "tag": "!",
        "color": "#FF0000",
        "strikethrough": true,
        "backgroundColor": "transparent",
        "textDecoration": "italic"
    },
    {
        "tag": "?",
        "color": "#00BFFF",
        "backgroundColor": "#F0F0F0",
        "textDecoration": "underline"
    },
    {
        "tag": "*",
        "color": "#FFA500"
    },
    {
        "tag": "-",
        "color": "#00FF7F"
    },
    {
        "tag": "TODO",
        "color": "#FFD700",
        "strikethrough": true,
        "backgroundColor": "transparent",
        "textDecoration": "italic"
    }
]

安装 Polacode 插件

Polacode 是一个生成漂亮的代码截图的插件。你可以使用 Polacode 来将你 VSCode 编辑器中的错误信息复制到你的博客或微博中。

安装 Polacode 插件的步骤如下：

1. 点击 VSCode 左侧栏的扩展按钮
2. 在搜索框中输入 "Polacode"
3. 安装插件

使用 Polacode 生成代码截图的步骤如下：

1. 打开你的代码文件，找到你想要截图的代码片段
2. 在 VSCode 的左侧栏中，找到 Polacode 插件
3. 点击 Polacode 插件，并拖动代码片段到中间的窗口中
4. 点击生成按钮，就可以得到一个包含截图和代码的图片

以下是使用 Polacode 生成的截图例子：

修改 VSCode 设置

最后，我们可以根据个人喜好，修改 VSCode 的设置。以下是一些设置建议：

{
    "editor.renderLineHighlight": "all",
    "editor.renderWhitespace": "boundary",
    "explorer.decorations.badges": false,
    "editor.suggestSelection": "first",
    "breadcrumbs.enabled": true,
    "workbench.editor.openSideBySideDirection": "right",
    "problems.decorations.enabled": true,
    "editor.semanticTokenColorCustomizations": {
        "enabled": true
    },
    "diffEditor.ignoreTrimWhitespace": false,
    "git.autofetch": true,
    "window.zoomLevel": -1,
    "editor.tabSize": 4,
    "editor.wordWrap": "on",
    "files.trimTrailingWhitespace": true,
    "editor.minimap.enabled": true,
    "editor.minimap.maxColumn": 80,
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
}

以上是我们介绍的VSCode 更漂亮的显示错误，如果您有其他感悟或问题欢迎交流！