CODEWITHSUNDEEP
visual-studio-code
Manium
Manium

Reputation: 65

Visual Studio Code workbench (explorer) line height

I have researched like the whole internet about Visual Studio Code and didn't find any information about workbench (explorer with the project directories and files) entries line height. How can I change the line height in the workbench?

I am asking, because this standard line height in Version: 1.65.2 is too huge for the project with many directories and files. I want to see relevant directories and files in the right structure without continuing scrolling, so I have to decrease this line height.

Upvotes: 4

Views: 2876

Answers (2)

Gordon Fogus
Gordon Fogus

Reputation: 370

I believe the overall goal is impossible, even considering plugins like Customize UI and Custom CSS and JS Loader because VSCode loads precisely the number of line items it calculates will fit on your screen.

It is, however, technically possible to change the line height.

I wrote JavaScript and loaded with the Custom CSS and JS Loader extension to shrink the items from 22px to 18px to match my editor spacing, and I was left with the same number of explorer entries on my screen and a bunch of whitespace at the bottom.

For reference, here is that JavaScript:

function modifyTopProperty(element) {
  let id = element.id;
  let index = parseInt(id.split('_').pop());
  let expectedTopValue = index * 18;

  let style = window.getComputedStyle(element);
  let topValue = parseInt(style.top.replace('px', ''));

  // Only change the top value if it's not already at the expected value
  if (topValue !== expectedTopValue) {
    element.style.top = `${expectedTopValue}px`;
    element.style.height = `18px`;
    element.style.lineHeight = `18px`;
  }
}

let observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
      mutation.addedNodes.forEach((node) => {
        if (node.matches && node.matches('.explorer-folders-view .monaco-list .monaco-list-row')) {
          modifyTopProperty(node);
        }
      });
    }
    if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
      if (mutation.target.matches('.explorer-folders-view .monaco-list .monaco-list-row')) {
        modifyTopProperty(mutation.target);
      }
    }
  });
});

observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style'] });

Again, you will sadly get exactly the same number of elements on your list, but they will be smaller. Perhaps voting for this issue will increase the odds that this feature gets implemented.

Upvotes: 2

Manium
Manium

Reputation: 65

It is impossible out of the box, but possible with the extension "Customize UI".

Link to the extension: Customize UI for VS Code

Last Update info as of 2022-11-16:

More Info
Version 0.1.65  
Released on 6/6/2019, 7:47:09 AM    
Last updated    
9/25/2022, 3:51:30 AM
Publisher   iocave  
Unique Identifier   iocave.customize-ui

Feature list from the Customize UI README:

This experimental extension allows customizing VSCode user interface beyond what's
normally possible, such as:

Changing interface fonts
Inline titlebar on macOS
Activity bar below sidebar
Custom stylesheet rules conveniently specified in settings.json

Upvotes: 1

Related Questions