A Minimalist VSCode to Help You Focus on Coding

Maybe you are tired of your VSCode layout, but I have a solution! This setup follows a minimalist approach, removing all unnecessary elements from your screen so you can focus entirely on your code.

I got this idea from Rocketseat’s CTO, and after applying it, I noticed a real improvement in my productivity.

Let's Customize Your VSCode!

To achieve this clean and focused look, you should install the following extensions:

• App Customize UI++
• Fluent Icons
• Min Theme
• Symbols

Fonts

For fonts, I’m using JetBrains Mono. It's an unusual choice, but you can use any font you like—Fira Code, for example. I prefer JetBrains Mono because it supports font ligatures, which enhance readability.

Configuration

After installing the extensions, open your settings.json and paste the following configuration:

{
    "workbench.startupEditor": "newUntitledFile",
    "workbench.editor.doubleClickTabToToggleEditorGroupSizes": "maximize",
    "editor.fontSize": 14,
    "editor.lineHeight": 1.8,
    "editor.rulers": [80, 120],
    "extensions.ignoreRecommendations": true,
    "files.associations": {
      ".env.*": "dotenv",
      ".prettierrc": "json",
      "*.css": "css"
    },
    "symbols.files.associations": {
      ".env.example": "gear"
    },
    "editor.parameterHints.enabled": false,
    "editor.renderLineHighlight": "gutter",
    "editor.suggestSelection": "first",
    "explorer.confirmDelete": false,
    "terminal.integrated.showExitAlert": false,
    "workbench.editor.labelFormat": "short",
    "editor.fontLigatures": true,
    "editor.acceptSuggestionOnCommitCharacter": false,
    "explorer.compactFolders": false,
    "git.enableSmartCommit": true,
    "editor.accessibilitySupport": "off",
    "explorer.confirmDragAndDrop": false,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": "explicit"
    },
    "editor.semanticHighlighting.enabled": false,
    "breadcrumbs.enabled": false,
    "workbench.productIconTheme": "fluent-icons",
    "editor.fontFamily": "JetBrains Mono",
    "editor.tabSize": 2,
    "security.workspace.trust.untrustedFiles": "newWindow",
    "files.exclude": {
      "**\/CVS": true,
      "**\/.DS_Store": true,
      "**\/.hg": true,
      "**\/.svn": true,
      "**\/.git": true,
      ".vscode": true
    },
    "workbench.iconTheme": "symbols",
    "update.mode": "start",
    "[jsonc]": {
      "editor.defaultFormatter": "vscode.json-language-features"
    },
    "[json]": {
      "editor.defaultFormatter": "vscode.json-language-features"
    },
    "window.commandCenter": true,
    "git.openRepositoryInParentFolders": "always",
    "symbols.hidesExplorerArrows": false,
    "workbench.editor.empty.hint": "hidden",
    "update.showReleaseNotes": false,
    "security.promptForLocalFileProtocolHandling": false,
    "workbench.activityBar.location": "hidden",
    "apc.activityBar": {
      "position": "bottom",
      "hideSettings": true,
      "size": 48,
      "itemMargin": 8,
      "itemSize": 32
    },
    "editor.hideCursorInOverviewRuler": true,
    "editor.minimap.enabled": false,
    "window.titleBarStyle": "native",
    "apc.electron": {
      "titleBarStyle": "hiddenInset",
      "trafficLightPosition": {
        "x": 11,
        "y": 10
      },
      "frame": false
    },
    "apc.header": {
      "height": 36
    },
    "apc.listRow": {
      "height": 24
    },
    "apc.font.family": "'Inter'",
    "apc.stylesheet": {
      ".title-label > h2": "display: none",
      ".editor-actions": "display: none",
      ".nosidebar .inline-tabs-placeholder": "width: 75px",
      ".pane-header": "padding: 0 8px",
      ".pane-body": "padding: 8px",
      ".split-view-view:first-child .pane-header": "display: none !important;",
      ".monaco-list-row": "border-radius: 4px;",
      ".monaco-workbench .monaco-list:not(.element-focused):focus:before": "display: none;"
    },
    "editor.scrollbar.vertical": "hidden",
    "explorer.sortOrder": "foldersNestsFiles",
    "explorer.fileNesting.patterns": {
      ".env.local": ".env*",
      ".env": ".env*"
    },
    "explorer.fileNesting.enabled": true,
    "workbench.colorTheme": "Min Dark",
    "workbench.statusBar.visible": false,
    "window.customTitleBarVisibility": "never",
    "diffEditor.ignoreTrimWhitespace": false,
    "diffEditor.maxComputationTime": 0,
    "remote.autoForwardPortsSource": "hybrid"
  }

After applying these settings, your VSCode should look like this:

I really love this setup because it helps me focus on coding, and, to be honest, it looks beautiful!

Quick Tip

To access the sidebar menu, use CTRL + Q.

Reference

Check out the original inspiration for this setup in this video.

Hope you enjoyed this article! See you in the next one. 🚀