Customise Visual Studio Code

For users who have already memorized the keyboard shortcuts for these commands (and considering the existence of Ctrl-p and Ctrl-Shift-p), the buttons are kind of redundant. It would be nice to have an option to hide them as almost everything in the UI already can be hidden.

Editor actions

Locate the targets

To find out the specific label, we have to access the Chrome DevTools window (the same as in Google Chrome browser) as VS Code is build using Electron. Use Help > Toggle Developer Tools to toggle it on and off. According to its aria-label it’s called Editor actions, and each child has a class of action-item.

Targets

Create the customised css file

Using Custom CSS and JS Loader

Hide the whole thing

[aria-label="Editor actions"] {
  display: none !important;
}

Hide action-items by Title

Possible Titles

  • Open Changes
  • Open Preview to the Side (⌘K V)
  • Compare File with Previous Revision (⌥⌘G ,)
  • Toggle File Blame Annotations (⌥⌘G B)
  • Split Editor Right (⌘\)
  • More Actions...
[title="Open Changes"] {
  display: none !important;
}

Hide action-items by #

Left-most item usually starts at 1, but it’s not always in order

.menu-item-action-item-icon-1,
.menu-item-action-item-icon-2 {
  display: none !important;
}