DEV Community

James Candan
James Candan

Posted on

Shout out to freeCodeCamp's distraction-free VS Code settings

Inspired by freeCodeCamp's use of CodeRoad, while building tutorials for Stack Elevate, I came across this gem: a distraction-free VS Code settings configuration.

This is perfect for students engaged in a provided-for-you development environment, to create an engaging, distraction-free coding environment. Good for minimalists too, but may not be suited for those ready to take on the day-to-day work of software development.

# .vscode/settings.json
{
  "breadcrumbs.enabled": false,
  "debug.internalConsoleOptions": "neverOpen",
  "debug.showInStatusBar": "never",
  "editor.acceptSuggestionOnCommitCharacter": false,
  "editor.acceptSuggestionOnEnter": "off",
  "editor.autoClosingBrackets": "never",
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  "editor.hover.enabled": false,
  "editor.inlineSuggest.enabled": false,
  "editor.minimap.enabled": false,
  "editor.parameterHints.enabled": false,
  "editor.quickSuggestions": {
    "other": false,
    "comments": false,
    "strings": false
  },
  "editor.referenceInfos": false,
  "editor.snippetSuggestions": "none",
  "editor.suggest.statusBar.visible": false,
  "editor.suggestOnTriggerCharacters": false,
  "editor.tabSize": 2,
  "explorer.autoReveal": false,
  "explorer.openEditors.visible": 0,
  "extensions.autoCheckUpdates": false,
  "extensions.ignoreRecommendations": true,
  "files.autoSave": "afterDelay",
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    ".vscode": true,
    ".gitignore": true,
    "freeCodeCamp": true,
    "learn-bash-by-building-a-boilerplate": true,
    ".gitpod.Dockerfile": true,
    ".gitpod.yml": true,
    "CHANGELOG.md": true,
    "coderoad.yaml": true,
    "tutorial.json": true,
    "TUTORIAL.md": true
  },
  "html.autoClosingTags": false,
  "npm.fetchOnlinePackageInfo": false,
  "task.slowProviderWarning": false,
  "terminal.integrated.allowChords": false,
  "terminal.integrated.commandsToSkipShell": ["coderoad.enter"],
  "terminal.integrated.enableFileLinks": false,
  "terminal.integrated.environmentChangesIndicator": "off",
  "terminal.integrated.macOptionIsMeta": true,
  "terminal.integrated.showExitAlert": false,
  "telemetry.enableTelemetry": false,
  "update.mode": "none",
  "update.showReleaseNotes": false,
  "workbench.enableExperiments": false,
  "workbench.startupEditor": "none",
  "workbench.colorTheme": "Tomorrow Night Blue",
  "workbench.colorCustomizations": {
    "[Tomorrow Night Blue]": {
      "menu.background": "#0a0a23",
      "menu.foreground": "#ffffff",
      "activityBar.background": "#0a0a23",
      "activityBar.foreground": "#ffffff",
      "activityBar.activeBorder": "#ffffff",
      "activityBar.border": "#2a2a40",
      "editorWidget.background": "#0a0a23",
      "editorWidget.foreground": "#ffffff",
      "sideBar.background": "#1b1b32",
      "sideBarTitle.foreground": "#858591",
      "sideBar.foreground": "#f5f6f7",
      "sideBar.border": "#2a2a40",
      "editor.background": "#2a2a40",
      "editor.foreground": "#dfdfe2",
      "tab.activeForeground": "#ffffff",
      "tab.inactiveBackground": "#1b1b32",
      "tab.inactiveForeground": "#d0d0d5",
      "tab.border": "#2a2a40",
      "editorGroupHeader.tabsBackground": "#0a0a23",
      "editorIndentGuide.background": "#3b3b4f",
      "terminal.background": "#0a0a23",
      "terminal.foreground": "#ffffff",
      "terminal.ansiBrightGreen": "#ffffff",
      "panel.background": "#1b1b32",
      "panelTitle.inactiveForeground": "#858591",
      "panelTitle.activeBorder": "#f5f6f7"
    }
  },
  "workbench.iconTheme": null,
  "workbench.statusBar.visible": false,
  "workbench.tips.enabled": false,
  "workbench.tree.renderIndentGuides": "none",
  "zenMode.centerLayout": false
}
Enter fullscreen mode Exit fullscreen mode

source: freeCodeCamp: learn-bash-by-building-a-boilerplate: .vscode/settings.json


Here’s a detailed breakdown of the provided VS Code settings.json configuration, as summarized by ChatGPT:

General Settings

  • breadcrumbs.enabled: false

    Disables the breadcrumb navigation bar at the top of the editor.

  • debug.internalConsoleOptions: neverOpen

    Prevents the debug console from automatically opening during a debugging session.

  • debug.showInStatusBar: never

    Hides the debug status bar item.


Editor Behavior

  • editor.acceptSuggestionOnCommitCharacter: false

    Prevents auto-completion when pressing commit characters (e.g., ;, ,).

  • editor.acceptSuggestionOnEnter: off

    Disables accepting suggestions by pressing Enter.

  • editor.autoClosingBrackets: never

    Disables automatic closing of brackets.

  • editor.codeActionsOnSave: { "source.fixAll": "explicit" }

    Runs all applicable code fixes explicitly marked as fixable on save.

  • editor.hover.enabled: false

    Disables the hover tooltip feature.

  • editor.inlineSuggest.enabled: false

    Disables inline suggestions.

  • editor.minimap.enabled: false

    Disables the minimap (code overview bar).

  • editor.parameterHints.enabled: false

    Disables parameter hints when typing function arguments.

  • editor.quickSuggestions: { "other": false, "comments": false, "strings": false }

    Disables suggestions in all contexts: other code, comments, and strings.

  • editor.referenceInfos: false

    Disables reference information in the editor.

  • editor.snippetSuggestions: none

    Disables snippet suggestions.

  • editor.suggest.statusBar.visible: false

    Hides the suggestion widget status bar.

  • editor.suggestOnTriggerCharacters: false

    Disables suggestions triggered by specific characters (e.g., .).

  • editor.tabSize: 2

    Sets the tab width to 2 spaces.


