vscode.rst

VS Code Setup Guide

This guide covers setting up Visual Studio Code for Nextcloud development.

Note

VS Code is one of several IDEs you can use for Nextcloud development. Other popular choices include PhpStorm and Vim.

DevContainer (Recommended)

The Nextcloud documentation and server repositories include VS Code DevContainer configurations for a consistent development environment.

Using DevContainer locally

1. Install Docker Desktop
2. Install the Dev Containers extension in VS Code
3. Open the repository folder in VS Code
4. When prompted, click "Reopen in Container" or use the command palette (F1) and select Dev Containers: Reopen in Container

The DevContainer will automatically:

• Set up the required runtime environment
• Install necessary dependencies
• Configure recommended VS Code extensions

Using GitHub Codespaces

You can also use GitHub Codespaces for cloud-based development:

1. Navigate to the repository on GitHub
2. Click the green "Code" button
3. Select the "Codespaces" tab
4. Click "Create codespace on main"

For more details, see the VS Code DevContainers documentation.

Recommended Extensions

PHP Development

For Nextcloud server and app development:

• PHP Intelephense - PHP code intelligence
• PHP Debug - Xdebug debugging support
• PHP DocBlocker - DocBlock generation
• PHPStan - Static analysis

JavaScript/TypeScript Development

For frontend development:

• ESLint - JavaScript linting
• Vue - Official - Vue.js language support
• Prettier - Code formatting

Documentation

For working with Nextcloud documentation:

• reStructuredText - RST language support
• PDF Viewer - Preview PDF files

Problem Panel Integration

These extensions report errors and warnings directly in VS Code's Problems panel (Ctrl+Shift+M):

PHP:

• PHP Intelephense - Syntax errors, undefined variables, type mismatches
• PHPStan - Static analysis errors
• PHP CS Fixer - Code style violations

JavaScript/TypeScript:

• ESLint - Linting errors and warnings
• TypeScript - Type checking errors
• Error Lens - Shows errors inline in the editor

PowerShell (for Windows scripts):

• PowerShell - Includes PSScriptAnalyzer for linting

General:

• Error Lens - Highlights errors/warnings inline
• Problems Tab Highlighter - Enhanced problem highlighting

Workspace Settings

Create a .vscode/settings.json file in your project with recommended settings:

{
    "php.validate.executablePath": "/usr/bin/php",
    "intelephense.environment.phpVersion": "8.1",
    "editor.formatOnSave": true,
    "files.trimTrailingWhitespace": true,
    "files.insertFinalNewline": true
}

Debugging with Xdebug

To set up PHP debugging:

1. Install the PHP Debug extension
2. Configure Xdebug in your PHP installation
3. Create a .vscode/launch.json file:

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

4. Set breakpoints in your code
5. Start the debugger with F5

For more information on Xdebug configuration, see the Xdebug documentation.

Related Resources

• :ref:`devenv` - Development environment setup without Docker
• VS Code DevContainers - Official documentation
• Nextcloud development tutorial - Docker-based setup tutorial