VSCode Customization

Personal VSCode workspace configuration with IBM Plex Mono font, Tokyo Night theme, and UI modifications.

Note: UI appearance may vary as this setup uses custom extensions. Preview includes a custom extension with UI modifications, code snippets, and AI integration tools.

📝 Setup Instructions

1. Install all required extensions
2. Open command palette → Preferences: Open User Settings (JSON)
3. Copy the contents of data/settings.json to your VSCode user settings
4. Apply the custom CSS in the Custom UI Style extension settings
5. Restart VSCode (recommended: use Task Manager or Terminal to kill all VSCode processes)

🎨 Visual Configuration

Fonts

• Primary Font: IBM Plex Mono
• Fallback Fonts: SF Mono, Menlo, Monaco, monospace
• Font Size: 13px
• Font Weight: Normal
• Font Ligatures: Enabled

Themes & Icons

• Color Theme: Tokyo Night
• Product Icons: El VSC Product Icon Theme
• File & Folder Icons: Catppuccin Macchiato

🛠️ Extensions

Required Extensions

1. Custom UI Style

   • Enables custom CSS modifications for UI elements

2. Tokyo Night

   • Base color theme

3. Catppuccin Icons

   • File and folder icon theme

4. El VSC Product Icon Theme

   • Application and product icon theme

Recommended Extensions

• Prettier: Code formatting
• ESLint: Code linting

⚙️ Key Settings

• Tab Size: 2 spaces
• Format on Save: Enabled
• Minimap: Disabled
• Activity Bar: Top position
• Smooth Scrolling: Enabled
• Tree Indent: 11px
• Render Indent Guides: Always