🧭Why VSCode

VSCode (Visual Studio Code) is Microsoft's open-source, cross-platform code editor. It's not an IDE (it doesn't bundle a compiler), yet thanks to its lightweight core + extension ecosystem it has become the most widely used editor in the world. For second-year students, it's an all-rounder for C/Java/Python/frontend — one tool for every course assignment.

📦Installation

🪟Five Interface Regions

⌨️The First Must-Learn Shortcut: Command Palette

The Command Palette is the soul of VSCode. Almost anything can be done from here — search for it when you can't remember a shortcut.

📂Open a Project

The basic unit of work in VSCode is a "folder". The best way is to enter the project directory in a terminal and open it with code ..

🗂️Explorer Operations

🏢Workspace

When you open just one folder, that's "single-folder mode". When you need several folders at once (for example a frontend + backend pair of directories), use a workspace.

A .code-workspace file is a piece of JSON that records which folders are included and any shared settings. Just double-click it next time to restore the whole environment.

✂️Line-Level Editing

You'll use these operations hundreds of times a day. Train them into muscle memory.

📐Indentation and Formatting

💾Auto-Save

Don't want to hit Ctrl+S manually every time? Turn on auto-save:

Three modes: off (manual), afterDelay (auto-save after a 1-second pause), onFocusChange (save when you switch away).

✨Multi-Cursor: VSCode's Most Addictive Feature

Imagine typing in 10 places at once — that's multi-cursor. Renaming 10 variable occurrences used to take 10 operations; now it takes one.

🖱️Method 1: Alt+Click to Add a Cursor

Hold Alt (macOS Option) and click anywhere to add a new cursor. You can type in several places at once.

🔤Method 2: Ctrl+D to Select the Next Same Word

This is the superpower for renaming variables. Select a word, press Ctrl+D repeatedly to add every identical word to the selection, then rename them all at once.

📊Method 3: Column (Block) Selection

Hold Shift+Alt (macOS Shift+Option) and drag, or drag with the middle mouse button, to make a vertical rectangular selection. Great for editing aligned tables or adding batch comments.

🎯Live Demo

Convert this set of variables from camelCase to snake_case:

🔍Search Within a File

🌐Global Search

Search for a function, variable or string across the entire project — the feature you'll use most when reading other people's code.

The top of the global-search panel has three advanced filters:

• Match Case (Aa): case-sensitive matching
• Whole Word: only whole words, not substrings
• Regex (.*): use regular expressions

There's also a "files to include/exclude" box to filter by file type, e.g. *.py, *.js or -*.min.js.

🔬Regex Search in Practice

🔗Symbol Search

Jump to the definition of a function/class:

💻Integrated Terminal

VSCode has a built-in terminal, so you don't need a separate Terminal/iTerm window. Write, compile, run and do Git — all in one place.

🔀Multiple Terminals and Splitting

In the terminal panel, the right side has a + to create a terminal and a split icon to split the view. Run a server in one and tests in another without interference.

⚙️Compile and Run Course Assignments

🎨Recommended Terminal Settings

🌿VSCode's Git Capabilities

VSCode has built-in Git support — no extension required. The second icon in the Activity Bar (Source Control) is it. Most everyday Git operations can be done with the GUI.

📝The Three-Step Commit

1. Modify: after editing, file names turn yellow (modified) or green (new)
2. Stage: in the Source Control panel, click the + next to a file to stage it (equivalent to git add)
3. Commit: type a message in the input box and press Ctrl+Enter (equivalent to git commit)

📊Diff View

Click a file in the Source Control panel to open the diff view: the old version is on the left (red shading for deletions), the new one on the right (green shading for additions). Reviewing your own changes like this is a good habit.

🔀Branches and Sync

The Status Bar's bottom-left shows the current branch name; click it to create/switch branches. The ↑↓ number next to it shows commits ahead/behind the remote; click the sync icon to push/pull.

⚔️Resolving Merge Conflicts

When a pull hits a conflict, VSCode shows four buttons at the conflict site:

After resolving, save and commit.

🧩Extension Marketplace

The last icon in the Activity Bar (the block shape) is the extension marketplace. VSCode is powerful because of its tens of thousands of extensions. But don't over-install — too many will slow the editor down. Here's a curated list for sophomores.

⭐Must-Have Extensions Top 10

🔍How to Pick Extensions

• Check the install count: the million-level ones are usually reliable
• Check recent updates: be wary of anything not updated in over a year
• Check ratings: avoid anything below 3 stars
• Check the author: prioritize Microsoft or official language publishers

📦Language Support Extensions

VSCode only ships full JS/TS support by default. Other languages need the matching extension for IntelliSense, debugging and more:

🚫Disable and Uninstall

In the extension list, each extension has "Disable" (temporarily off) and "Uninstall" (permanently remove). You can also enable/disable per workspace.

🐛Why Use a Debugger

Sophomores love using printf / System.out.println to debug — recompiling after every one-line change is extremely inefficient. A debugger lets you pause the program, step line by line, and inspect variable values at any moment — a fundamental skill of professional development.

🔴Set a Breakpoint

Click in the empty space left of a line number and a red dot appears — that's a breakpoint. The program pauses automatically when it reaches that line.

▶️Start Debugging

Press F5 to start debugging. The first time you'll be asked to pick an environment (e.g. Python, C++ (GDB)). VSCode generates a .vscode/launch.json config file.

👁️Four Sections of the Debug Panel

🐍Example Python Debug Config

✂️Code Snippets

There are always a few blocks you type over and over — the main function, a for loop, a class template. Save them as "snippets", type a few letters, and press Tab to expand. This is a weapon against repetitive typing.

📝Create a Custom Snippet

In the Command Palette search "Configure User Snippets", pick a language (e.g. python.json). The syntax is JSON:

Type pdb and press Tab to expand. Here $1, $2 are placeholders — press Tab to jump between them, saving mouse movement.

⚡Emmet: The Frontend Abbreviation Tool

When writing HTML/CSS, VSCode has Emmet built in. Type an abbreviation and press Tab to expand it into full code.

🔤Emmet Syntax Cheat Sheet

⚙️Two Ways to Configure

VSCode settings can be opened two ways: the graphical UI (Settings UI) and the JSON file (settings.json). Beginners use the UI; advanced users use JSON — because JSON lets you batch-edit, comment and version-control your config.

🏢Setting Scope

Workspace settings override user settings. For example, give a specific project a larger font or a custom Python interpreter path.

📋Recommended Configuration

🎹Keyboard Shortcuts

Every shortcut in VSCode can be viewed and customized. In the Command Palette search "Keyboard Shortcuts", or press Ctrl+K then Ctrl+S.

🔌High-Frequency Shortcut Cheat Sheet

🏢Multi-Root Workspace

When you develop frontend and backend at the same time, or need to view docs and code together for a big assignment — a multi-root workspace lets you manage several folders in one window.

📁The .vscode Directory

Each project folder can contain a .vscode directory with project-level config:

🔨Custom Tasks

Save your common build/run commands as "tasks" and trigger them with one key. Press Ctrl+Shift+B to run the default build task, or Ctrl+Shift+P → "Run Task".

After that, pressing Ctrl+Shift+B auto-compiles the current C file, and errors are click-to-jump in the "Problems" panel.

👥Team-Shared Config

Commit the .vscode directory to Git, and teammates get the same tasks, debug config and recommended extensions after cloning.

When teammates open the project, VSCode will suggest installing the recommended extensions.

🌐Remote - SSH

Sophomores often have to connect to a school server for experiments, once stuck with the painful SSH + Vim combo. The Remote-SSH extension lets you edit remote files with your local VSCode UI — IntelliSense, debugging and the terminal all run remotely.

Once configured, just pick the school-server alias when connecting.

🐳Dev Containers

"It works on my machine" is a classic excuse. Dev Containers use Docker to package the whole dev environment (compilers, dependencies, toolchain) into a container, so everyone's environment is identical.

🤝Live Share: Real-Time Collaboration

Live Share is VSCode's real-time multi-person collaboration feature — like Google Docs for code. One person "shares" a session, others join, and everyone edits the same file simultaneously while seeing each other's cursors.

🔗Comparing the Three Remote Methods

🏆Ultimate Task: Build a Small Python Project From Scratch

Use every skill from these 14 days to walk through a full professional development flow. We'll build a simple "To-Do" command-line program.

1️⃣Step 1: Scaffold the Project

Create the file structure in the Explorer:

2️⃣Step 2: Write the Core Code

3️⃣Step 3: Configure the Debugger

Press F5, choose Python, and launch.json is generated automatically. Modify it to accept command-line arguments:

4️⃣Step 4: Debug + Git Full Flow

1. Set a breakpoint: at the first line of the add method
2. Start debugging: press F5, program pauses at the breakpoint
3. Step through: use F10 to watch variables change line by line
4. Inspect variables: watch how self.items changes in the Variables panel
5. Commit: Source Control panel → stage → write a message → commit
6. Configure a task: tasks.json with python3 main.py for one-key run

5️⃣Step 5: Productivity Checklist

Go through this checklist and see whether you've really internalized all 14 days:

🚀Where to Go Next

• Go deep in one language: for your main language (C/Java/Python), dig into its debugging, testing and LSP setup
• AI-assisted coding: install GitHub Copilot / Codeium to experience AI completion
• Theme polish: try popular themes like One Dark Pro, Material Icon Theme
• Vim mode: install a Vim extension to learn keyboard-driven editing (advanced)
• Custom extensions: write one of your own in TypeScript (advanced)