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 pressingEnter
.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 likeCHANGELOG.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 withnpm
.
Terminal Settings
terminal.integrated.allowChords
:false
Disables key chord detection in the terminal.terminal.integrated.commandsToSkipShell
:["coderoad.enter"]
Skips processingcoderoad.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 theOption
key asMeta
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
-
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.
-
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).
-
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.
-
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).
-
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
- Copy the contents of
settings.json
. - Open VS Code and go to
File > Preferences > Settings
(or pressCtrl + ,
). - Click the
{}
icon in the top-right corner to open the settings editor in JSON format. - Paste the configuration and save the file.
Enjoy a cleaner, distraction-free coding experience!
Top comments (0)