Visual Studio Code (VS Code) – Step-by-Step Guide

1. What is VS Code?

VS Code is a free, lightweight, and powerful source code editor developed by Microsoft. It supports multiple programming languages, extensions, Git integration, debugging, and more.

2. Installing VS Code

Download from https://code.visualstudio.com

Choose your OS: Windows, macOS, or Linux
Run the installer and follow the setup steps

3. Opening a Project

To open a folder or project:

Click on File → Open Folder
Select the directory containing your project
Use the integrated file explorer on the left

4. Creating a File

Right-click inside the Explorer and select New File. Name the file and begin typing your code.

5. Changing Themes

VS Code supports various themes for a better coding experience.

Go to View → Command Palette (or press Ctrl+Shift+P)
Type Color Theme and choose your preferred theme

6. Installing Extensions

Extensions add support for languages, themes, debuggers, linters, and frameworks.

Click the Extensions icon on the sidebar
Search and install: Python, JavaScript, Prettier, Live Server, etc.

7. Integrated Terminal

Access a terminal directly inside VS Code.


            View → Terminal (or Ctrl + `)

            # Use it like a normal command-line interface

8. Split Editor

Open files side-by-side using the split editor.

Right-click a tab → Split Right or drag it to the side
Useful for comparing files or working on multiple files at once

9. Auto Save

Automatically saves your file when changes are made.

Go to File → Auto Save
You can also configure auto save delay in settings

10. IntelliSense

VS Code provides intelligent code completion and suggestions.

Type a few characters and press Ctrl+Space to see suggestions
Works with languages like JavaScript, Python, C++, etc.

VS Code Features and Configuration

11. Git Integration

VS Code has built-in support for Git version control.

Click the Source Control icon in the sidebar
It auto-detects Git repos and shows changes
Use buttons to stage, commit, and push changes

12. Debugging

Debug your code directly in the editor.

Click the Run and Debug icon or press F5
Choose your environment (Node.js, Python, etc.)
Set breakpoints, step through code, and inspect variables

13. Settings and Customization

Configure VS Code behavior using settings.

Go to File → Preferences → Settings or press Ctrl+,
You can search and update settings like font size, auto save, tab size, etc.

14. Settings.json (Advanced Configuration)

For fine-grained control, use settings.json.

Open Command Palette → Preferences: Open Settings (JSON)
Edit values directly in JSON format


            {

            "editor.fontSize": 16,

            "editor.tabSize": 2

            }

15. Workspace Settings

Workspace-specific settings override user settings for a particular project.

Open a folder → Click Manage → Workspace Settings
Settings saved in .vscode/settings.json inside the folder

16. File Explorer Navigation

Quick navigation and file actions using the explorer.

Use the sidebar to browse and manage files
Right-click for options: Rename, Delete, Duplicate, etc.

17. Minimap

A code preview on the right side of the editor.

Helps scroll through large files
Can be turned off in settings: "editor.minimap.enabled": false

18. Zen Mode

Distraction-free coding environment that hides UI elements.

Open with View → Appearance → Zen Mode or Ctrl+K Z
Use Esc Esc to exit

19. Emmet Support

Write HTML and CSS faster using Emmet abbreviations.


            Type: ul>li*5 and press Tab

            Output: <ul><li></li>...</ul>

20. Format Document

Automatically formats your code according to rules.

Right-click → Format Document or press Shift+Alt+F
Install formatters like Prettier or ESLint for better results

VS Code Advanced Tools and Productivity

21. Live Server Extension

Used for real-time preview of HTML/CSS/JS changes in the browser.

Install Live Server from the Extensions tab
Right-click on an HTML file → Open with Live Server
The browser auto-refreshes on file save

22. Code Snippets

Snippets are reusable code templates you can insert quickly.

Go to File → Preferences → User Snippets
Select a language or global snippets
Define patterns and bodies of code to expand


            "Print to console": {

            "prefix": "log",

            "body": ["console.log('$1');"],

            "description": "Log output to console"

            }

23. Multi-Cursor Editing

Allows editing multiple lines at once.

Hold Alt (Windows/Linux) or Option (Mac) and click in multiple places
Or use Ctrl + Alt + ↓ / ↑ to add cursors

24. Extensions to Boost Productivity

Prettier – Code formatter
ESLint – JavaScript linter
Live Share – Real-time collaboration
Bracket Pair Colorizer – Highlights matching brackets
Path Intellisense – Autocomplete for file paths

25. Remote Development

Work on remote servers or containers from VS Code.

Install the Remote – SSH extension
Connect to a remote machine via SSH
You can also use Remote – Containers or Codespaces

26. Workspace Trust

Security feature that controls what code can run in a project folder.

When you open a folder, VS Code asks whether to trust it
Trusted folders allow tasks, extensions, and scripts to execute

27. Outline View

Shows a tree structure of your current file’s contents (functions, classes, etc.).

Located in the Explorer sidebar
Helps with navigating large files

28. Peek and Go to Definition

Quickly see or jump to a function/variable’s definition.

Right-click → Peek Definition or press Alt+F12
F12 to go directly to the definition

29. Keyboard Shortcuts

Use shortcuts to speed up development:

Ctrl+P: Quick file open
Ctrl+Shift+P: Open Command Palette
Ctrl+Shift+F: Search across files
Alt+Shift+F: Format document

30. Portable Mode

Run VS Code from a USB drive with user settings and extensions included.

Download VS Code ZIP version (not installer)
Create a data folder inside the extracted folder
Run Code.exe — all data stays in that folder

Visual Studio Code Reference Links

1. Official VS Code Documentation

Comprehensive and up-to-date guides on every feature of VS Code including debugging, settings, Git, and extensions.

https://code.visualstudio.com/docs

2. VS Code API Documentation

If you want to build custom extensions or integrate with VS Code, this API documentation is for you.

https://code.visualstudio.com/api

3. Extension Marketplace

Search and explore thousands of official and community-made extensions for every development need.

https://marketplace.visualstudio.com/vscode

4. VS Code GitHub Repository

The open-source code base of VS Code is hosted on GitHub.

https://github.com/microsoft/vscode

5. VS Code Tips & Tricks

A great guide with tips, shortcuts, and productivity tricks directly from the creators.

https://github.com/microsoft/vscode-tips-and-tricks

6. VS Code YouTube Channel

Watch tutorials, feature demos, and live sessions by the official VS Code team.

https://www.youtube.com/c/Code

7. Awesome VS Code (Community Resource)

A curated list of extensions, themes, tools, and resources for VS Code maintained by the community.

https://github.com/viatsko/awesome-vscode

VS CODE

Visual Studio Code (VS Code) – Step-by-Step Guide

VS Code Features and Configuration

VS Code Advanced Tools and Productivity

Visual Studio Code Reference Links