Getting started with Visual Studio Code: A Beginner's Guide

Hello everyone, welcome to our Visual Studio Code beginner’s guide that will take you through the essentials of getting started with this powerful editor. We’ll cover how to install Visual Studio Code, familiarize you with its user-friendly interface, and introduce some of its most useful features and extensions. Whether you’re coding for the first time or looking to switch to a more efficient tool, this guide is designed to help you navigate Visual Studio Code with ease.

Table of Contents

What is Visual Studio Code?

Visual Studio Code, often abbreviated as VS Code, is a free, open-source code editor developed by Microsoft. It’s designed to provide developers with a streamlined, efficient coding environment for a wide array of programming languages. VS Code stands out for its lightweight nature, yet it packs a powerful punch in terms of functionality, offering a versatile platform that supports code editing, debugging, and version control. This editor is favored by professionals and beginners alike for its user-friendly interface and its ability to enhance productivity through a rich ecosystem of extensions.

Visual Studio Code aims to simplify the development process, making it more accessible and less time-consuming. It achieves this by integrating seamlessly with various tools and services including Copilot Chat(my personal favorite and something I think should be installed by default these days), from Git for version control to a ton of extensions that expand its capabilities far beyond basic text editing. Its cross-platform compatibility means it runs smoothly on Windows, macOS, and Linux.

Visual Studio Code Features:

Code Actions on Save and Auto: This feature allows for automatic execution of code actions upon saving or when auto-save triggers, enhancing code quality and consistency without manual intervention.
Multi Document Highlighting: Expands the ability to highlight occurrences across multiple files, improving navigation and understanding of code relationships, especially for languages like TypeScript.
IntelliSense: Offers smart completions based on variable types, function definitions, and imported modules. This feature enhances coding efficiency by providing relevant suggestions as you type, helping to minimize errors and learn about the codebase faster.
Live Share: Facilitates real-time collaboration directly within VS Code, allowing multiple users to edit, debug, and interact with the same codebase simultaneously without syncing code or configuring identical development environments.
Sticky Scroll in Terminal: Enhances readability by keeping the command prompt at the top of the terminal viewport, making it easier to track command outputs.
Shell Integration and Command Navigation Improvements: Offers more reliable command navigation and prompt detection in the terminal, streamlining command history exploration.
Custom Title Bar Support: Introduces settings for customizing the title bar, even when using the native title bar, providing flexibility in UI layout and access to command center and activity bar actions.
Support for System Color Theme: Allows overriding the system color theme for native elements within VS Code, offering more control over the visual appearance of the editor.
Toggle Word Wrap in Output Panel: Facilitates easier viewing of long lines of text in the Output panel by enabling word wrap toggling.
Floating Editor Windows: A significant UI enhancement that allows dragging and dropping editor windows onto the desktop for a more flexible workspace arrangement.
Accessible View Workflow: Smoother transitions to and from Accessible View, making VS Code more user-friendly for developers relying on accessibility feature.

Where to download Visual Studio Code

Visual Studio Code is open-source and it is free to use for whatever projects you want, you can download it from our dedicated page below.

Download Visual Studio Code

Basic Configuration in Visual Studio Code

Step 1: Accessing Settings

Via UI: Open VS Code, then click on the gear icon in the lower left corner to open the Settings menu. Choose “Settings” to open the graphical user interface for settings.
Via Command Palette: Press Ctrl+Shift+P (or Cmd+Shift+P on macOS) to open the Command Palette. Type “Open Settings” and select “Preferences: Open Settings (UI)” to use the graphical interface, or select “Preferences: Open Settings (JSON)” to directly edit the settings JSON file.

Step 2: User and Workspace Settings

User Settings: These are global settings that apply to any instance of VS Code you open.
Workspace Settings: These settings are specific to the project you are currently working on. They override User Settings for the workspace.

Step 3: Editing Settings

UI Method: In the Settings tab, you can browse or search for specific settings. You’ll see a split view with default settings on the left and your custom settings on the right. To change a setting, simply find it and modify it directly in the GUI. For workspace settings, make sure you have your workspace open and are in the “Workspace” tab within settings.
JSON Method: If you prefer editing the JSON file directly, upon opening the settings JSON, you can add or modify key-value pairs. For example, to change the theme, add "workbench.colorTheme": "Your Theme Name".

Step 4: Common Settings to Configure

Theme: Customize the look of your editor by setting "workbench.colorTheme" for the theme and "workbench.iconTheme" for the file icons.
Font Size and Family: Adjust "editor.fontSize" and "editor.fontFamily" to change the appearance of the text in the editor.
Auto Save: Enable auto-saving of your files by setting "files.autoSave" to "afterDelay" (to save files after a delay), "onFocusChange" (to save when the editor loses focus), or "onWindowChange" (to save when the window loses focus).
Tab Size and Spaces: Control tab behavior with "editor.tabSize" (to set the number of spaces for a tab) and "editor.insertSpaces" (to insert spaces instead of tabs).

Step 5: Applying and Saving Settings

UI Method: Changes are saved automatically as you make them in the UI.
JSON Method: After editing the JSON file, save it with Ctrl+S or Cmd+S on macOS.

Step 6: Discover and Experiment

Explore other settings like "files.exclude" to hide files and folders from the explorer, or "editor.codeActionsOnSave" to format code or organize imports on save.
Use the search bar in the Settings tab to find settings related to specific features or languages.

Step 7: Managing Settings Across Machines

Consider using the Settings Sync feature (accessible from the gear icon menu) to synchronize your VS Code settings, extensions, and keybindings across multiple installations.

This basic configuration guide covers the essentials to get you started with a personalized setup in Visual Studio Code, we will add more in depth guides so stay tuned.

Visual Studio Code Screenshots

Visual Studio Code Video

Recommended Visual Studio Code Books:

Visual Studio Code Resources:

I also happen to have a couple of my favorite Visual Studio Code Extensions that add new features, code and options to your VS Code installation by simply clicking install, yes, it’s that easy. Below are just a few of my favorites that I am using right now. You can get tons more extensions at the Visual Studio Code Marketplace.

Post Views: 4,728