vs code

Visual Studio Code (VS Code) is a free, open-source code editor developed by Microsoft. It is known for its flexibility, extensive features, and customizability, making it a popular choice among developers. This guide will provide a detailed walkthrough of VS Code, from installation to advanced features, to help you make the most of this powerful tool.

Table of Contents

  1. Installation
  2. User Interface Overview
  3. Customization
  4. Extensions
  5. Code Editing
  6. Debugging
  7. Version Control
  8. Integrated Terminal
  9. Remote Development
  10. Tips and Tricks
  11. Conclusion

Installation

Windows

  1. Visit the VS Code website.
  2. Download the installer for Windows.
  3. Run the installer and follow the prompts.
  4. Optionally, check the boxes to add VS Code to your PATH and create a desktop icon.
  5. Open VS Code from the Start menu or desktop icon.

macOS

  1. Visit the VS Code website.
  2. Download the .dmg file for macOS.
  3. Open the .dmg file and drag VS Code to the Applications folder.
  4. Open VS Code from the Applications folder.

Linux

  1. Visit the VS Code website.
  2. Download the appropriate package (.deb or .rpm) for your distribution.
  3. Install the package using your package manager.
  4. Open VS Code from your applications menu or by typing code in the terminal.

For example, on Ubuntu:

sudo apt install ./<file>.deb
Bash

User Interface Overview

Activity Bar

The Activity Bar on the left-hand side provides quick access to different views and extensions:

  • Explorer: Navigate and manage your project files.
  • Search: Perform project-wide searches.
  • Source Control: Manage your version control operations.
  • Run and Debug: Access debugging features.
  • Extensions: Discover and manage extensions.

Side Bar

The Side Bar displays different views based on the selected activity, such as file explorer, search results, or source control changes.

Editor Group

The Editor Group is the main area where you edit your code. You can open multiple files in tabs and split the editor into multiple groups to view files side by side.

Status Bar

The Status Bar at the bottom provides information about the current file, such as language mode, encoding, line/column number, and other contextual information.

Command Palette

The Command Palette (Ctrl+Shift+P or Cmd+Shift+P on macOS) provides quick access to all available commands in VS Code. Simply start typing the command you need, and the palette will filter the results.

Customization

Themes

VS Code allows you to change the look and feel of the editor with themes.

  1. Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P).
  2. Type “Preferences: Color Theme” and select it.
  3. Choose from the list of available themes. You can also install additional themes from the Extensions view.

Keybindings

You can customize keyboard shortcuts to suit your workflow.

  1. Open the Command Palette.
  2. Type “Preferences: Open Keyboard Shortcuts” and select it.
  3. Search for the command you want to rebind and click the pencil icon to change the keybinding.
  4. You can also edit the keybindings.json file for more advanced customization.

Settings

VS Code provides a user-friendly interface to configure settings, but you can also directly edit the settings.json file.

  1. Open the Command Palette.
  2. Type “Preferences: Open Settings” and select it.
  3. Adjust settings using the UI or click the {} icon in the top right to open the settings.json file for direct editing.

Common settings to configure include:

  • Font size and family
  • Tab size and type (spaces vs. tabs)
  • Auto-save behavior
  • File encoding

Extensions

Extensions extend the functionality of VS Code. They can add new features, integrate with other tools, and improve your workflow.

Installing Extensions

  1. Click on the Extensions view icon in the Activity Bar.
  2. Search for the extension you want to install.
  3. Click “Install.”

Recommended Extensions

  • Prettier: Code formatter for consistent code style.
  • ESLint: Integrates ESLint JavaScript into VS Code.
  • Python: Extension for Python development with IntelliSense, linting, and debugging support.
  • Live Server: Launches a development local server with live reload feature.
  • GitLens: Enhances the built-in Git capabilities with features like blame annotations and code lens.

Managing Extensions

You can disable or uninstall extensions from the Extensions view. Right-click on an installed extension and choose “Disable” or “Uninstall.”

Code Editing

IntelliSense

IntelliSense provides intelligent code completion, parameter info, quick info, and member lists.

  • Triggered automatically as you type or manually by pressing Ctrl+Space.

Multi-cursor Editing

Multi-cursor editing allows you to make simultaneous changes in multiple places.

  1. Press Alt (or Option on macOS) and click to place multiple cursors.
  2. You can also use Ctrl+Alt+Down (or Cmd+Option+Down on macOS) to add cursors below.
  3. Type or edit text simultaneously in all the cursor locations.

Snippets

Snippets are reusable code templates that you can insert into your code to speed up coding.

  1. Use the Command Palette to access pre-defined snippets or create your own.
  2. For example, typing for in a JavaScript file and pressing Tab will generate a for loop template.
  3. You can create custom snippets by editing the snippets file from the Command Palette.

Code Navigation

