如何更改 VS Code 中的错误样式? [英] How to change error styles in VS Code?

问题描述

我正在尝试以更积极的方式突出显示错误，在 VS Code 中可能吗?

基本上改变这种风格:

UPD:webStorm 中激进突出显示的示例:

解决方案

更新 - 2020 年 11 月

在错误样式上设置背景颜色的属性终于来了！

如果您在配置中遇到任何错误，或者您对 custom-styles.css 进行了任何更改，请尝试完全重新启动 VS Code，它应该会刷新并选择正确配置的/新样式.

---

N.B. 感谢@Stepan Suvorov 提出 github 问题和@Matt Bierner 指出适当的 css，所以我可以通过扩展解决这个问题.

如果有任何 VS Code 开发人员正在阅读本文，首先要感谢 - VS Code 很棒 - 但内置的错误样式对于色盲人士来说是一个重要的可访问性问题.我是红绿色盲，黑色背景上的红色波浪线对我来说很难注意到，尤其是对于单个字符.

自定义错误样式的能力是我真正错过的最后一件事，从 atom 切换到 VS Code.对此的官方支持将是一个很棒的功能！

I'm trying to highlight the error in more aggressive way, is it possible in VS Code?

Basically to change style of this:

UPD: example of aggressive highlight in webStorm:

解决方案

UPDATE - Nov 2020

Properties to set a background color on error styles are finally coming! Merged PR here

editorInfo.background
editorWarning.background
editorError.background

This is not shipped yet - I suppose it will likely ship in the next major version (v1.16). Will update here to confirm the version when this happens.

---

v1.12 and above

Customization of error underline colors are now available natively via workbench.colorCustomizations in workspace settings. See the docs here.

"workbench.colorCustomizations": {
  "editorError.foreground": "#000000", // squiggly line
  "editorError.border": "#ffffff" // additional border under squiggly line
}

Unfortunately, as far as I can find, for now the native customizations are limited to this. To highlight the error with a background color, for example, you will still have to resort to the plugin method below...

---

v1.7.2 and above

Error styles can be fully customised via css with the vscode-custom-css extension.

Create a file custom-styles.css with the following (change the styles as preferred)

.monaco-editor.vs .redsquiggly,
.monaco-editor.vs-dark .redsquiggly {
  background: rgba(255,255,255,0.2);
  border-bottom: 1px solid #fff;
}

Point the extension to custom-styles.css by adding the following in Preferences > User Settings (settings.json)

{
  "vscode_custom_css.imports" : [
    "file:///path/to/file/custom-styles.css"
  ]
}

Open up the command palette (Mac: cmd+shift+P, Windows/Linux: ctrl+shift+P) and search for and execute Enable Custom CSS and JS, then restart VS Code.

You're done!

Screenshot with the above styles applied:

If you get any mistakes in the config, or you make any changes in custom-styles.css, try restarting VS Code completely, and it should refresh and pick up the correctly configured/new styles.

---

N.B. Thanks @Stepan Suvorov for raising the github issue and @Matt Bierner for pointing out the appropriate css, so I could get this fixed with the extension.

If any VS Code devs happen to be reading this, firstly thanks - VS Code is awesome - but the built-in error styling is a significant accessibility issue for colourblind people. I'm red-green colourblind and the red squiggle on a black background is quite a strain to notice for me, particularly with single characters.

The ability to customise the error styles is last thing I really missed, switching to VS Code from atom. Official support for this would be a great feature!

这篇关于如何更改 VS Code 中的错误样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！