If you’ve been meaning to learn VS Code but haven’t quite gotten around to it, Tech With Tim has an excellent beginner tutorial that covers everything you need to know to get productive fast. Whether you’re completely new to code editors or switching from another IDE, this guide will walk you through the essentials—from basic navigation to debugging like a pro.
Here’s what we’ll cover:
- What VS Code actually is and why developers love it
- Setting up your first project
- Navigating the interface like a power user
- Using the integrated terminal
- Installing and managing extensions
- Search, find, and replace across your entire project
- Essential keyboard shortcuts
- Debugging fundamentals
- Git integration basics
What Is Visual Studio Code?
VS Code (Visual Studio Code) is a free, open-source, lightweight code editor developed by Microsoft. Despite being “lightweight,” it’s incredibly powerful—supporting virtually every programming language through its extension system.
The key distinction here is that VS Code is a code editor, not a full IDE. Out of the box, it’s deliberately minimal. This is actually a feature, not a bug. Instead of shipping with support for every language under the sun (most of which you’ll never use), VS Code lets you install only what you need. Working in Python? Install the Python extension. Building a React app? Grab the JavaScript and React extensions. This keeps things fast and focused.
As of 2021 (when the original video was filmed), VS Code had already become the most popular code editor among developers, and that position has only solidified since then. The combination of Microsoft’s backing, a massive extension marketplace, and genuine usability has made it the default choice for many.
Setting Up Your First Project
When you first launch VS Code, you’ll see a welcome screen with shortcuts for common actions—opening folders, cloning repositories, or creating new files. You can close this anytime by hitting the X, but it’s useful to know it exists.
Opening and Creating Projects
VS Code works with folders as projects. To get started:
- Go to File → Open Folder
- Either select an existing folder or create a new one
- That folder becomes your project root
You’ll notice there’s also a “Workspace” option. Workspaces are folders with VS Code-specific settings saved alongside them—custom fonts, test configurations, editor preferences. For most use cases, you won’t need workspaces. Just open a folder and go.
Once your folder is open, the Explorer panel (the first icon in the left sidebar) shows your file structure. From here you can:
- Create new files and folders (right-click or use the icons)
- Drag and drop to reorganize
- Rename, copy, and delete files
It behaves exactly like your operating system’s file explorer, just integrated into your editor.
The VS Code Interface
The left sidebar contains your most frequently used panels:
- Explorer – File and folder management
- Search – Project-wide find and replace
- Source Control – Git integration
- Run and Debug – Debugging tools
- Extensions – Install and manage extensions
Each panel can be opened with keyboard shortcuts (which we’ll cover shortly), and you can resize or collapse them as needed.
Managing Open Files
When you click on a file, it opens in preview mode—notice the italicized filename in the tab. In preview mode, opening another file will replace it. If you want a file to stay open, double-click it. The italics disappear, and it becomes a persistent tab.
You can split the editor to view multiple files side by side:
- Right-click a file tab → Split Left/Right/Up/Down
- Or simply drag tabs around to arrange them
VS Code is incredibly flexible here. You can have two, three, or more editors visible simultaneously, arranged however makes sense for your workflow.
The Integrated Terminal
This is one of VS Code’s most useful features. Instead of switching between your editor and a separate terminal window, VS Code embeds a full terminal right in the interface.
To open it:
- Press Ctrl + ` (that’s the backtick key, left of 1)
- Or drag up from the bottom of the window
The terminal automatically starts in your project’s root directory. On Windows, you’ll get PowerShell by default; on Mac and Linux, it’s typically Bash or your configured shell.
Working with Multiple Terminals
You’re not limited to one terminal. You can:
- Click the + button to spawn additional terminals
- Click the split icon to view two terminals side by side
- Switch between terminals using the dropdown
- Kill terminals with the trash icon
This is incredibly useful when you need to run a development server in one terminal while executing commands in another.
Extensions: Making VS Code Your Own
Extensions are where VS Code really shines. The extension marketplace has tools for virtually every language, framework, and workflow you can imagine.
Access extensions with Ctrl + Shift + X or click the Extensions icon in the sidebar.
Essential Extensions to Consider
While you should install what you actually need (that’s the whole point), a few extensions are broadly useful:
- Prettier – Automatic code formatting (Tim specifically recommends this one)
- Language-specific extensions – Python, JavaScript, TypeScript, Java, etc.
Other popular options include GitLens for enhanced Git capabilities and ESLint for JavaScript linting.
Installing an extension is as simple as searching for it and clicking Install. You can disable or uninstall extensions just as easily.
The philosophy here is important: start minimal, add as needed. Don’t install 50 extensions on day one. You’ll end up with conflicts, slowdowns, and features you never use.
Search and Replace
The Search panel (Ctrl + Shift + F) lets you find text across your entire project—not just the current file.
Type your search term, and VS Code shows every match across all files, organized by filename. Click any result to jump directly to that location.
For replacing text, expand the search panel (click the arrow) and enter your replacement text. You can:
- Replace one match at a time
- Replace all matches instantly
- Use regular expressions for complex patterns
- Match case or whole words only
Finding Within a Single File
If you only need to search the current file:
- Ctrl + F – Find
- Ctrl + H – Find and replace
These open a smaller search bar at the top of the editor, scoped to just the active file.
Essential Keyboard Shortcuts
VS Code is keyboard-driven. Learning these shortcuts will dramatically speed up your workflow:
| Action | Shortcut |
|---|---|
| Open file by name | Ctrl + P |
| Open command palette | Ctrl + Shift + P |
| Find in file | Ctrl + F |
| Find and replace in file | Ctrl + H |
| Find in all files | Ctrl + Shift + F |
| Toggle terminal | Ctrl + ` |
| Open settings | Ctrl + , |
| Toggle full screen | F11 |
| Zoom in/out | Ctrl + / Ctrl - |
| Go to definition | F12 or right-click |
The Command Palette (Ctrl + Shift + P) deserves special mention. It’s essentially a search bar for every action VS Code can perform. If you’re looking for a feature, type it into the command palette first.
Customizing Your Environment
Settings
Open settings with Ctrl + , (or Settings icon → Settings). The most common things you’ll want to adjust:
- Font Size – Especially important if you’re on a high-DPI display or sharing your screen
- Theme – Change the color scheme to match your preferences
- Tab Size – Set your preferred indentation
VS Code offers both a graphical settings editor and a raw JSON file (settings.json). Most users stick with the GUI, but the JSON file gives you complete control.
Themes
To change your color theme:
- Click the Settings gear icon
- Select Color Theme
- Browse and select from installed themes
VS Code comes with several built-in themes (dark and light variants), and you can install many more from the extension marketplace.
Debugging Basics
VS Code has powerful debugging capabilities built in. The exact experience varies by language, but the fundamentals are consistent.
Setting Breakpoints
Click in the gutter (the space to the left of line numbers) to set a breakpoint—a red dot appears. When you run your code in debug mode, execution will pause at that line.
Running the Debugger
- Open the Run and Debug panel (left sidebar)
- Click Run and Debug
- Select your debug configuration (VS Code usually auto-detects based on your file type)
When execution hits a breakpoint:
- The left panel shows all variables and their current values
- You can step through code line by line
- The debug toolbar lets you continue, step over, step into, step out, restart, or stop
For more advanced debugging (conditional breakpoints, watch expressions, etc.), the documentation goes into depth—but this foundation will handle most debugging scenarios.
Git Integration
VS Code has Git support built right in. If your project folder is a Git repository (or you initialize one), the Source Control panel shows your changes.
Basic Workflow
- Make changes to files
- Open Source Control (Ctrl + Shift + G)
- Review changed files (they show with status indicators)
- Stage changes by clicking the + next to each file
- Enter a commit message
- Click the checkmark to commit
The three-dot menu in Source Control gives access to additional Git commands: push, pull, fetch, branch management, and more.
You can also view file diffs by clicking on changed files—VS Code shows a side-by-side comparison of the old and new versions.
Conclusion
VS Code’s popularity isn’t an accident. It strikes an excellent balance between being lightweight and being capable. The extension system means you’re never stuck with a one-size-fits-all editor—you build the tool that fits your specific workflow.
The features covered here—file management, integrated terminal, extensions, search, debugging, and Git integration—form the foundation of productive VS Code usage. Master these, and you’ll be well-equipped to tackle any development project.
If you want to go deeper, explore the official VS Code documentation and experiment with extensions relevant to your stack. The tool is designed to grow with you.