VScode 更改智能感知弹出窗口的外观答案

【问题标题】：VScode change appearance of intellisense popupVScode 更改智能感知弹出窗口的外观
【发布时间】：2022-11-28 06:17:14
【问题描述】：

在 Tailwind CSS 的 website 上，有一个人在 vscode 中编辑的视频。

他们是如何让弹出窗口看起来像那样的？我可以重现它吗？

对于那些想在他们的网站上看到 gif 的人：https://tailwindcss.com/docs/editor-setup

【问题讨论】：

你看过市场上所有的 Tailwind 扩展吗，它们也有自定义颜色装饰
图片上方 3 行，他们会告诉您使用哪个扩展名
我已经在使用那个扩展了——它不会改变强度。我已经尝试了其他几个顺风主题但没有任何运气。

标签： visual-studio-code

【解决方案1】：

您正在他们的 vscode 编辑器中查看某人选择的颜色主题的结果。您可以联系他们并询问该主题的名称以及它是否在 VSCode Marketplace 上可用，或者您是否可以自己制作。

专门针对您在问题中显示的 Suggest Widget：

您可以在 vscode 自己的设置中执行此操作。在你的settings.json

{
  "workbench.colorCustomizations": {

    "editorSuggestWidget.background": "#344255",

        // the first line in your gif is selected
    "editorSuggestWidget.selectedBackground": "#485669",

        // the letters you have typed  to bring up intellisense: 'bg' in your example
    "editorSuggestWidget.highlightForeground": "#97f4e2",

        // 'bg' in a selected entry 
    "editorSuggestWidget.focusHighlightForeground": "#97f4e2",

    "editorSuggestWidget.foreground": "#fff"  // the text color
  }
}

workbench.colorCustomizations 对象允许您更改许多 vscode UI 元素的颜色。要了解更多信息，请参阅

Customizing a Color Theme:

您可以在设置 workbench.colorCustomizations 时使用 IntelliSense 值或所有可自定义颜色的列表，请参阅Theme Color Reference。

因此，例如，如果您知道那是 suggestWidget，则只需在 workbench.colorCustomizations 对象中键入 "suggestWidget"（包括引号）即可为您提供可以更改颜色的 suggestWidget 的所有属性。

它们也列在这里：Theme Color Reference: Editor Widget Colors。

[我使用吸管浏览器扩展来获取各种元素的颜色。]

[我假设圆角是 MacOS 的结果，下面的演示是使用 W11。]

【讨论】：

【解决方案2】：

它在他们的guide 中说。

By default VS Code will not trigger completions when editing "string" content, for example within JSX attribute values. Updating the editor.quickSuggestions setting may improve your experience:

添加这些settings.json

"editor.quickSuggestions": {
        "strings": true
    },
    "tailwindCSS.includeLanguages": {
        "html": "html",
        "javascript": "javascript",
        "css": "css"
    },

保存并重启 VS 代码。
当你想使用顺风相关类使用例如。 "text-" 你应该看到建议。

【讨论】：

感谢您的回复。但是，我问的是如何设置通用智能感知的样式，而不是如何使用此扩展（这对我来说很好用）。

【解决方案3】：

你必须使用vscode-custom-css扩展名
安装扩展并尝试下面的 CSS ...

.monaco-editor .suggest-widget {
    border-radius: 15px 15px 15px 15px;
    box-shadow: 0 0 15px 15px rgba(0, 0, 0, 0.1);
    padding-top: 15px
 }

您也可以使用Tailwind Moon 主题来获得相似的颜色...

【讨论】：

【解决方案4】：

使用此扩展名：vscode-custom-css 和此 css：

.colorspan {
  border-radius: 4px;
}

.monaco-editor .ced-1-TextEditorDecorationType24-3::before {
  border-radius: 4px;
}

.monaco-editor .suggest-widget {
  border-radius: 15px 15px 15px 15px;
  box-shadow: 0 0 15px 15px rgba(0, 0, 0, 0.1);
  background-color: #344254 !important;
  padding: 10px;
}

.monaco-editor .monaco-highlighted-label .highlight {
  color: #79bcb6;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused {
  background-color: #485668 !important;
}

.monaco-editor .monaco-list-row:hover:not(.selected):not(.focused) {
  background-color: #485668 !important;
}

【讨论】：