css - Customizing Intellisense style in VSCode - Stack Overflow

admin管理员组

文章数量:1023242

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.

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.

• css
• visual-studio-code
• vscode-extensions

Share Improve this question Follow edited Nov 20, 2024 at 23:29 David542 asked Nov 19, 2024 at 0:31 David542David542 111k206206 gold badges572572 silver badges1k1k bronze badges 2

• could this be what you meant? code.visualstudio/api/references/…, the editorSuggestWidget, not sure if you could add an icon though, but maybe you can start from that docs – Damzaky Commented Nov 21, 2024 at 10:57
• Maybe you're looking for an add-on like this: vscode-custom-css or apc-extension (I've never tried anything like this, I was just curious about your question. I'll check back if there are any answers.) – rozsazoltan Commented Nov 21, 2024 at 12:47

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 6 +500

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:

• microsoft/vscode (github)
• microsoft/vscode CSS filelist (github)
• microsoft/vscode suggest.css (github)

/* 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;
}

What properties are you looking to change exactly?

From this documentation link, I managed to change the background colour of the Intellisense widget.

I added this property to the settings.json file:

"editorSuggestWidget.background": "#fff"

The final file looks like this:

{
    "workbench.colorCustomizations": {
        "editorSuggestWidget.background": "#fff"
    }
}

Not sure if the below is useful to you but:

To access settings.json, I went to File > Settings > Preferences and typed 'color'; scrolled a few items down and found an option to access settings.json. It was created as part of the .vscode folder in my current workspace.

For icons, you can get a product icon theme to change theming. For mapping of specific suggestions to icons, that's up to the extension that provides the suggestion and what icon they choose.

Spacing is technically adjustable via editor.letterSpacing and editor.lineHeight, but of course, those affect the editor area as well. There's editor.suggestLineHeight, but no corresponding setting just for suggest widget letter spacing. Font size has editor.suggestFontSize.

Colouring can be customized in the workbench.colorCustomizations setting with the following customization points: editorSuggestWidget.background, editorSuggestWidget.border, editorSuggestWidget.focusHighlightBackground, editorSuggestWidget.foreground, editorSuggestWidget.highlightForeground, editorSuggestWidget.selectedBackground, editorSuggestWidget.selectedForeground, editorSuggestWidget.selectedIconForeground, and editorSuggestWidgetStatus.foreground.

To break out of what VS Code allows you to customize, you'd need to use something like be5invis.vscode-custom-css, drcika.apc-extension, or similar. You can also raise feature-request issue tickets asking for customization points you want (but first check if it's already been asked for).

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.

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.

• css
• visual-studio-code
• vscode-extensions

Share Improve this question Follow edited Nov 20, 2024 at 23:29 David542 asked Nov 19, 2024 at 0:31 David542David542 111k206206 gold badges572572 silver badges1k1k bronze badges 2

• could this be what you meant? code.visualstudio/api/references/…, the editorSuggestWidget, not sure if you could add an icon though, but maybe you can start from that docs – Damzaky Commented Nov 21, 2024 at 10:57
• Maybe you're looking for an add-on like this: vscode-custom-css or apc-extension (I've never tried anything like this, I was just curious about your question. I'll check back if there are any answers.) – rozsazoltan Commented Nov 21, 2024 at 12:47

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 6 +500

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:

• microsoft/vscode (github)
• microsoft/vscode CSS filelist (github)
• microsoft/vscode suggest.css (github)

/* 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;
}

What properties are you looking to change exactly?

From this documentation link, I managed to change the background colour of the Intellisense widget.

I added this property to the settings.json file:

"editorSuggestWidget.background": "#fff"

The final file looks like this:

{
    "workbench.colorCustomizations": {
        "editorSuggestWidget.background": "#fff"
    }
}

Not sure if the below is useful to you but:

To access settings.json, I went to File > Settings > Preferences and typed 'color'; scrolled a few items down and found an option to access settings.json. It was created as part of the .vscode folder in my current workspace.

For icons, you can get a product icon theme to change theming. For mapping of specific suggestions to icons, that's up to the extension that provides the suggestion and what icon they choose.

Spacing is technically adjustable via editor.letterSpacing and editor.lineHeight, but of course, those affect the editor area as well. There's editor.suggestLineHeight, but no corresponding setting just for suggest widget letter spacing. Font size has editor.suggestFontSize.

Colouring can be customized in the workbench.colorCustomizations setting with the following customization points: editorSuggestWidget.background, editorSuggestWidget.border, editorSuggestWidget.focusHighlightBackground, editorSuggestWidget.foreground, editorSuggestWidget.highlightForeground, editorSuggestWidget.selectedBackground, editorSuggestWidget.selectedForeground, editorSuggestWidget.selectedIconForeground, and editorSuggestWidgetStatus.foreground.

To break out of what VS Code allows you to customize, you'd need to use something like be5invis.vscode-custom-css, drcika.apc-extension, or similar. You can also raise feature-request issue tickets asking for customization points you want (but first check if it's already been asked for).

本文标签： cssCustomizing Intellisense style in VSCodeStack Overflow