VScode 更改智能提示弹出窗口的外观

Question

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

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

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

Answer 1

它在他们的 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 代码。
当你想使用 tailwind 相关时类使用例如。 "text-" 你应该会看到建议。

Answer 2

您必须使用 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 主题来获得相似的颜色...

Answer 3

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

特别针对您在问题中显示的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:

You can use IntelliSense while setting workbench.colorCustomizations values or, for a list of all customizable colors, see the Theme Color Reference.

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

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

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

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

VScode 更改智能提示弹出窗口的外观

VScode change appearance of intellisense popup

visual-studio-code