Explorer and Files

  • explorer.autoReveal: false

    Prevents automatically revealing the active file in the file explorer.

  • explorer.openEditors.visible: 0

    Hides the "Open Editors" section in the explorer.

  • files.autoSave: afterDelay

    Saves files automatically after a short delay.

  • files.exclude: { ... }

    Hides specific files and folders from the explorer, including .git, .vscode, .DS_Store, and several specific files like CHANGELOG.md.


Extensions

  • extensions.autoCheckUpdates: false

    Disables automatic extension update checks.

  • extensions.ignoreRecommendations: true

    Ignores extension recommendations.


HTML and NPM

  • html.autoClosingTags: false

    Disables automatic closing of HTML tags.

  • npm.fetchOnlinePackageInfo: false

    Prevents fetching online package info when working with npm.


Terminal Settings

  • terminal.integrated.allowChords: false

    Disables key chord detection in the terminal.

  • terminal.integrated.commandsToSkipShell: ["coderoad.enter"]

    Skips processing coderoad.enter command in the shell.

  • terminal.integrated.enableFileLinks: false

    Disables clickable file links in the terminal.

  • terminal.integrated.environmentChangesIndicator: off

    Disables indicators for environment variable changes.

  • terminal.integrated.macOptionIsMeta: true

    Treats the Option key as Meta on macOS.

  • terminal.integrated.showExitAlert: false

    Disables alerts when a terminal process exits.


Telemetry and Updates

  • telemetry.enableTelemetry: false

    Disables telemetry data collection.

  • update.mode: none

    Disables automatic updates for VS Code.

  • update.showReleaseNotes: false

    Prevents showing release notes after an update.


Workbench Settings

  • workbench.enableExperiments: false

    Disables experimental features.

  • workbench.startupEditor: none

    Prevents the startup editor (welcome page) from opening.

  • workbench.colorTheme: Tomorrow Night Blue

    Sets the color theme to "Tomorrow Night Blue."

  • workbench.colorCustomizations: { ... }

    Customizes the colors for the selected theme (e.g., background, foreground, sidebar, tabs, etc.).

  • workbench.iconTheme: null

    Disables the file icon theme.

  • workbench.statusBar.visible: false

    Hides the status bar.

  • workbench.tips.enabled: false

    Disables tips and recommendations in the workbench.

  • workbench.tree.renderIndentGuides: none

    Disables indent guides in tree views.


Zen Mode

  • zenMode.centerLayout: false Prevents centering the editor layout in Zen mode.

This configuration is designed to minimize distractions by disabling most UI elements, suggestions, and automatic behaviors. It’s ideal for users who prefer a clean, highly customized workspace focused solely on code. Let me know if you'd like further details on any specific part!


VS Code Minimalist Configuration

This settings.json file is designed to create a clean, distraction-free coding environment for developers, educators, or learners who prefer simplicity and focus. It disables many of VS Code’s default features that might feel overwhelming or unnecessary, allowing you to concentrate on the code itself.

Key Features

  1. Distraction-Free Editor

    • Removes extra visual elements like the minimap, breadcrumbs, and hover tooltips.
    • Disables inline suggestions, auto-closing brackets, and parameter hints to avoid interruptions.
    • Keeps the interface simple by hiding the status bar and startup editor.
  2. Streamlined Workflow

    • Focuses on manual control by turning off auto-completion, suggestion pop-ups, and snippet suggestions.
    • Simplifies the explorer by hiding unnecessary files and folders (e.g., .git, .vscode, temporary files).
  3. Privacy and Stability

    • Disables telemetry (tracking and data sharing with VS Code).
    • Prevents automatic updates to extensions or the editor itself, ensuring a consistent experience.
  4. Custom Theme and Appearance

    • Uses the Tomorrow Night Blue theme, a dark and low-contrast color scheme that’s easy on the eyes.
    • Further customizes the theme for a cohesive and polished look (e.g., sidebar, tabs, terminal colors).
  5. Terminal Tweaks

    • Adjusts terminal behavior for simplicity, like disabling clickable links and environment change notifications.

Who Is This For?

This setup is ideal for:

  • Developers who prefer minimalism: Perfect if you want to focus on writing code without the noise of extra features.
  • Educators or workshop hosts: Simplifies the interface, making it easier for learners to follow along without distractions.
  • Privacy-conscious users: Reduces data sharing and unnecessary online activity from the editor.
  • Those maintaining legacy projects or tutorials: Optimized for working in environments with specific file structures.

How It Feels to Use

  • You’ll notice fewer pop-ups, suggestions, and visual elements cluttering your screen.
  • The editor stays calm and focused, encouraging manual coding and problem-solving rather than relying on hints or automation.
  • It feels lightweight and stable, making it an excellent choice for long coding sessions.

Customizations

This configuration has been tailored with specific preferences in mind:

  • Certain files and folders (like .git, .DS_Store, and FreeCodeCamp-related files) are hidden from the file explorer.
  • The terminal and editor are simplified, but basic functionality remains intact.
  • The color scheme is soothing and consistent, designed for extended use.

How to Use This Configuration

  1. Copy the contents of settings.json.
  2. Open VS Code and go to File > Preferences > Settings (or press Ctrl + ,).
  3. Click the {} icon in the top-right corner to open the settings editor in JSON format.
  4. Paste the configuration and save the file.

Enjoy a cleaner, distraction-free coding experience!

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay