Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

VS Code - size of description popup

I am creating a snippet for VS Code with long descriptions. I have noticed that the description popup window in VS Code has a scrollbar, but it would be greater if I can enlarge the window? Is it possible?

like image 892
steff123 Avatar asked Jun 19 '17 19:06

steff123


People also ask

How do you resize code in VS Code?

You can adjust the Zoom level in VS Code with the View > Appearance > Zoom commands. The zoom level increases or decreases by 20% each time a Zoom command is executed. View > Appearance > Zoom In (Ctrl+=) - increase the Zoom level. View > Appearance > Zoom Out (Ctrl+-) - decrease the Zoom level.

How do you beautify text in VS Code?

The code formatting is available in Visual Studio Code through the following shortcuts: On Windows Shift + Alt + F. On Mac Shift + Option + F. On Linux Ctrl + Shift + I.

How do you compress lines in VS Code?

On linux/windows, press F1 , type join lines , click :gear-icon , press & hold ctrl and press and release sequence: K + K .


3 Answers

This is possible now with the Custom CSS and JS Loader extension.


1. Install extension

Custom CSS and JS Loader extension

2. Set permissions

  • macOS
    • VS Code: sudo chown -R $(whoami) /Applications/Visual Studio Code.app/Contents/MacOS/Electron
    • VS Code Insiders: sudo chown -R $(whoami) /Applications/Visual Studio Code - Insiders.app/Contents/MacOS/Electron
  • Linux: sudo chown -R $(whoami) /usr/share/code

3. Create CSS override file

touch ~/.vscode-custom.css:

/* suggest-widget size */

.monaco-editor .suggest-widget.docs-side {
  width: 1000px;
}

.monaco-editor .suggest-widget.docs-side > .details {
  width: 60%;
  max-height: 800px !important;
}

.monaco-editor .suggest-widget.docs-side > .tree {
  width: 30%;
  float: left;
}

/* parameter-hints-widget */

.editor-widget.parameter-hints-widget.visible {
  max-height: 800px !important;
}

.monaco-editor .parameter-hints-widget > .wrapper {
  max-width: 1000px;
}

/* editor-hover */

.monaco-editor-hover .monaco-editor-hover-content {
  max-width: 1000px;
}

Apply CSS file path to settings.json

{
  "vscode_custom_css.imports": ["file:///Users/yourusername/.vscode-custom.css"],
  "vscode_custom_css.policy": true
}

4. Restart VSCode

  • Restart VSCode
  • Ignore "VSCode is corrupt errors_
    • You can choose to suppress these forever
  • Run command "Reload Custom CSS and JS"
like image 183
Drew Avatar answered Oct 05 '22 22:10

Drew


No, that's not possible currently. Sometimes text even wraps in such a popup window, which makes it difficult to read. Certainly something that needs improvement.

Here's an example:

enter image description here

like image 26
Mike Lischke Avatar answered Oct 05 '22 20:10

Mike Lischke


VSCode 1.51 (Oct. 2020) should add (part of) that feature with:

Resizable suggestions

This milestone, we've made several improvements to the suggestions UI. First and foremost: it can now be resized! Drag the sides or corners to resize the control.

Resizable Suggestions control -- https://media.githubusercontent.com/media/microsoft/vscode-docs/vnext/release-notes/images/1_51/suggest-drag.gif

Theme: GitHub Light, Font: FiraCode

The size of the suggestions list will be saved and restored across sessions.
The size of the details pane is only saved per session, since the size tends to be more variable.
Also, the editor.suggest.maxVisibleSuggestions setting has become obsolete.

As noted by Jan M. in the comments, this only allows resizing the suggestion window, not the popup window.
Feature allowing to resize the popup window is not yet implemented:
microsoft/vscode issue 14165: "Feature request: configure tooltip max width".

like image 36
VonC Avatar answered Oct 05 '22 22:10

VonC