Lesson 5.3: Useful VS Code Extensions
Duration: 40 minutes
Learning Objectives
After completing this lesson, you will be able to:
- Understand what VS Code extensions are and why they're useful
- Install, enable, and disable extensions
- Configure essential extensions for development
- Manage extensions and keep them updated
- Know which extensions are recommended for beginners
Introduction
VS Code out of the box is already powerful, but extensions are what make it truly exceptional. Think of extensions as apps for your code editor - they add new features, support for more programming languages, and tools that make coding easier.
By the end of this lesson, you'll have a set of carefully chosen extensions that will enhance your development experience throughout this course series.
Main Content
What are Extensions?
┌─────────────────────────────────────────────────────────────┐
│ VS CODE EXTENSIONS │
│ │
│ Add-on programs that enhance VS Code with new features: │
│ │
│ ┌──────────────────┐ ┌──────────────────┐ │
│ │ Language │ │ Productivity │ │
│ │ Support │ │ Tools │ │
│ │ │ │ │ │
│ │ - TypeScript │ │ - Auto-complete │ │
│ │ - Python │ │ - Code snippets │ │
│ │ - HTML/CSS │ │ - Formatting │ │
│ └──────────────────┘ └──────────────────┘ │
│ │
│ ┌──────────────────┐ ┌──────────────────┐ │
│ │ Visual │ │ Utilities │ │
│ │ Enhancements │ │ │ │
│ │ │ │ │ │
│ │ - Themes │ │ - Git tools │ │
│ │ - Icons │ │ - Debugging │ │
│ │ - Brackets │ │ - Previews │ │
│ └──────────────────┘ └──────────────────┘ │
└─────────────────────────────────────────────────────────────┘
Finding and Installing Extensions
Method 1: Using the Extensions Sidebar
- Click the Extensions icon in the Activity Bar (or press
Ctrl + Shift + X) - Use the search bar to find extensions
- Click an extension to see its details
- Click "Install" to add it
Method 2: Using the Command Palette
- Press
Ctrl + Shift + P(orCmd + Shift + Pon macOS) - Type "Extensions: Install Extensions"
- Search and install
Method 3: Using the Terminal
code --install-extension extension-id
Essential Extensions for This Course
Let's install the extensions you'll need for learning TypeScript and building AI applications.
1. ESLint
What it does: Analyzes your code for potential errors and style issues.
┌─────────────────────────────────────────────────────────────┐
│ Extension: ESLint │
│ Publisher: Microsoft │
│ ID: dbaeumer.vscode-eslint │
│ │
│ Why you need it: │
│ - Catches bugs before you run your code │
│ - Enforces consistent code style │
│ - Shows errors with red underlines │
│ - Suggests fixes automatically │
└─────────────────────────────────────────────────────────────┘
Install via terminal:
code --install-extension dbaeumer.vscode-eslint
2. Prettier - Code Formatter
What it does: Automatically formats your code to look clean and consistent.
┌─────────────────────────────────────────────────────────────┐
│ Extension: Prettier - Code formatter │
│ Publisher: Prettier │
│ ID: esbenp.prettier-vscode │
│ │
│ Before Prettier: After Prettier: │
│ ┌─────────────────────┐ ┌─────────────────────┐ │
│ │const x={a:1,b:2} │ → │const x = { │ │
│ │function foo(){ │ │ a: 1, │ │
│ │return x} │ │ b: 2 │ │
│ └─────────────────────┘ │}; │ │
│ │ │ │
│ │function foo() { │ │
│ │ return x; │ │
│ │} │ │
│ └─────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
Install via terminal:
code --install-extension esbenp.prettier-vscode
Configure as default formatter:
- Open Settings (
Ctrl + ,) - Search for "default formatter"
- Set "Editor: Default Formatter" to "Prettier - Code formatter"
- Search for "format on save"
- Check "Editor: Format On Save"
Now your code will be automatically formatted every time you save!
3. Error Lens
What it does: Shows errors and warnings inline, right where they occur.
┌─────────────────────────────────────────────────────────────┐
│ Extension: Error Lens │
│ Publisher: Alexander │
│ ID: usernamehw.errorlens │
│ │
│ Without Error Lens: With Error Lens: │
│ ┌─────────────────────┐ ┌─────────────────────────────┐
│ │const x: number = "a"│ │const x: number = "a" ❌ │
│ │ ~~~~~~ │ │ Type 'string' not assignable│
│ │ │ │ to type 'number' │
│ │(hover to see error) │ │ │
│ └─────────────────────┘ └─────────────────────────────┘
└─────────────────────────────────────────────────────────────┘
Install via terminal:
code --install-extension usernamehw.errorlens
4. GitLens
What it does: Supercharges VS Code's built-in Git capabilities.
┌─────────────────────────────────────────────────────────────┐
│ Extension: GitLens │
│ Publisher: GitKraken │
│ ID: eamodio.gitlens │
│ │
│ Features: │
│ - See who changed each line of code (git blame) │
│ - View file history │
│ - Compare branches │
│ - Navigate through changes │
└─────────────────────────────────────────────────────────────┘
Install via terminal:
code --install-extension eamodio.gitlens
5. Material Icon Theme
What it does: Adds beautiful icons to files and folders in the Explorer.
┌─────────────────────────────────────────────────────────────┐
│ Extension: Material Icon Theme │
│ Publisher: Philipp Kief │
│ ID: pkief.material-icon-theme │
│ │
│ Default icons: Material icons: │
│ ┌─────────────────┐ ┌─────────────────┐ │
│ │ 📄 index.ts │ │ 🔷 index.ts │ │
│ │ 📄 styles.css │ │ 🎨 styles.css │ │
│ │ 📄 package.json │ │ 📦 package.json │ │
│ │ 📁 src │ │ 📂 src │ │
│ └─────────────────┘ └─────────────────┘ │
└─────────────────────────────────────────────────────────────┘
Install via terminal:
code --install-extension pkief.material-icon-theme
Activate: After installing, VS Code will prompt you to activate it. Or press Ctrl + Shift + P → "Preferences: File Icon Theme" → "Material Icon Theme".
6. Path Intellisense
What it does: Autocompletes file paths as you type.
┌─────────────────────────────────────────────────────────────┐
│ Extension: Path Intellisense │
│ Publisher: Christian Kohler │
│ ID: christian-kohler.path-intellisense │
│ │
│ When you type: │
│ import { something } from "./ │
│ ↓ │
│ ┌──────────────┐ │
│ │ 📁 components│ │
│ │ 📁 utils │ │
│ │ 📄 index.ts │ │
│ └──────────────┘ │
└─────────────────────────────────────────────────────────────┘
Install via terminal:
code --install-extension christian-kohler.path-intellisense
7. Auto Rename Tag
What it does: Automatically renames paired HTML/XML tags.
┌─────────────────────────────────────────────────────────────┐
│ Extension: Auto Rename Tag │
│ Publisher: Jun Han │
│ ID: formulahendry.auto-rename-tag │
│ │
│ Change opening tag: Closing tag updates: │
│ ┌─────────────────┐ ┌─────────────────┐ │
│ │ <div> │ → │ <section> │ │
│ │ content │ │ content │ │
│ │ </div> │ │ </section> │ ← auto! │
│ └─────────────────┘ └─────────────────┘ │
└─────────────────────────────────────────────────────────────┘
Install via terminal:
code --install-extension formulahendry.auto-rename-tag
8. Code Spell Checker
What it does: Catches spelling mistakes in your code and comments.
┌─────────────────────────────────────────────────────────────┐
│ Extension: Code Spell Checker │
│ Publisher: Street Side Software │
│ ID: streetsidesoftware.code-spell-checker │
│ │
│ // Functon to calculat the totla │
│ ~~~~~~ ~~~~~~ ~~~~ │
│ Unknown word Unknown Unknown │
│ │
│ Prevents embarrassing typos in variable names! │
└─────────────────────────────────────────────────────────────┘
Install via terminal:
code --install-extension streetsidesoftware.code-spell-checker
Quick Install Command
You can install all essential extensions at once with this command:
code --install-extension dbaeumer.vscode-eslint && \
code --install-extension esbenp.prettier-vscode && \
code --install-extension usernamehw.errorlens && \
code --install-extension eamodio.gitlens && \
code --install-extension pkief.material-icon-theme && \
code --install-extension christian-kohler.path-intellisense && \
code --install-extension formulahendry.auto-rename-tag && \
code --install-extension streetsidesoftware.code-spell-checker
Managing Extensions
View Installed Extensions
- Open Extensions sidebar (
Ctrl + Shift + X) - Click the filter icon (funnel) and select "Installed"
- Or type
@installedin the search bar
Disable an Extension
Sometimes you might want to disable an extension without uninstalling it:
- Find the extension in your installed list
- Click the gear icon → "Disable"
- Choose "Disable" (everywhere) or "Disable (Workspace)"
Uninstall an Extension
- Find the extension
- Click "Uninstall"
- Reload VS Code if prompted
Update Extensions
Extensions update automatically, but you can manually check:
- Open Extensions sidebar
- Click the "..." menu → "Check for Extension Updates"
- Or type
@updatesin the search bar
Recommended Settings for Extensions
Add these settings to your VS Code settings for the best experience. Open settings with Ctrl + ,, then click the "Open Settings (JSON)" icon in the top right.
{
// Prettier settings
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"prettier.singleQuote": true,
"prettier.semi": true,
// ESLint settings
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
// Error Lens settings
"errorLens.enabledDiagnosticLevels": ["error", "warning"],
// Editor settings
"editor.tabSize": 2,
"editor.wordWrap": "on",
"editor.minimap.enabled": true,
// File settings
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000
}
Troubleshooting
Extension Not Working
- Check if it's enabled: Go to Extensions → find it → make sure it says "Disable" (meaning it's currently enabled)
- Reload VS Code:
Ctrl + Shift + P→ "Developer: Reload Window" - Check the Output panel: View → Output → select the extension from the dropdown
- Check extension requirements: Some extensions need additional software installed
Extensions Slowing Down VS Code
- Disable unused extensions: Only keep what you actively use
- Check startup time:
Ctrl + Shift + P→ "Developer: Show Running Extensions" - Try workspace-specific extensions: Enable heavy extensions only for projects that need them
Extension Conflicts
If two extensions seem to fight each other:
- Disable one of them
- Check their settings for overlap
- Look for extension documentation about known conflicts
Prettier Not Formatting
- Make sure it's set as the default formatter
- Check if the file type is supported
- Look for a
.prettierrcorprettier.config.jsfile that might have conflicting settings - Check the Output panel for Prettier errors
Practice Exercise
Exercise 1: Install the Essential Extensions
Install each of these extensions and verify they're working:
- ESLint - check for the ESLint indicator in the status bar
- Prettier - create a
.jsfile, write messy code, save, and watch it format - Error Lens - write
const x: number = "hello"in a.tsfile and see the inline error - Material Icon Theme - check if file icons changed
- GitLens - look for author annotations in any file
Exercise 2: Configure Prettier
- Open VS Code Settings (
Ctrl + ,) - Search for "prettier"
- Try changing these settings and save a JavaScript file to see the effect:
- Single Quote: true/false
- Tab Width: 2/4
- Semi: true/false
Exercise 3: Explore the Extensions Marketplace
- Open the Extensions sidebar
- Browse the "Popular" and "Recommended" sections
- Find and read about one extension that interests you
- Note: Don't install too many extensions - quality over quantity!
Exercise 4: Create a Settings Profile
- Press
Ctrl + Shift + P - Type "Profiles: Create Profile"
- Name it "TypeScript Development"
- This saves your current extensions and settings
Key Takeaways
- Extensions add powerful features to VS Code without bloating the core editor
- Install extensions from the Extensions sidebar (
Ctrl + Shift + X) or via terminal - Essential extensions for this course: ESLint, Prettier, Error Lens, GitLens, Material Icon Theme
- Prettier + Format on Save keeps your code clean automatically
- Error Lens shows errors inline - no more hovering!
- Don't install too many extensions - they can slow down VS Code
- Manage extensions by disabling, uninstalling, or configuring them
- Use settings.json for advanced configuration
Resources
| Resource | Type | Difficulty |
|---|---|---|
| VS Code Extension Marketplace | Marketplace | Beginner |
| Prettier Documentation | Documentation | Beginner |
| ESLint User Guide | Documentation | Beginner |
| VS Code Extension API | Documentation | Advanced |
| Awesome VS Code | Repository | Intermediate |