Visual Studio Code workbench (explorer) line height

Question

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.

Answer 1

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.