Installing VS Code: Step-by-Step Guide

Learn how to install and set up Visual Studio Code for HTML development. Essential setup for web development.

Introduction

Visual Studio Code (VS Code) is the most popular code editor for web development. Let's install and configure it!

What You Will Learn

  • Downloading and installing VS Code
  • Basic setup and configuration
  • Essential extensions for HTML
  • Customizing VS Code

Why VS Code?

✅ Free and open source ✅ Cross-platform (Windows, macOS, Linux) ✅ Fast and lightweight ✅ Great extensions ecosystem ✅ Built-in Git support ✅ Integrated terminal ✅ Smart code completion

Step 1: Download VS Code

  1. Go to code.visualstudio.com
  2. Click the download button for your OS
  3. Wait for download to complete

Step 2: Install VS Code

Windows

  1. Run the downloaded .exe file
  2. Follow the installation wizard
  3. Check "Add to PATH" (important!)
  4. Click Install
  5. Launch VS Code

macOS

  1. Open the downloaded .zip file
  2. Drag "Visual Studio Code" to Applications
  3. Open VS Code from Applications

Linux

# Debian/Ubuntu
sudo apt install ./code_*.deb

# Fedora/RHEL
sudo dnf install ./code_*.rpm

# Or use snap
sudo snap install --classic code

Step 3: Essential Extensions

Install these must-have extensions for HTML development:

1. Prettier - Code Formatter

  • Automatically formats your code
  • Keeps code clean and consistent

2. ESLint

  • Finds and fixes JavaScript problems
  • Helps write better code

3. Live Server

  • Launches a local development server
  • Live reload as you edit

4. Auto Rename Tag

  • Automatically renames paired HTML tags
  • Saves time and prevents bugs

5. HTML Snippets

  • Provides HTML snippets and shortcuts
  • Speed up coding

6. CSS Peek

  • Peek at CSS definitions from HTML
  • Jump to CSS quickly

7. Path Intellisense

  • Autocompletes file paths
  • Prevents typos

How to Install Extensions

  1. Open VS Code
  2. Click Extensions icon on left sidebar (or Ctrl+Shift+X)
  3. Search for extension name
  4. Click "Install"

Step 4: Basic Configuration

Settings

Open settings with Ctrl+, or Cmd+,

Recommended settings:

{
    "editor.tabSize": 2,
    "editor.wordWrap": "on",
    "editor.formatOnSave": true,
    "files.autoSave": "afterDelay",
    "prettier.singleQuote": true
}

Key Shortcuts

| Shortcut | Action | |----------|--------| | Ctrl+P | Quick Open File | | Ctrl+Shift+P | Command Palette | | Ctrl+/ | Toggle Comment | | Ctrl+S | Save | | Ctrl+Z | Undo | | Ctrl+Shift+Z | Redo | | Ctrl+F | Find | | Ctrl+H | Replace | | Ctrl+B | Toggle Sidebar | | Ctrl+ ` | Toggle Terminal |

Step 5: Create Your First Project

  1. Open VS Code
  2. File → Open Folder
  3. Create a new folder "html-project"
  4. Select it
  5. Create a new file index.html

Workspace Setup

html-project/
├── index.html
├── css/
│   └── styles.css
├── js/
│   └── script.js
└── images/
    └── logo.png

Using Live Server

  1. Right-click index.html
  2. Select "Open with Live Server"
  3. Your browser opens with the page
  4. Edit and save - page reloads automatically!

Customizing VS Code

Themes

  1. File → Preferences → Color Theme
  2. Choose a theme (Dark+ is popular)

Icons

Install "Material Icon Theme" extension for nice file icons.

Font

Change font in settings:

{
    "editor.fontFamily": "Fira Code, Consolas, 'Courier New', monospace",
    "editor.fontSize": 14
}

Best Practices

  • Use keyboard shortcuts to work faster
  • Save files often
  • Use Git for version control
  • Keep your extensions updated
  • Customize for your workflow

Common Issues

"Code command not found" in terminal

  • On Mac: Open VS Code → Cmd+Shift+P → "Shell Command: Install 'code' command"
  • On Windows: Make sure "Add to PATH" was checked during installation

Extensions not working

  • Restart VS Code
  • Check extension documentation
  • Disable other extensions to find conflicts

FAQs

Q: Is VS Code free? A: Yes, completely free and open source!

Q: Can I use VS Code for other languages? A: Yes! It supports almost every programming language.

Q: Do I need extensions for HTML? A: No, but they make development much easier!

Related Topics

  • Browser Developer Tools
  • First HTML Program

Summary

VS Code is an excellent code editor for HTML development. Install it, add essential extensions, and customize for your workflow!

Next Topic

Let's learn about Browser Developer Tools.

← Back to Syllabus