Essential Tips and Tricks

{Mastering Visual Studio Code}

1

What is VSCode?

3

VSC Interface Overview

5

Keyboard Shortcuts

Summary

2

Why VS Code?

4

Essential Extensions

6

Customize Your VSCode

# What is VS Code?

1. What is

    VS Code?

Visual Studio Code

Visual Studio Code (VS Code) is a free, lightweight, and powerful code editor developed by Microsoft. It supports multiple programming languages, offers features like debugging, version control, and extensions, making it popular among developers for building and managing code efficiently.

# What is VS Code?
# Why VS Code?

2. Why

    VS Code?

VSC Advantages !

VS Code is designed to be quick and responsive, even with large codebases.

1.Lightweight and Fast

It works on Windows, macOS, and Linux, so you can use it across different systems.

2.Cross-Platform

It has Git commands and tools integrated, making it easy to manage version control without leaving the editor.

3.Built-in Git Integration

The extensive marketplace lets you add features like language support, themes, and tools for debugging, testing, and more.

4.Powerful Extensions

# Why VS Code?

VSC Advantages !

You can personalize your workspace with themes, keyboard shortcuts, and extensions to suit your workflow.

5.Customizable

The popularity of VS Code means there’s a wealth of resources, extensions, and community support for troubleshooting and learning.

6. Community Support

# Why VS Code?
# VSC Interface Overview

3. VSC Interface Overview

1. Activity Bar

Located on the far left, the Activity Bar provides quick access to core features, including:

  • Explorer: Shows your file structure and open files.
  • Search: Allows you to search across your entire project.
  • Source Control: Manages Git repositories and tracks file changes.
  • Debugging: Runs and manages your code debugging.
  • Extensions: Adds new tools and language support.
# VSC Interface Overview

2. Side Bar

Next to the Activity Bar, the Side Bar displays details about the selected Activity. For instance, the Explorer shows your folder and file structure here. It’s customizable and expands based on the activity selected.

# VSC Interface Overview

3. Editor Area

The large central area where you write and view your code. You can open multiple files in tabs and split the view to see files side-by-side.

# VSC Interface Overview

4. Status Bar

Located at the bottom, the Status Bar provides key information, such as:

  • The current Git branch.
  • Active programming language and file format.
  • Errors and warnings.
  • Encoding and line-ending information. You can click on these elements for additional options or settings.
# VSC Interface Overview

5. Command Palette

Use Ctrl+Shift+P (or Cmd+Shift+P on macOS) to open the Command Palette. This tool gives you access to nearly every command or function in VS Code, making it a powerful shortcut for navigating and running commands without leaving the keyboard.

# VSC Interface Overview

6. Minimap

A small overview on the right side of the Editor Area, the Minimap lets you quickly scroll through long files and see a miniature view of your code structure.

# VSC Interface Overview

7. Terminal Panel

Located at the bottom, the Terminal Panel gives you access to an integrated terminal, so you can run command-line tasks without switching between windows. It also includes tabs for output, problems, and debug console.

# VSC Interface Overview
# Essential Extensions

4.Essential Extensions

# Essential Extensions

  • Prettier: Auto-formats code for consistent styling.

  • Material Icon Theme: Customize file icons for an intuitive, visual representation of file types.

# Essential Extensions

  • Auto Rename Tag: Automatically rename paired HTML/XML tag.

  • GitLens: Simplifies Git history and tracking changes.

# Essential Extensions

  • Path Intellisense: Autocompletes file paths.

  • Live Server: Automatically refreshes the browser upon file save.

# Essential Extensions

  • ESLint: Helps identify errors and coding inconsistencies.

# Keyboard Shortcuts​

5.Keyboard Shortcuts

Basic Editing

  • New File: Ctrl + N (Cmd + N on macOS)
  • Save: Ctrl + S (Cmd + S)
  • Undo: Ctrl + Z (Cmd + Z)
  • Redo: Ctrl + Y (Cmd + Y)
  • Find: Ctrl + F (Cmd + F)
  • Find and Replace: Ctrl + Shift + F (Cmd + Shift + F)

Navigation

# Keyboard Shortcuts​
  • Quick Open: Ctrl + P (Cmd + P)
  • Open Command Palette: Ctrl + Shift + P (Cmd + Shift + P)
  • Switch Between Tabs: Ctrl + Tab (Cmd + Tab)

Layout Management

Line and Code Manipulation

# Keyboard Shortcuts​
  • Toggle Sidebar: Ctrl + B
  • Toggle Terminal: Ctrl + J
  • Duplicate Line: Shift + Alt + Down Arrow (Shift + Option + Down Arrow on macOS)
  • Move Line Up/Down: Alt + Up/Down (Option + Up/Down)
  • Comment Line: Ctrl + / (Cmd + / on macOS)
  • Toggle Block Comment: Shift + Alt + A (Shift + Option + A on macOS)

Multi-Cursor and Selection

  • Multi-cursor Selection: Alt + Click (Option + Click on macOS)
  • Select All Occurrences of Word: Ctrl + Shift + L (Cmd + Shift + L)

Formatting

# Keyboard Shortcuts​
  • Format Document: Shift + Alt + F (Shift + Option + F on macOS)
# Customize Your VSCode

6. Customize Your VSCode

# Customize Your VSCode

 Themes

  • Setting Up: Go to File > Preferences > Color Theme (or Cmd + K Cmd + T on macOS) to browse and apply themes. 

Custom Font and Font Ligatures

  • Change the Font: Under File > Preferences > Settings, search for Font Family to set a custom font.

Mastering Visual Studio Code ENDS

Made with Slides.com