How To Use Visual Studio Code? A Free, Lightweight Code Editor

Listen to this article

Visual Studio Code (VS Code) is a free, lightweight code editor from Microsoft that supports multiple programming languages and can be customized extensively. Built-in tools like debugging, Git integration, and an integrated terminal make it versatile for development workflows.

To get started, visit https://code.visualstudio.com/ and download the installer for your operating system. Run the installer and follow the prompts; it typically takes just a few minutes. Once installed, launch VS Code. On first open, you’ll see a Welcome page with options to customize themes, install extensions, or open a folder as a workspace. For best results, open a project folder using File > Open Folder to organize your files in the Explorer view.

The main areas include:

• Activity Bar: Switch between views like Files (Explorer), Search, Source Control (Git), Run and Debug, and Extensions.
• Editor: Where you write code; supports split views for multiple files side by side (**⌘** on macOS or *Ctrl+* on Windows/Linux).
• Sidebar: Displays file trees, outlines, or timelines depending on the active view.
• Panel: At the bottom for Terminal, Output, Problems, or Debug Console (⌘J to toggle).
• Status Bar: Shows branch info, errors, or language mode; click elements for quick actions.

Open a file via the Explorer or ⌘P (Quick Open). Type code, and use features like IntelliSense (⌃Space to trigger) for suggestions. Find text with ⌘F, replace with the expanded widget. Save files with ⌘S or enable Auto Save in settings. For multi-line edits, hold Alt and click to add cursors.

Click the Extensions icon or press ⇧⌘X. Search for extensions like “Python” or “Live Server,” then click Install. Manage them via the gear icon for updates or disabling.

