Visual Studio Code Setup Guide

Visual Studio Code (VSCode) is a lightweight but powerful source code editor that runs on your desktop. It comes with built-in support for JavaScript, TypeScript, and Node.js and has a rich ecosystem of extensions for other languages and tools.

Table of Contents

1. Installation
2. First Launch and Interface Overview
3. Essential Settings
4. Extensions
5. Workspace Setup
6. Keyboard Shortcuts
7. Integrated Terminal
8. Source Control Integration
9. Debugging
10. Additional Resources

Installation

Windows

1. Visit the VSCode download page
2. Click on the Windows download button
3. Run the installer (.exe file)
4. Follow the installation wizard
5. Check the options to:
   • Create a desktop icon
   • Add “Open with Code” to Windows Explorer context menu
   • Register Code as an editor for supported file types

macOS

1. Visit the VSCode download page
2. Click on the Mac download button
3. Open the downloaded .zip file
4. Drag Visual Studio Code.app to the Applications folder
5. Optional: Add VSCode to your Dock

Linux

1. Visit the VSCode download page
2. Choose the appropriate package for your distribution (.deb, .rpm, etc.)
3. For Debian/Ubuntu:

4. For Red Hat/Fedora:

First Launch and Interface Overview

When you first open VSCode, you’ll see:

1. Welcome Page: Contains quick links to common commands and recent projects
2. Activity Bar: Left sidebar with icons for different views:
   • Explorer: File browser
   • Search: Find and replace
   • Source Control: Git integration
   • Run and Debug: Debug panel
   • Extensions: Manage extensions
3. Status Bar: Bottom bar showing information about the current file and editor
4. Editor Area: Main coding area (can be split into multiple editors)
5. Panel: Bottom panel that can show terminal, output, problems, etc.

Essential Settings

Access settings by:

• Windows/Linux: File > Preferences > Settings
• macOS: Code > Preferences > Settings

Recommended settings to consider:

1. Theme:
   • File > Preferences > Color Theme (or Ctrl+K Ctrl+T)
   • Popular choices: Dark+, Light+, Monokai, Solarized
2. Font:

3. Auto Save:

4. Tab Size:

5. Formatting:

Extensions

VSCode’s power comes from its extensions. To install extensions:

1. Click the Extensions icon in the Activity Bar (or press Ctrl+Shift+X)
2. Search for extensions by name
3. Click Install

Essential extensions by category:

General

• Prettier – Code formatter: Consistent code formatting

• ESLint: JavaScript linting

• EditorConfig: Maintain consistent coding styles

Languages

• Python: Full Python support

• C/C++: C and C++ intellisense, debugging

• Java Extension Pack: Java development tools

• JavaScript (ES6) code snippets: Snippets for JavaScript

Themes

• Material Theme: Popular theme pack

• One Dark Pro: Atom’s iconic theme

Productivity

• GitLens: Supercharge Git capabilities

• Live Share: Collaborative editing

• Path Intellisense: Autocomplete filenames

Workspace Setup

A workspace in VSCode represents one or more folders that are opened in an editor window.

1. Open a folder: File > Open Folder (Ctrl+K Ctrl+O)
2. Save workspace: File > Save Workspace As…

3. Workspace settings: Create a .vscode folder in your project with:
   • settings.json: Project-specific settings
   • launch.json: Debugging configurations
   • tasks.json: Build task configurations
   • extensions.json: Recommended extensions

Example settings.json for a JavaScript project:

Keyboard Shortcuts

VSCode has many keyboard shortcuts. Here are the most essential ones:

• Ctrl+P: Quick Open, Go to File
• Ctrl+Shift+P: Show Command Palette
• Ctrl+Space: Trigger suggestion
• F12: Go to Definition
• Alt+F12: Peek Definition
• Shift+Alt+F: Format document
• F5: Start debugging
• Ctrl+`: Toggle terminal
• Ctrl+B: Toggle sidebar
• Ctrl+/: Toggle line comment
• Ctrl+K Ctrl+C: Add line comment
• Ctrl+K Ctrl+U: Remove line comment

Integrated Terminal

VSCode includes an integrated terminal:

1. Open terminal: View > Terminal
2. Multiple terminals: Click the plus icon
3. Switch terminals: Use the dropdown

Source Control Integration

VSCode has built-in Git support:

1. Initialize repository: Click the Source Control icon and “Initialize Repository”
2. Stage changes: Click the + next to modified files
3. Commit changes: Enter a message and press Ctrl+Enter
4. Push/Pull: Use the ellipsis menu (…) for additional Git commands
5. Visual diff: Click on a modified file to see changes

Debugging

Set up debugging for your project:

1. Create a launch configuration:
   • Click the Run and Debug icon
   • Click “create a launch.json file”
   • Select your environment
2. Set breakpoints: Click in the gutter next to line numbers
3. Start debugging: Press F5
4. Use debug controls: Continue, Step Over, Step Into, Step Out
5. Watch variables: Add expressions to the Watch panel

Additional Resources