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
}

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!