Skip to content

NeaByteLab/VSCode-Customization

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

1 Commit
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

VSCode Customization

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

VSCode Setup Preview

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