Visual Studio Code

Complete guide to installation, configuration and essential extensions

What is Visual Studio Code?

Visual Studio Code is a source code editor developed by Microsoft. It's free, open-source and supports debugging, built-in Git version control, syntax highlighting and a huge number of extensions.

Installing Visual Studio Code

Step 1: Download VS Code

Visit the official Visual Studio Code page and download the version compatible with your operating system.

Step 2: Run the installer

Run the downloaded file and follow the installation wizard. On Windows, it's recommended to check "Add to PATH" for convenience.

Step 3: Initial configuration

When you open VS Code for the first time, select your preferred theme and configure the basic settings according to your needs.

Step 4: Install essential extensions

Go to the extensions tab (Ctrl+Shift+X) and install the recommended extensions for your development stack.

Basic Configuration

Opening VS Code from the terminal

  • On Windows: code .
  • On Mac/Linux: code .
  • To open a specific file: code archivo.php

Configuration for settings.json

Go to Settings with Ctrl+, and click the icon for "Open Settings (JSON)" in the top-right corner:

File → Preferences → Settings

Recommended configuration for web development

Example of settings.json:

{
    "editor.fontSize": 14,
    "editor.tabSize": 2,
    "editor.wordWrap": "on",
    "files.autoSave": "afterDelay",
    "emmet.includeLanguages": {
        "php": "html"
    },
    "html.format.indentInnerHtml": true,
    "css.format.enable": true,
    "php.validate.executablePath": "C:/xampp/php/php.exe"
}

Essential Extensions for Web Development

Extensions for PHP

  • PHP Intelephense - Smart autocomplete for PHP
  • PHP Debug - PHP code debugging
  • PHP Server - Built-in PHP server

Extensions for HTML/CSS

  • Live Server - Local server with automatic reload
  • Auto Rename Tag - Automatically renames HTML tags
  • CSS Peek - Quick navigation to CSS definitions

Productivity Extensions

  • GitLens - Improves Git integration
  • Prettier - Automatic code formatting
  • Bracket Pair Colorizer - Colorizes matching brackets
  • Material Icon Theme - Modern icons for the explorer

Important Keyboard Shortcuts

Navigation and Editing

Ctrl + P Quick open file
Ctrl + Shift + P Command palette
Ctrl + ` Open integrated terminal
Ctrl + B Show/hide explorer

Code Editing

Alt + ↑/↓ Move line
Ctrl + D Select next occurrence
Ctrl + / Comment/uncomment line
F12 Go to definition

Integration with XAMPP

Configure PHP in VS Code

To use XAMPP with VS Code, configure the path to the PHP executable:

On settings.json:

{
    "php.validate.executablePath": "C:/xampp/php/php.exe",
    "php.suggest.basic": true
}

Debugging with Xdebug

Configure Xdebug in XAMPP and VS Code for debugging:

Configuration for launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9000,
            "pathMappings": {
                "/var/www/html": "${workspaceFolder}"
            }
        }
    ]
}

Common Troubleshooting

Extensions don't work

If extensions don't load correctly:

  • Restart VS Code
  • Check that the extension is compatible with your version
  • Check the developer console (Ctrl+Shift+I)

Terminal won't open

If the integrated terminal doesn't work:

  • Check that your shell is configured correctly
  • On Windows, try switching between CMD, PowerShell or Git Bash
  • Restart VS Code

Autocomplete doesn't work

If IntelliSense doesn't suggest code:

Steps to fix autocomplete issues

Step 1: Check language configuration

Make sure the file has the correct extension and that VS Code recognizes the language.

In the bottom-right corner, check that it shows the correct language (PHP, JavaScript, etc.)

Step 2: Reinstall language extensions

Uninstall and reinstall the language-specific extensions:

  • For PHP: PHP Intelephense
  • For JavaScript: ES6 Snippets
  • For HTML: HTML CSS Support
Step 3: Clear cache of VS Code

Close VS Code and delete the cache folder:

On Windows:
%APPDATA%\Code\Cache
On Mac:
~/Library/Application Support/Code/Cache
Step 4: Check IntelliSense configuration

In settings.json, make sure IntelliSense is enabled:

{
    "editor.quickSuggestions": {
        "other": true,
        "comments": false,
        "strings": true
    },
    "editor.suggestOnTriggerCharacters": true,
    "editor.acceptSuggestionOnEnter": "on"
}

Recommended Workflow

1. Workspace Configuration

Create a workspace for your project and configure the specific extensions you need.

2. Using Snippets

Take advantage of the built-in snippets and create your own for repetitive code.

3. Integration with Git

Use the built-in version control to manage changes in your code.

4. Debugging

Set breakpoints and use the built-in debugger to find errors.