For version control, initialize Git in your folder and use the Source Control view to commit changes. Debug by setting breakpoints (click gutter or F9) and starting with F5. Use the integrated Terminal (⌃` ) for commands without leaving VS Code.

Visual Studio Code (VS Code) is a versatile, open source code editor developed by Microsoft, designed to be lightweight yet powerful for developers across various programming languages and platforms. Whether you’re coding in JavaScript, Python, or any other language, VS Code’s extensibility makes it adaptable to your needs.

Installation and Initial Setup

Begin by navigating to the official VS Code website at https://code.visualstudio.com/ to download the latest version compatible with your operating system, Windows, macOS, or Linux. The download is small, around 100MB, ensuring a quick process. Once downloaded, run the installer:

1. For Windows: Double click the .exe file, accept the license agreement, choose the installation directory (default is fine for most users), and select options like adding to PATH (recommended for command line access) or creating a desktop shortcut.
2. For macOS: Open the .dmg file, drag the VS Code app to your Applications folder.
3. For Linux: Use the .deb or .rpm package via your package manager (e.g., sudo dpkg -i code.deb for Debian based systems), or install via Snap/Flatpak for easier updates.

After installation, launch VS Code. You’ll be greeted by the Welcome page, which offers quick actions like changing color themes (try Dark+ for a modern look) or syncing settings across devices if you sign in with a Microsoft or GitHub account. To start working, create or open a folder as your workspace: Go to File > Open Folder (or ⌘O on macOS/Ctrl+O on Windows/Linux) and select a directory. This sets up the Explorer view, where you can manage files and folders.

Enable basic settings for a smoother experience: Press ⌘, (comma) to open the Settings editor, search for “Auto Save,” and set files.autoSave to “afterDelay” to automatically save changes after a short pause.

Exploring the User Interface

VS Code’s interface is modular and customizable, making it intuitive for beginners while scalable for advanced users.

• Activity Bar (Left Side): Icons for switching views. Key ones include:
  Explorer (files and folders).
  Search (across workspace).
  Source Control (Git integration).
  Run and Debug.
  Extensions. Toggle it with ⌘B.
• Editor Area (Center): The main workspace for editing files. Open multiple tabs, split editors vertically (**⌘**), or drag tabs to new windows for multi monitor setups. Use ⌘1/2/3 to switch between editor groups.
• Sidebar (Next to Editor): Context dependent; shows file trees in Explorer or symbols in Outline view. Hide it if needed for more space.
• Panel (Bottom): Hosts the Terminal, Output logs, Problems (errors/warnings), and Debug Console. Toggle with ⌘J or resize by dragging.
• Status Bar (Very Bottom): Displays file encoding, line/column position, Git branch, and language mode. Click the language indicator to change modes (e.g., from Plain Text to Python).

For navigation, use ⌘P for Quick Open to jump to files, or ⌘Shift+O for symbols within a file. Customize the layout via View > Appearance > Customize Layout or enter Zen Mode (⌘K Z) for distraction-free coding.

Basic Code Editing Features

VS Code excels in text editing with smart features that speed up coding.

1. Opening and Saving Files: From the Explorer, double click a file or use ⌘P to search and open. Create new files via File > New File (⌘N). Save with ⌘S or rely on Auto Save.
2. Text Editing and IntelliSense: Type code directly; IntelliSense provides autocompletions as you type (filter with CamelCase, e.g., “cra” for “createApp”). Trigger manually with ⌃Space. For languages without built-in support, install extensions.
3. Finding and Replacing: Press ⌘F for in-file search; highlights appear instantly. Expand for replace functionality, supporting regex (toggle with the .* icon) and case sensitivity. Search workspace wide with ⇧⌘F.
4. Multi Cursor and Selection Tools: Add cursors with Alt+Click or ⌥⌘↓/↑ for simultaneous edits. Select next occurrence with ⌘D, or all with ⇧⌘L. Use box selection by holding Shift+Alt while dragging.
5. Formatting and Folding: Format documents with ⇧⌥F or selections with ⌘K ⌘F. Enable auto formatting in settings (editor.formatOnSave: true). Fold code blocks with ⌥⌘[ / ⌥⌘] or fold all with ⌘K ⌘0.

For Markdown files, preview with ⇧⌘V or side by side with ⌘K V.

Using the Extensions Marketplace

Extensions are key to tailoring VS Code; the marketplace has thousands available.

1. Accessing It: Click the Extensions icon (⇧⌘X) or search in the Command Palette.
2. Searching and Installing: Type keywords (e.g., “theme”) or use filters like @recommended. Select an extension, read its README, and click Install. For pre-releases, use the dropdown.
3. Managing Extensions: View installed ones with @installed. Disable via the gear icon (global or workspace specific). Update manually or enable auto updates in settings. Uninstall by selecting Uninstall and restarting.

Recommended for beginners:

• Python (ms-python.python): Adds linting, debugging, and Jupyter support.
• Prettier (esbenp.prettier-vscode): Auto formats code.
• GitHub Copilot: AI assisted coding (requires subscription).
• Material Theme: For visual customization.

Create workspace recommendations in .vscode/extensions.json for team projects.

Integrated Terminal and Tasks

The built-in terminal lets you run commands without switching apps. Open it with ⌃`. Select shells (e.g., bash, PowerShell) from the dropdown. Split terminals or run tasks (pre defined commands) via Terminal > Run Task.

Debugging Tools

Debugging helps identify and fix issues interactively.

1. Starting a Session: Open the Run and Debug view, then press F5. VS Code auto configures for common languages.
2. Breakpoints: Click the gutter or F9 to set; make conditional via right click.
3. Inspecting: View variables in the VARIABLES pane, hover for details, or add to WATCH. Change values during pauses.
4. Debug Console: Evaluate expressions with ⇧⌘Y.
5. Configuration: Create launch.json via the gear icon for custom args or environments.

Version Control with Git

VS Code has seamless Git support.

1. Initializing/Cloning: Go to Source Control view, click Initialize Repository or Clone from a URL.
2. Committing: Stage changes (+ icon), enter a message, and commit.
3. Branching and Syncing: Create/switch branches via the Status Bar. Pull/push with the sync icon.
4. Conflicts: Highlighted in the view; resolve using the 3 way merge editor.

Settings and Customization: Fine tune via ⌘,: Adjust font size (editor.fontSize), enable ligatures, or exclude files (files.exclude). Use JSON mode for advanced edits. Install keymap extensions for Vim/Emacs familiarity.

Keyboard Shortcuts and Tips

Master shortcuts for efficiency. Here’s a table of essentials:

Additional tips: Use ⌃Tab for history navigation, enable “editor.renderWhitespace”: “all” for visibility, and compare files with ⌘K C (clipboard). For productivity, sync settings across devices and explore Walkthroughs on the Welcome page.