Let’s start by removing the sidebar and the status bar. They take up space on the screen and do not provide any useful information. Open the settings file: Cmd+Shift+P (Ctrl+Shift+P if you are on Windows or Linux) and type Open settings (JSON). In the file that opens, we will add our settings:
{
"workbench.activityBar.visible": false,
"workbench.statusBar.visible": false,
}
Panels can be accessed from the keyboard:
- Cmd+P - open file in project
- Cmd+B - enable or disable the sidebar
- Cmd+Shift+E - navigation bar for project files
- Cmd+Shift+F - search bar in files
- Cmd+Shift+D - debug panel
- Cmd+Shift+X - extensions panel
- Ctrl+Shift+G - repositories panel
Tabs
Disable tabs and additional information displayed on them.
"workbench.editor.showTabs": false,
"workbench.editor.tabCloseButton": "off",
"workbench.editor.showIcons": false,
"workbench.editor.decorations.badges": false,
"workbench.editor.decorations.colors": false,
You can move between editor groups using Cmd+1, Cmd+2 keys and so on (if the group has not been opened, it will be created). You can open a tab in the active editor group with Ctrl+Tab or Ctrl+1, Ctrl+2 and so on.
Panels
Let’s remove unnecessary arrows and nesting level indicators for panels displaying trees (file navigation, commits, and so on). Also, install nice icons.
"workbench.iconTheme": "material-icon-theme",
"workbench.tree.renderIndentGuides": "none",
"material-icon-theme.hidesExplorerArrows": true,
Clean up the Files panel:
"explorer.excludeGitIgnore": true,
"explorer.openEditors.visible": 0,
"explorer.confirmDragAndDrop": false,
"explorer.autoReveal": false,
Editor
Now let’s move on to the main file editor. It contains a lot of visual noise.
"editor.minimap.enabled": false,
"editor.renderWhitespace": "none",
Turn off the highlighting of the active line and other noise:
"editor.renderLineHighlight": "none",
"editor.overviewRulerBorder": false,
"editor.hideCursorInOverviewRuler": true,
"editor.occurrencesHighlight": false,
// Scrollbars
"editor.scrollbar.horizontal": "hidden",
"editor.scrollbar.vertical": "auto",
"editor.scrollbar.verticalScrollbarSize": 6,
// Misc
"editor.guides.indentation": false,
"editor.folding": false,
"editor.glyphMargin": false,
"editor.lineNumbers": "off",
Font. Here you can customize it as you like:
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,
"editor.fontSize": 13,
"editor.lineHeight": 18,
Breadcrumbs
Disable breadcrumbs:
"breadcrumbs.enabled": false,
"breadcrumbs.icons": false,