Back
•
3min
•
100 views

My VSCode setup

Inspired by Benja's post on his VSCode setup, I'm thrilled to share my own configuration as well. As developers, we spend a significant portion of our time writing or analyzing code. Consequently, having an environment that fosters productivity and comfort is crucial.

Image 1
Image 2

Theming

These settings aim to create a minimal and distraction-free coding environment by reducing visual clutter and focusing on essential elements. Here are the components that make up my minimalistic VSCode theme:

Here's a glimpse into my settings.json file, which you can copy or view on GitHub Gist.

settings.json
{
  // general
  "workbench.startupEditor": "none",
  "workbench.colorTheme": "Vespertino",
  "workbench.productIconTheme": "fluent-icons",
  "workbench.settings.editor": "json",
  "workbench.tree.enableStickyScroll": true,
  "workbench.layoutControl.enabled": false,
  "workbench.editor.editorActionsLocation": "hidden",
  "workbench.editor.showTabs": "multiple", // file tabs
  "explorer.compactFolders": false,
  "editor.smoothScrolling": true,
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.scrollbar.horizontal": "hidden",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.wordWrap": "bounded",
  "editor.wrappingStrategy": "advanced",
  "editor.tabSize": 2,
  "editor.inlineSuggest.enabled": true,
  "editor.minimap.enabled": false,
  "files.insertFinalNewline": true,
  "window.menuBarVisibility": "compact",
  "window.commandCenter": false,
  "window.zoomLevel": 1,
 
  // reduce noice
  "editor.hover.enabled": true,
  "editor.renderLineHighlight": "none",
  "editor.occurrencesHighlight": "off",
  "explorer.confirmDelete": false,
  "explorer.decorations.colors": true,
  "explorer.decorations.badges": false,
  "explorer.confirmDragAndDrop": false,
  "workbench.tips.enabled": false,
  "git.decorations.enabled": false,
 
  // code
  "editor.fontSize": 13,
  "editor.fontFamily": "Victor Mono",
  "editor.fontLigatures": true,
  "editor.lineHeight": 1.7,
 
  //terminal
  "terminal.integrated.fontFamily": "Geist Mono",
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.lineHeight": 1.3,
 
  // APC Settings
  "apc.font.family": "Geist Mono",
  "apc.activityBar": {
    "position": "bottom",
    "hideSettings": true,
    "size": 24
  },
  "apc.statusBar": {
    "position": "editor-bottom",
    "height": 22,
    "fontSize": 10
  },
  "apc.electron": {
    "titleBarStyle": "hiddenInset",
    "trafficLightPosition": {
      "x": 8,
      "y": 10
    }
  },
  "apc.header": {
    "height": 34
  },
  "apc.listRow": {
    "height": 21
  }
}

Closing Thoughts

While the configuration provided here reflects my personal preferences, it's essential to remember that everyone's needs and preferences are unique. Feel free to tweak and customize your VSCode setup to suit your own coding style and workflow.