【问题标题】: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:

    1. 添加这些settings.json
      "editor.quickSuggestions": {
              "strings": true
          },
          "tailwindCSS.includeLanguages": {
              "html": "html",
              "javascript": "javascript",
              "css": "css"
          },
      
      1. 保存并重启 VS 代码。
      2. 当你想使用顺风相关类使用例如。 "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;
      }

      【讨论】:

        猜你喜欢
        • 2019-11-11
        • 2018-02-26
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多