VS Code Mastery

Visual Studio Code (VS Code) is more than just a text editor; it is the industry-standard environment where you will build, debug, and deploy your projects. Setting it up correctly today will save you hundreds of hours over your career.

1. The Interface at a Glance

Before we customize, let's learn the "Geography" of your new home:

1. Activity Bar: Left side icons (Explorer, Search, Git, Extensions).
2. Side Bar: Shows your project files and folders.
3. Editor Area: Where you write your code.
4. Panel: Bottom area for the Terminal and Debugging logs.
5. Status Bar: Bottom blue/purple bar showing git branches and errors.

2. Themes & Aesthetics

A developer's eyes are their most important asset. You need a theme that reduces strain and looks great.

Recommended Themes:

• One Dark Pro: The classic, clean look.
• Dracula Official: High contrast and very popular.
• Night Owl: Designed specifically for coding in low light.

How to change: Press Ctrl + K then Ctrl + T (or Cmd on Mac) and browse the installed themes.

3. The CodeHarborHub "Power Pack"

To work efficiently in our full-stack track, install these specific extensions from the Marketplace (Ctrl + Shift + X):

Extension	Why you need it
Material Icon Theme	Gives unique icons to every file type (HTML, CSS, JS).
Bracket Pair Colorizer	Makes it easy to see which {} belong together.
Tailwind CSS IntelliSense	Autocompletes classes for our styling phase.
Thunder Client	An alternative to Postman for testing your APIs.
GitLens	See exactly who changed which line of code and when.

4. Keyboard Shortcuts (The Speed Hacks)

Professional engineers rarely touch their mouse. Master these 5 shortcuts first:

Action	Windows/Linux	macOS
Quick Open File	Ctrl + P	Cmd + P
Command Palette	Ctrl + Shift + P	Cmd + Shift + P
Integrated Terminal	Ctrl + `	Ctrl + `
Multi-Cursor Edit	Alt + Click	Opt + Click
Toggle Side Bar	Ctrl + B	Cmd + B

5. Settings for Clean Code

We want VS Code to help us stay organized. Open your Settings (Ctrl + ,) and search/check these:

1. Format On Save: Automatically runs Prettier every time you save your work.
2. Auto Save: Set this to onFocusChange so you never lose work.
3. Font Size: Set it to something comfortable (usually 14 or 16).
4. Font Family: Consider "JetBrains Mono" or "Fira Code" for better readability.

6. The "Command Palette" Trick

If you forget a shortcut, don't worry. The Command Palette is your "Global Search" for VS Code features.

• Press Ctrl + Shift + P.
• Type what you want to do (e.g., "Change Color Theme" or "Restart Extension Host").
• It will show you the command and the shortcut for it.

Synced Settings

If you have multiple computers, turn on Settings Sync (bottom-left gear icon). This will backup your themes, extensions, and shortcuts to your GitHub account so they follow you everywhere!

Warning

Avoid "Extension Bloat." Installing 50+ extensions will slow down VS Code and make it crash. Only install what you actually use.