在 VSCode 中的警告下更改 eslint 行颜色

有时候，我们在编写代码时，可能会在编辑器中看到一些被 eslint 检测出来的警告或错误。这些信息可能会帮助我们避免一些不良的编码习惯或者是帮助我们找到一些潜在的问题。然而，在一些情况下，这些警告或错误信息可能会对我们的视线产生干扰，因为我们的代码会被灰色或者是黄色的背景色所覆盖。所以，在这篇文章中，我们将会介绍如何在 VSCode 中更改 eslint 行的颜色，以方便我们进行代码编写。

安装插件

首先，我们需要在 VSCode 中安装插件 ESLint。在插件市场中搜索并安装即可。

更改规则

1. 打开 VSCode 的设置页面。可以通过快捷键 Ctrl + ,(Windows) 或 Command + ,(Mac) 打开。

2. 在搜索框中输入 eslint，过滤出与 eslint 相关的设置选项。

3. 点击 Edit in settings.json，打开 settings.json 文件。

4. 在 settings.json 文件中添加以下配置：

   "editor.tokenColorCustomizations": {
       "textMateRules": [
           {
               "scope": "source.js meta.group.braces.round.js",
               "settings": {
                   "foreground": "#FFFFFF"
               }
           }
       ]
   }
   

   这段配置将会把 eslint 警告的嵌套圆括号部分的前景色修改为白色。

   注意：如果你使用的是不同的语言，你需要改变 source.js 这个值。

效果展示

修改完成后，你就会看到像下面这样的效果：

结束语

本文介绍了如何更改在 VSCode 中 eslint 警告行的颜色。通过这种方法，我们可以更轻松地识别和解决我们的代码中的错误和问题。