How to increase max length of line in VSCODE editor? - visual-studio-code

I have an issue where my code-lines wrap to the next line too soon and there's a weird empty margin on the right side of my editor, which takes up useless space. I thought it was the minimap at first, but it's not that. The size remains the same regardless of the editor window size.
I've probably added it by accident through some shortcut keys but can't find anything related to it from the settings.

Looks like you have the Dart extension installed. If so, change Dart: Line Length to a higher number (9999999 if you want). 0 might also work to disable that option.
As it says, you might also need to change the rulers in the dart section of settings.json

enter image description here
Open Extensions on the menu on the left or File menu.
Then click on the extension settings button.
Change the line length for the extension you are working with.

Related

How to display more files on top tab in VS Code?

Is there a way to configure VS Code to increase the number of files that are able to be displayed across the tabs at the top?
There are currently just 4 files1 visible in that top area, but ~10 would be ideal:
Example
Sublime text uses smaller font on file names (despite similar font size of the code itself), and so allows about twice as much space for displaying files:
Current work around
I hit opt + command + right arrow a few times to quickly survey open files.
Ideas
Perhaps open files could be quickly surveyed (without key presses) if it is possible to:
Expand the area to have more than 1 row of files
Configure VS Code to show only part of the filename
Use smaller font on the file names (not the code itself), similar to sublime text
Something else?
1 The habits of using long file names, and having a lot of files open at the same time don't help, I'm aware of that.
workbench.editor.tabSizing
There's the "workbench.editor.tabSizing": "shrink" setting value, which is documented as so:
Allow tabs to get smaller when the available space is not enough to show all tabs at once.
(the default value for workbench.editor.tabSizing) is "fit".
workbench.editor.wrapTabs
As other have mentioned, there's the workbench.editor.wrapTabs setting, which you can find more about in this Q&A: Multirow Tabs for VSCode.
TL;DR from the setting's description:
Controls whether tabs should be wrapped over multiple lines when exceeding available space or whether a scrollbar should appear instead. This value is ignored when #workbench.editor.showTabs# is disabled.
git.decorations.enabled
You can shave a few pixels by disabling git decorations if you're working on a git project (of course- this is only if you're okay with disabling git decorations). Git decorations add letter indicators to the tab handles that summarize what has changed about those files. Ex. "M" means the file has been modified, and "A" means it has been added.
"git.decorations.enabled": false
workbench.editor.tabCloseButton
You can shave a few pixels by disabling the close button on tabs (if you're okay with that (you'll still be able to close the tab with the associated keyboard shortcut, or by middle-clicking the tab handle)):
"workbench.editor.tabCloseButton": "off"
workbench.editor.showTabs
If your aim is really to declutter, you can take the hardcore/nuclear route and do:
"workbench.editor.showTabs": false,
Et voila! Now the tab handles take up zero space because they're gone :D (and you can navigate tabs using ctrl+tab and ctrl+shift+tab (that's on Windows and Linux- not sure what it is on MacOS), or by using the Explorer view's "Open Editors" section (you might need to enable it first under the three-dots menu))

How to change font-size of vscode developer tool

The default font size of vscode developer tool (ctrl+shift+i) is too small for high dpi monitor and I want to make it bigger.
I do not find exact solution for it and I tried following related operations, but none of them works:
1. Set Window: Zoom Level
This configuration change size of everything except for the debugger tool, wired.
2. Set Editor:Font Size and Debug>Console: Font Size.
Still not affects the debugger tools.
3. Directy ctrl+scroll up/down using mouse
Not working. But works for editor if corresponding switch is on.
4. Configuration inside Developer tool.
Found no entry.
maybe you can try this.
...\Microsoft VS Code\resources\app\out\vs\workbench\workbench.desktop.main.css,
modify the font-size which is 11px to what you want .
(but it just effects the fonts in interface, not the variables in debug)
and is that ctrl+'+' not useful?
enter image description here

Is there a way to configure VS Code to format code at the bottom of the editor instead of at the top when there is extra space in the editor?

I'm looking for something that detects when a file's content does not fill the entire viewport of the editor, then adds extra space at the TOP of the file instead of at the BOTTOM.
VSCode does offer the option to add a default padding at the top of editors but it doesn't automatically display the padding when opening the file (and this isn't exactly the functionality I'm looking for either, since that would be inconvenient for larger files that take up more space than the viewport of the editor).
Bonus points if someone knows the answer to this for IntelliJ as well (if it exists) :)
How it looks now:
What I'm looking for:

Visual Studio Code: change debug panel's font size and font family and debug console input as well

Is there a way to change the debug panel's font size and appearance in VS Code? I'm referring to the side panel where variables and their values are showed when debugging a program.
Note that I want to change only its font size, not that of the entire editor.
I've come across other similar questions here in Stack Overflow, but the solutions provided required to change the zoom level of the entire editor (and thus of the debug panel too), then adjust the editor's font size. However, as I mentioned before, that's not what I'm looking for. I've searched through the settings but couldn't find anything at all. To me, it seems like a very basic feature for a text editor to have, so I can't believe there's no way to do that.
I'm using VS Code 1.40.1 on Linux
Paste these into your settings.json file USER section and change values to your liking.
Note that there is no fontWeight for debug console, but you can state the weight in the fontFamily, like in the example below.
lineHeight seems to be 1/3 bigger than fontSize by default, so that might be a good value to start with.
"debug.console.fontFamily": "Cascadia Code Light",
"debug.console.fontSize": 15,
"debug.console.lineHeight": 21,
I would assume the ability to change the debug's views' font/fontSize is coming as part of the ability to move those views to the Panel (See VS Code move debug tab (left panel) to bottom).
Added:
debug.console.fontSize
debug.console.fontFamily
debug.console.lineHeight
Previously, the size didn't apply to the debug console input. To be fixed in v1.45, see https://github.com/microsoft/vscode/issues/90714 and https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_45.md#notable-fixes.strong text
I have 1.55.1 on Linux and still don't see an option for font size in the debug variables panel (which, as originally asked, is not the debug console). So to adjust the font size in the debug variables panel independently, use the Zoom feature to adjust the entire VS code application, and then use the available font size settings for Editor, IntegratedTerminal and DebugConsole to unzoom those three back to the desired smaller fontsize.

How to make VSCode Intellisense window wider

I have a VSCode extension that helps me autocomplete file paths, however many file paths grow long and are truncated in the VSCode intellisense popover window.
How can I set VSCode to either:
have a fixed width that I can set to be large
automatically expand to fit the intellisense options (preferable)
I happen to have written the extension so if needed I can update it if that is required.
One way around this is to press Ctrl + Space (or what ever your "Trigger suggestion" shortcut is) while the suggestion popover is open to show more detail about current selection.
So this (where I can't differentiate between the Trans imported from #lingui/macro and the one from #lingui/react):
Becomes this:
I don't think this is possible, VSCode generally gives extensions very little control over the built-in UI. See also the Restrictions section of the Extensions Capabilities Overview. Technically there is a way to hack around that, but I wouldn't necessarily recommend it.
There are also a number of settings for the suggest widget, but none of them seems to correspond directly to width. The closest you can get would be reducing the font size with "editor.suggestFontSize".