VS Code Settings Configuration: A Complete Developer Setup Guide
A well-configured development environment is crucial for productivity and code quality. This article documents a comprehensive VS Code settings configuration that optimizes the editor for modern development workflows, with detailed explanations of each setting and how to customize them for your needs.
Table of Contents
- Quick Setup
- Typography & Visual Settings
- Editor Behavior & UX
- Code Formatting & Quality
- UI & Workbench Customization
- File Management & Performance
- Language-Specific Configurations
- Extension-Specific Settings
- Customization Guide
Quick Setup
To use this configuration, copy the settings below into your VS Code settings.json
file:
Location:
- macOS:
~/Library/Application Support/Code/User/settings.json
- Windows:
%APPDATA%\Code\User\settings.json
- Linux:
~/.config/Code/User/settings.json
Access via VS Code:
- Open Command Palette (
Cmd/Ctrl + Shift + P
) - Type "Preferences: Open Settings (JSON)"
- Replace content with the configuration below
Typography & Visual Settings
Font Configuration
{
"editor.fontFamily": "'JetBrains Mono', monospace",
"editor.fontSize": 16,
"editor.lineHeight": 1.6,
"editor.letterSpacing": 0.5,
"editor.fontLigatures": true
}
Why these settings:
- JetBrains Mono: Excellent programming font with clear character distinction
- Font size 16: Reduces eye strain during long coding sessions
- Line height 1.6: Improves readability with adequate spacing
- Letter spacing 0.5: Subtle spacing for better character recognition
- Font ligatures: Combines character sequences (like
=>
,!=
) into single glyphs
Cursor & Animation
{
"editor.cursorBlinking": "solid",
"editor.cursorSmoothCaretAnimation": "on",
"editor.cursorStyle": "line",
"editor.cursorWidth": 3,
"editor.smoothScrolling": true
}
Benefits:
- Solid blinking: Less distracting than rapid blinking
- Smooth animations: Reduces jarring transitions
- Wider cursor: More visible, especially on high-DPI displays
- Smooth scrolling: Easier to follow content while scrolling
Editor Behavior & UX
Visual Enhancements
{
"editor.renderLineHighlight": "all",
"editor.rulers": [80, 120],
"editor.wordWrap": "on",
"editor.renderWhitespace": "boundary",
"editor.padding.top": 10,
"editor.padding.bottom": 10,
"editor.minimap.autohide": true,
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": "active"
}
Key improvements:
- Line highlight: Shows current line context clearly
- Rulers at 80/120: Visual guides for code width conventions
- Word wrap: Prevents horizontal scrolling for long lines
- Whitespace rendering: Shows spacing at word boundaries
- Editor padding: Breathing room at top/bottom
- Auto-hide minimap: Reduces clutter, appears on hover
- Bracket colorization: Color-codes matching brackets for easier navigation
IntelliSense & Suggestions
{
"editor.suggestSelection": "first",
"editor.quickSuggestions": {
"other": "on",
"comments": "off",
"strings": "on"
},
"editor.acceptSuggestionOnCommitCharacter": false,
"editor.acceptSuggestionOnEnter": "smart",
"editor.tabCompletion": "on",
"editor.suggest.insertMode": "replace"
}
Productivity enhancements:
- First suggestion selected: Faster completion workflow
- Smart suggestion contexts: Active in code and strings, disabled in comments
- Controlled suggestion acceptance: Prevents accidental completions
- Tab completion: Use Tab key for completions
- Replace mode: Suggestions replace existing text instead of inserting
Code Formatting & Quality
Automatic Formatting
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.linkedEditing": true,
"editor.codeActionsOnSave": {
"source.organizeImports": "explicit"
}
}
Quality improvements:
- Prettier as default: Consistent code formatting across languages
- Format on save/paste: Automatic code consistency
- Linked editing: Simultaneous editing of matching HTML/XML tags
- Organize imports: Automatically sorts and cleans up imports
File Management
{
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000,
"files.trimTrailingWhitespace": true,
"files.insertFinalNewline": true,
"files.trimFinalNewlines": true
}
Benefits:
- Auto-save after 1 second: Prevents work loss with minimal performance impact
- Trailing whitespace removal: Cleaner diffs and consistent formatting
- Final newline: Unix convention, prevents git warnings
- Trim final newlines: Removes unnecessary empty lines at file end
UI & Workbench Customization
Layout & Appearance
{
"workbench.activityBar.location": "top",
"workbench.startupEditor": "welcomePage",
"workbench.statusBar.visible": true,
"workbench.layoutControl.enabled": false,
"workbench.tree.indent": 20,
"workbench.colorTheme": "Catppuccin Frappé"
}
UI improvements:
- Activity bar on top: Saves horizontal space
- Welcome page: Helpful shortcuts and recent files
- Increased tree indent: Better file hierarchy visualization
- Catppuccin Frappé: Modern, eye-friendly color scheme
Window Settings
{
"window.commandCenter": false,
"window.menuBarVisibility": "compact",
"window.newWindowDimensions": "maximized"
}
Space optimization:
- No command center: Reduces UI clutter
- Compact menu bar: Saves vertical space
- Maximized new windows: Optimal screen real estate usage
File Management & Performance
Exclusions for Performance
{
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/.DS_Store": true,
"**/Thumbs.db": true
},
"files.watcherExclude": {
"**/.git/objects/**": true,
"**/.git/subtree-cache/**": true,
"**/.hg/store/**": true,
"**/node_modules/**": true,
"**/vendor/**": true,
"**/storage/**": true
},
"search.exclude": {
"**/node_modules": true,
"**/vendor": true,
"**/storage": true,
"**/.git": true,
"**/*.code-search": true
}
}
Performance benefits:
- File exclusions: Hides system files and version control directories
- Watcher exclusions: Prevents monitoring of large, frequently changing directories
- Search exclusions: Faster search by ignoring dependencies and generated files
Language-Specific Configurations
Web Development
{
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
Data & Documentation
{
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[markdown]": {
"editor.wordWrap": "on",
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
PHP Development
{
"[php]": {
"editor.wordSeparators": "`~!@#%^&*()-=+[{]}\\|;:'\",.<>/?",
"editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
}
}
PHP-specific optimizations:
- Custom word separators: Better word selection for PHP variables and functions
- Intelephense formatter: PHP-specific formatting rules
Extension-Specific Settings
Prettier Configuration
{
"prettier.tabWidth": 2,
"prettier.useTabs": false,
"prettier.semi": true,
"prettier.singleQuote": true,
"prettier.trailingComma": "es5"
}
PHP Intelephense
{
"intelephense.files.maxSize": 5000000,
"intelephense.completion.insertUseDeclaration": true,
"intelephense.completion.fullyQualifyGlobalConstantsAndFunctions": false
}
Git & Version Control
{
"git.autofetch": true,
"git.confirmSync": false,
"git.suggestSmartCommit": false,
"git.replaceTagsWhenPull": true,
"githubPullRequests.pullBranch": "never",
"diffEditor.ignoreTrimWhitespace": false
}
Terminal Configuration
{
"terminal.integrated.fontSize": 14,
"terminal.integrated.fontFamily": "'JetBrains Mono', monospace",
"terminal.integrated.cursorBlinking": true,
"terminal.integrated.cursorStyle": "block"
}
Complete Configuration
Here's the complete settings.json
file ready for use:
{
// ============================================================================
// EDITOR - Typography & Visual
// ============================================================================
"editor.fontFamily": "'JetBrains Mono', monospace",
"editor.fontSize": 16,
"editor.lineHeight": 1.6,
"editor.letterSpacing": 0.5,
"editor.fontLigatures": true,
// ============================================================================
// EDITOR - Cursor & Animation
// ============================================================================
"editor.cursorBlinking": "solid",
"editor.cursorSmoothCaretAnimation": "on",
"editor.cursorStyle": "line",
"editor.cursorWidth": 3,
"editor.smoothScrolling": true,
// ============================================================================
// EDITOR - Layout & Display
// ============================================================================
"editor.renderLineHighlight": "all",
"editor.rulers": [80, 120],
"editor.wordWrap": "on",
"editor.renderWhitespace": "boundary",
"editor.padding.top": 10,
"editor.padding.bottom": 10,
"editor.minimap.autohide": true,
"editor.occurrencesHighlight": "singleFile",
"editor.selectionHighlight": false,
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": "active",
// ============================================================================
// EDITOR - Formatting & Code Actions
// ============================================================================
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.linkedEditing": true,
"editor.codeActionsOnSave": {
"source.organizeImports": "explicit"
},
// ============================================================================
// EDITOR - IntelliSense & Suggestions
// ============================================================================
"editor.suggestSelection": "first",
"editor.quickSuggestions": {
"other": "on",
"comments": "off",
"strings": "on"
},
"editor.smartSelect.selectLeadingAndTrailingWhitespace": false,
"editor.acceptSuggestionOnCommitCharacter": false,
"editor.acceptSuggestionOnEnter": "smart",
"editor.tabCompletion": "on",
"editor.suggest.insertMode": "replace",
// ============================================================================
// EDITOR - Accessibility
// ============================================================================
"editor.accessibilitySupport": "off",
// ============================================================================
// WORKBENCH - UI Layout
// ============================================================================
"workbench.activityBar.location": "top",
"workbench.startupEditor": "welcomePage",
"workbench.statusBar.visible": true,
"workbench.layoutControl.enabled": false,
"workbench.tree.indent": 20,
"workbench.colorTheme": "Catppuccin Frappé",
// ============================================================================
// WINDOW - Display Settings
// ============================================================================
"window.commandCenter": false,
"window.menuBarVisibility": "compact",
"window.newWindowDimensions": "maximized",
// ============================================================================
// FILES - Management & Performance
// ============================================================================
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000,
"files.trimTrailingWhitespace": true,
"files.insertFinalNewline": true,
"files.trimFinalNewlines": true,
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/.DS_Store": true,
"**/Thumbs.db": true
},
"files.watcherExclude": {
"**/.git/objects/**": true,
"**/.git/subtree-cache/**": true,
"**/.hg/store/**": true,
"**/node_modules/**": true,
"**/vendor/**": true,
"**/storage/**": true
},
// ============================================================================
// SEARCH - Exclusions
// ============================================================================
"search.exclude": {
"**/node_modules": true,
"**/vendor": true,
"**/storage": true,
"**/.git": true,
"**/*.code-search": true
},
// ============================================================================
// EXPLORER - File Management
// ============================================================================
"explorer.confirmDragAndDrop": false,
"explorer.confirmDelete": false,
// ============================================================================
// EXTENSIONS - Management
// ============================================================================
"extensions.autoUpdate": false,
// ============================================================================
// GIT - Version Control
// ============================================================================
"git.autofetch": true,
"git.confirmSync": false,
"git.suggestSmartCommit": false,
"git.replaceTagsWhenPull": true,
"githubPullRequests.pullBranch": "never",
"diffEditor.ignoreTrimWhitespace": false,
// ============================================================================
// LANGUAGE SPECIFIC - Formatters & Rules
// ============================================================================
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[markdown]": {
"editor.wordWrap": "on",
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[php]": {
"editor.wordSeparators": "`~!@#%^&*()-=+[{]}\\|;:'\",.<>/?",
"editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
},
// ============================================================================
// PLUGIN SPECIFIC - Extensions
// ============================================================================
"namespaceResolver.sortAlphabetically": true,
"prettier.tabWidth": 2,
"prettier.useTabs": false,
"prettier.semi": true,
"prettier.singleQuote": true,
"prettier.trailingComma": "es5",
"intelephense.files.maxSize": 5000000,
"intelephense.completion.insertUseDeclaration": true,
"intelephense.completion.fullyQualifyGlobalConstantsAndFunctions": false,
"terminal.integrated.fontSize": 14,
"terminal.integrated.fontFamily": "'JetBrains Mono', monospace",
"terminal.integrated.cursorBlinking": true,
"terminal.integrated.cursorStyle": "block",
"typescript.preferences.includePackageJsonAutoImports": "off",
"typescript.suggest.autoImports": false
}
Conclusion
This VS Code configuration provides a solid foundation for productive development across multiple languages and frameworks. The settings are organized into logical sections with clear comments, making it easy to understand and modify.
Key benefits of this setup:
- Improved readability with optimized typography and spacing
- Enhanced productivity through smart suggestions and auto-formatting
- Better performance with strategic file exclusions
- Consistent code quality with automatic formatting and linting
- Customizable foundation that can be adapted to team or personal preferences
Remember to install the required extensions (Prettier, PHP Intelephense, etc.) for the configuration to work optimally. This setup has been tested across various project types and provides a reliable starting point for new development environments.
Related Resources
Want to see more development tool configurations? Check out our comprehensive guides on setting up complete development environments.