cssvisual-studio-codevscode-extensions

Customizing Intellisense style in VSCode

Is it possible to customize the menu that is produced in the auto-complete in VSCode? I don't see any mention of it in the docs here. I'm basically looking to create something closer to how Google Sheets looks in its autocomplete, where for example I'm able to customize (or not) the icon, the spacing, the hover, etc.

enter image description here

Solution

  • I'm not entirely sure about the exact formatting, only that there are different ways to "manipulate" the original CSS classes in VSCode. I wrote an example in response to this. My intention was purely to help, so if it doesn't work or there's an issue with the solution, please let me know. It's just that such detailed messages can't be left in a comment.

    Maybe you're looking for an add-on like this: vscode-custom-css or apc-extension

    Customize Hint Layout with vscode-custom-css

    1. Open settings.json
    2. Added following config: 
      "vscode_custom_css.imports": [
  "file:///path/to/your/custom.css"
]
    3. Create your customize layout to added custom.css file
    4. Enable custom CSS in VSCode from CtrlShiftP: Reload Custom CSS and JS
    Example CSS

    You can look up the VSCode UI elements in the source code here:

    /* Background color */
.monaco-editor .suggest-widget {
    background-color: #2c2c2c !important;
    border-radius: 8px !important;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4) !important;
}

/* Text color */
.monaco-editor .suggest-widget .monaco-list .monaco-list-row {
    color: #ffffff !important;
    padding: 10px 15px !important;
}

/* Highlight selected item */
.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused {
    background-color: #3c5a99 !important;
    color: #ffffff !important;
}

/* Custom icon size */
.monaco-editor .suggest-widget .suggest-widget-icon {
    width: 20px !important;
    height: 20px !important;
}