diff --git a/developer_manual/getting_started/devenv.rst b/developer_manual/getting_started/devenv.rst index 7d9fb281efc..53c1349f22e 100644 --- a/developer_manual/getting_started/devenv.rst +++ b/developer_manual/getting_started/devenv.rst @@ -6,7 +6,10 @@ Development environment ======================= -We have a tutorial available on setting up your development environment using docker. You can find the tutorial `here `_. We recommend you to follow that tutorial. +We have a tutorial available on setting up your development environment using docker. You can find the tutorial `here `_. We recommend you to follow that tutorial. + +.. tip:: + If you use VS Code as your IDE, check out the :ref:`vscode` guide for recommended extensions, DevContainer setup, and debugging configuration. This page describes how to set up your development environment without docker. diff --git a/developer_manual/getting_started/index.rst b/developer_manual/getting_started/index.rst index 77443589ac4..be86ba8dec0 100644 --- a/developer_manual/getting_started/index.rst +++ b/developer_manual/getting_started/index.rst @@ -7,4 +7,5 @@ Getting started development_process devenv + vscode coding_standards/index diff --git a/developer_manual/getting_started/vscode.rst b/developer_manual/getting_started/vscode.rst new file mode 100644 index 00000000000..e0d35f18333 --- /dev/null +++ b/developer_manual/getting_started/vscode.rst @@ -0,0 +1,152 @@ +.. _vscode: + +=================== +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: + +.. code-block:: json + + { + "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: + +.. code-block:: json + + { + "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