VS Code provides powerful code navigation features.

  • Go to Definition: Right-click on a symbol and select “Go to Definition” or press F12.
  • Peek Definition: Right-click on a symbol and select “Peek Definition” or press Alt+F12.
  • Find All References: Right-click on a symbol and select “Find All References” or press Shift+F12.

Debugging

Setting Up

  1. Click on the Run and Debug icon in the Activity Bar.
  2. Click “Create a launch.json file” and select the environment (Node.js, Python, etc.).
  3. Configure your debug settings in the launch.json file. This file defines how VS Code runs and debugs your application.

Using the Debugger

  1. Set breakpoints by clicking in the gutter next to the line numbers.
  2. Start debugging by pressing F5 or clicking the green play button in the Debug view.
  3. Use the debug toolbar to control execution (continue, step over, step into, step out, restart, stop).
  4. Inspect variables, evaluate expressions, and view the call stack in the Debug view.

Advanced Debugging

  • Conditional Breakpoints: Right-click on a breakpoint and set a condition for it to be hit.
  • Logpoints: Instead of stopping at a breakpoint, use logpoints to log messages to the console without stopping.

Version Control

Git Integration

VS Code has built-in support for Git, making it easy to manage your version control operations.

  1. Click on the Source Control icon in the Activity Bar.
  2. Initialize a new Git repository or clone an existing one.
  3. Use the Source Control view to stage changes, commit, push/pull, and manage branches.

Basic Commands

  • Initialize Repository: Click on “Initialize Repository” in the Source Control view.
  • Staging Changes: Click the “+” icon next to the changes you want to stage.
  • Commit Changes: Enter a commit message and click the checkmark icon to commit.
  • Push and Pull: Use the toolbar buttons to push your commits to the remote repository or pull changes from it.

GitLens Extension

GitLens enhances the built-in Git capabilities with additional features like:

  • Blame Annotations: See who changed a line of code and when.
  • Code Lens: Inline information about commits, references, and authors.
  • Repository Explorer: Navigate the history and branches of your repository.

Integrated Terminal

Opening the Terminal

  1. Press Ctrl+ (or Cmd+ on macOS) to open the integrated terminal.
  2. You can open multiple terminals and switch between them using the dropdown menu.

Customizing the Terminal

  1. Open the Command Palette.
  2. Type “Preferences: Open Settings (JSON)” and select it.
  3. Add or modify the terminal settings in the settings.json file.

Common customizations include:

  • Changing the default shell (e.g., bash, zsh, PowerShell).
  • Setting up integrated terminal profiles.
  • Configuring terminal appearance (font, color, cursor style).

Remote Development

Remote – SSH

The Remote – SSH extension allows you to develop on a remote machine over SSH.

  1. Install the Remote – SSH extension from the Extensions view.
  2. Use the Command Palette to connect to a remote SSH server (Remote-SSH: Connect to Host).
  3. Edit files and run commands on the remote server as if they were local.

Remote – Containers

The Remote – Containers extension lets you develop inside a Docker container.

  1. Install the Remote – Containers extension from the Extensions view.
  2. Use the Command Palette to open a folder in a container (Remote-Containers: Open Folder in Container).
  3. Develop inside the container with full VS Code functionality.

Remote – WSL

The Remote – WSL extension enables you to use the Windows Subsystem for Linux (WSL) for development.

  1. Install the Remote – WSL extension from the Extensions view.
  2. Use the Command Palette to open a folder in WSL (Remote-WSL: New Window).
  3. Develop using the Linux environment on Windows.

Tips and Tricks

Emmet Abbreviations

Emmet abbreviations help you write HTML and CSS faster.

  1. Type Emmet abbreviations and press Tab to expand them into code.
  2. For example, typing div.container>ul>li*5 and pressing Tab will generate:
<div class="container">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
HTML

Zen Mode

Zen Mode provides a distraction-free coding environment.

  1. Press Ctrl+K Z (or Cmd+K Z on macOS) to enter Zen Mode.
  2. All UI elements except the editor will be hidden.
  3. Press Esc twice to exit Zen Mode.

Settings Sync

Settings Sync allows you to synchronize your settings, extensions, and keybindings across multiple machines.

  1. Open the Command Palette.
  2. Type “Preferences: Turn on Settings Sync” and follow the prompts.
  3. Sign in with your Microsoft or GitHub account to enable synchronization.

Integrated Markdown Preview

VS Code provides an integrated Markdown preview to help you write and preview Markdown files.

  1. Open a Markdown file.
  2. Press Ctrl+Shift+V (or Cmd+Shift+V on macOS) to open the preview.
  3. The preview updates in real-time as you edit the file.

Conclusion

Visual Studio Code is a powerful and versatile code editor that can significantly enhance your development workflow. By taking advantage of its extensive features and customization options, you can tailor it to meet your needs and preferences. Whether a beginner or an experienced developer, this guide should help you get the most out of VS Code.

Happy coding!

Part engineer, part blogger, full geek. I bring the latest in tech and engineering to my blogs.

Similar Posts