VS Code Power Setup: Best Theme, Fonts, & Custom settings.json

Visual Studio Code (VS Code) is not just a code editor—it's your coding home! With the right tweaks, you can make it look amazing and work exactly the way you like.

Below is a copyright-free, easy-to-read guide showing how to create a beautiful, readable, and ultra-productive VS Code environment. Copy the included settings.json and learn why every setting matters!

🎨 Best Theme & Visual Settings

Colors & Background:
The dark background (#0c0a0a, #161B22) reduces eye strain and looks professional.
Material Icon Theme:
Instantly recognize file types and folders with colorful, modern icons.

"workbench.iconTheme": "material-icon-theme",
"workbench.colorCustomizations": {
  "editor.background": "#0c0a0a",
  "editor.foreground": "#E6EDF3",
  "terminal.background": "#1E1E1E",
  "terminal.foreground": "#f9f9f9",
  "sideBar.background": "#161B22",
  "activityBar.background": "#161B22",
  "titleBar.activeBackground": "#0D1117",
  "statusBar.background": "#161B22"
}

✨ Font Family & Readability

Font Family: Chalkboard SE is a smooth, friendly code font.
For terminal, use MesloLGS NF (great for icons and powerline support).
Font Size & Line Height: Large font (20pt) and bigger line height (36px) boost legibility and reduce fatigue.
Font Ligatures: Smooths out special character combinations into beautiful code glyphs.

"editor.fontFamily": "Chalkboard SE",
"editor.fontSize": 20,
"editor.lineHeight": 36,
"editor.fontLigatures": true,
"terminal.integrated.fontFamily": "MesloLGS NF"

⚒️ Formatter & Live Features

Prettier for Formatting:
Always get beautiful, consistent code on save, type, and paste. Prettier is set as the default for JavaScript and React (.js & .jsx).
Format On Save/Type/Paste: Say goodbye to ugly, inconsistent code formats.
Live Server Info Hidden: Stop info messages from bugging you.

"[javascriptreact]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.formatOnPaste": true,
"prettier.useEditorConfig": true,
"liveServer.settings.donotShowInfoMsg": true

💡 Code Colors & Snippet Suggestions

Syntax Highlighting:
Custom colors for comments, keywords, strings, functions, variables—for clean, readable code!
Snippet Suggestions:
Inline suggestions for quick code writing without pop-up interference.

"editor.tokenColorCustomizations": {
  "comments": "#6A9955",
  "keywords": "#C586C0",
  "strings": "#CE9178",
  "functions": "#DCDCAA",
  "variables": "#9CDCFE"
},
"editor.snippetSuggestions": "inline"

📝 Productivity & Quality-of-Life Tweaks

Word Wrap: Keeps code readable, even on smaller screens or for long lines.
Auto Update Imports:
Keeps import paths clean when you move files (for JS).
Quick Suggestions:
Instant code suggestions, but not in comments (less clutter).

"editor.wordWrap": "on",
"chat.editor.wordWrap": "on",
"javascript.updateImportsOnFileMove.enabled": "always",
"editor.quickSuggestions": {
  "other": true,
  "comments": false,
  "strings": true
}

🚀 Terminal & Workflow Boosts

Terminal Profile: Uses Zsh (powerful shell), defaults to iTerm on Mac.
File Associations: Ensures .jsx gets the right syntax highlighting.

"terminal.integrated.defaultProfile.osx": "zsh",
"terminal.external.osxExec": "iTerm.app",
"files.associations": {
  "*jsx": "javascriptreact"
}

📋 Full Example: settings.json Template

Copy and paste this config into your .vscode/settings.json file (or User Settings), tweak as you like!

{
  "editor.fontSize": 20,
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "editor.formatOnPaste": true,
  "editor.snippetSuggestions": "inline",
  "chat.editor.wordWrap": "on",
  "editor.wordWrap": "on",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "liveServer.settings.donotShowInfoMsg": true,
  "workbench.colorCustomizations": {
    "editor.background": "#0c0a0a",
    "editor.foreground": "#E6EDF3",
    "terminal.background": "#1E1E1E",
    "terminal.foreground": "#f9f9f9",
    "sideBar.background": "#161B22",
    "activityBar.background": "#161B22",
    "titleBar.activeBackground": "#0D1117",
    "statusBar.background": "#161B22"
  },
  "editor.tokenColorCustomizations": {
    "comments": "#6A9955",
    "keywords": "#C586C0",
    "strings": "#CE9178",
    "functions": "#DCDCAA",
    "variables": "#9CDCFE"
  },
  "workbench.iconTheme": "material-icon-theme",
  "editor.lineHeight": 36,
  "editor.fontLigatures": true,
  "prettier.useEditorConfig": true,
  "terminal.integrated.fontFamily": "MesloLGS NF",
  "terminal.integrated.defaultProfile.osx": "zsh",
  "editor.fontFamily": "Chalkboard SE",
  "terminal.external.osxExec": "iTerm.app",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": true
  },
  "editor.suggestOnTriggerCharacters": true,
  "typescript.suggest.enabled": true,
  "javascript.suggest.enabled": true,
  "typescript.updateImportsOnFileMove.enabled": "never",
  "RainbowBrackets.depreciation-notice": false,
  "chat.instructionsFilesLocations": {
    ".github/instructions": true
    // ...other specific files
  },
  "security.workspace.trust.untrustedFiles": "open",
  "files.associations": {
    "*jsx": "javascriptreact"
  }
}

💬 Why These Settings Work

Readable, modern look
Consistent code formatting
Instant suggestions + smart navigation
Custom colors for easier focus
Works great for JavaScript, React, & modern web stacks

With this VS Code setup, your editor will not only look beautiful and professional, but it will also help you write cleaner code, faster. Tweak further to make it truly your own—happy coding!