Integrating Composer, Node, npm and Yarn Cleanly in PhpStorm

1. Package managers in the IDE: what it gets you

Integrating Composer, npm and Yarn in PhpStorm goes beyond mere convenience: anyone using autocompletion for composer.json stops writing broken package names and immediately understands which version constraints are allowed. Anyone who saves Composer scripts as a run configuration can execute them with a click or a shortcut instead of retyping the command in a terminal. Anyone managing npm scripts in PhpStorm can debug them, something a plain terminal simply cannot do.

In Magento projects with a Docker setup like the one from Mark Shust, this integration matters even more: Composer runs inside the container, not locally. PhpStorm supports Docker based interpreters for Composer, so that all IDE features, autocompletion, navigation into vendor packages, quick documentation for libraries, work with the PHP version and packages actually present in the container. That avoids the classic mistake of the IDE analyzing code against a local PHP version that differs from the container version.

This article covers the complete configuration for Composer (local and Docker based), Node.js with npm and Yarn, script runner integration, and the autocompletion features for configuration files.

2. Configuring Composer in PhpStorm

Composer configuration in PhpStorm lives under "Settings > PHP > Composer". There you specify the path to composer.phar or to a system wide installed composer binary. PhpStorm shows the detected Composer version and validates the path. If a PHP interpreter is configured, PhpStorm automatically checks whether Composer is compatible with that PHP version.

The important option here is "Synchronize IDE settings with composer.json": when enabled, PhpStorm automatically updates test frameworks, code quality tools and other IDE settings whenever composer.json changes. At project start this means: run composer install, restart PhpStorm, and all dependencies are indexed and navigable without manually configuring each individual tool.

For indexing vendor packages it is essential that the vendor directory is not marked as "Excluded". In PhpStorm, vendor is marked as a library root by default (recognizable by the stack icon in the project tree), meaning it is indexed and navigable, but not treated as equal to your own code in the "Jump to Class" dialog. That distinction is correct and intentional.

{
  "name": "mironsoft/magento2-extension",
  "description": "Custom Magento 2 extension",
  "type": "magento2-module",
  "require": {
    "php": ">=8.4",
    "magento/framework": ">=2.4.8"
  },
  "require-dev": {
    "phpunit/phpunit": "^11.0",
    "phpstan/phpstan": "^1.12",
    "squizlabs/php_codesniffer": "^3.10"
  },
  "scripts": {
    "test": "phpunit --configuration phpunit.xml",
    "analyse": "phpstan analyse --level=8 src/",
    "cs-check": "phpcs --standard=PSR12 src/",
    "cs-fix": "phpcbf --standard=PSR12 src/"
  },
  "autoload": {
    "psr-4": {
      "Mironsoft\\Extension\\": "src/"
    }
  }
}
// PhpStorm: Ctrl+Click on "phpunit/phpunit" -> navigate to vendor/phpunit/phpunit
// PhpStorm: Hover over "^11.0" -> tooltip shows installed version
// PhpStorm: scripts section -> run icon appears next to each script

3. Running Composer scripts directly from PhpStorm

In PhpStorm, a green run arrow appears next to every entry in the scripts section of composer.json. Clicking it starts the script directly, with no terminal focus, no command to type. The result appears in the PhpStorm run panel with full output. Errors are highlighted and, if they are PHP errors, you can jump straight to the relevant file with Ctrl+Click.

Frequently used scripts can be saved as permanent run configurations: "Run > Edit Configurations > Add > npm/Composer Script". These configurations appear in the run dropdown list at the top right and can be started with Shift+F10. That is especially useful for scripts run several times a day, such as a PHPStan analysis or PHPUnit tests before a commit.

PhpStorm also supports "Before Launch" actions in run configurations: a test run can be configured to first execute a Composer script, for example for code generation or cache cleanup. This replicates CI pipelines locally and ensures tests run under the same preconditions as in CI.

4. Setting up Node.js and npm/Yarn in PhpStorm

Node.js configuration is found under "Settings > Languages & Frameworks > Node.js". PhpStorm automatically detects local Node.js installations (via PATH) and shows available versions. When nvm is used, PhpStorm needs to know the nvm path, which happens either through the shell configuration or by explicitly specifying the nvm directory in the settings.

Yarn is configured under "Settings > Languages & Frameworks > Node.js > Package manager": instead of npm you can select Yarn (Classic or Berry) there. PhpStorm adapts all internal operations accordingly: installing packages, running scripts, and the GUI integration of the package panel. If the project contains an .npmrc or .yarnrc.yml, PhpStorm reads it automatically and takes registry configurations into account.

For projects with multiple package.json files (typical in Magento themes using Tailwind CSS), PhpStorm detects every package.json file in the project tree and lets you run scripts from each of them directly. That matters for projects where the frontend build system (e.g. the Tailwind compiler) lives inside the theme directory rather than at the project root.

// package.json in src/app/design/frontend/Mironsoft/default/web/tailwind/
{
  "name": "mironsoft-default-theme",
  "version": "1.0.0",
  "scripts": {
    "build": "tailwindcss -i ./src/tailwind.css -o ../css/styles.css --minify",
    "watch": "tailwindcss -i ./src/tailwind.css -o ../css/styles.css --watch",
    "dev": "tailwindcss -i ./src/tailwind.css -o ../css/styles.css"
  },
  "devDependencies": {
    "tailwindcss": "^4.0.0",
    "@tailwindcss/cli": "^4.0.0"
  }
}

// PhpStorm: npm panel shows all scripts from this package.json
// Double-click "build" -> runs in Run panel with output
// Double-click "watch" -> long-running process with live output
// Green run icon appears next to each script in the editor
// Run Configuration: save "watch" as persistent config -> Shift+F10 to restart

5. Using npm/Yarn scripts as run configurations

The npm panel in PhpStorm (View > Tool Windows > npm) lists all scripts from every package.json file in the project. Double-clicking a script name runs it. For scripts that run regularly, it is worth creating a run configuration: "Run > Edit Configurations > Add > npm". There you can configure the script name, working directory and environment variables.

For the watch script (which runs continuously), PhpStorm is particularly convenient: the running process appears in its own tab in the run panel, can be restarted or stopped at any time, and the output scrolls live. Unlike in a terminal, PhpStorm remains usable while this happens, the watch process runs in the background while you keep working in the editor.

PhpStorm also supports starting several run configurations simultaneously via "Compound Configurations": a compound configuration can start the Tailwind watcher, a PHP built in server and an XDebug listener all at once, with a single click or shortcut. That simulates an entire development stack directly from the IDE.

6. Using package managers through a Docker interpreter

In Docker based setups such as the Mark Shust stack for Magento, PHP runs inside the container, and so does Composer. PhpStorm supports Docker based Composer interpreters: under "Settings > PHP > Composer" you can select a Docker container as the interpreter. When you run Composer commands, PhpStorm automatically starts a Docker exec into the configured container.

This configuration requires that the Docker interpreter is already set up under "Settings > PHP > CLI Interpreter" (with the correct container image and service name from docker-compose.yml). Once that is in place, PhpStorm handles Composer commands seamlessly: running composer require vendor/package from the IDE dialog is executed as docker exec -it phpfpm composer require vendor/package, without the developer having to open a terminal at all.

For Node.js and npm in Docker, the integration works a little differently: PhpStorm has no native Docker Node.js interpreter configuration like it does for PHP. Here it is recommended to set up a terminal tool (Settings > Tools > Terminal: point Shell Path to a wrapper script that automatically runs docker exec). Alternatively, keep the terminal open for npm/Yarn commands while Composer is handled entirely through the IDE GUI.

// PhpStorm Docker Composer setup (Mark Shust stack)
// Settings > PHP > CLI Interpreter > Add > Docker Compose
//   Service: phpfpm
//   Image: magento-phpfpm:8.4
//   Lifecycle: Connect to existing container

// Settings > PHP > Composer
//   Composer executable: /usr/local/bin/composer (inside container)
//   PHP Interpreter: [Docker: phpfpm] (configured above)

// Now from PhpStorm: Tools > Composer > Manage Dependencies
// PhpStorm runs: docker exec -it phpfpm composer require ...
// Output appears in IDE Run panel

// For Magento bin/composer wrapper, add as External Tool:
// Settings > Tools > External Tools > Add
//   Name: bin/composer
//   Program: $ProjectFileDir$/bin/composer
//   Arguments: $Prompt$
//   Working directory: $ProjectFileDir$

7. Autocompletion for composer.json and package.json

PhpStorm offers extensive autocompletion for composer.json: package names are suggested from Packagist (given an internet connection), version constraints are validated, and known keys like require, autoload and scripts are suggested with the correct value types. Hover tooltips show field documentation directly in the editor.

The same applies to package.json: package names from the npm registry, version constraints, known script commands and fields like main, exports or browser. If a package is already installed in node_modules, Ctrl+Click on the package name navigates straight into the package directory, for reading the source or the installed documentation.

An often overlooked feature: PhpStorm also recognizes pnpm-workspace.yaml and Yarn workspaces and shows all workspace packages in the completion dialog. For monorepos or projects with several sub packages (such as Magento extensions with a separate frontend package), this helps you reference workspace internal dependencies correctly.

8. Comparison: local vs. Docker based interpreters

9. Summary

Integrating Composer, Node.js, npm and Yarn in PhpStorm eliminates a large part of the terminal switching in everyday development. Composer in PhpStorm means: autocompletion for composer.json, navigation into vendor packages, script buttons right in the file, and Docker based execution without manual exec commands. npm and Yarn mean: an npm panel with all scripts, run configurations for watch processes, and compound configurations for full development stacks.

For Docker based projects such as Magento with a Mark Shust setup, the Composer Docker integration matters a great deal because it ensures PhpStorm works with the correct PHP version and the container's packages. Node.js remains locally installed in most cases, since PhpStorm has no native Docker Node interpreter, a terminal wrapper script helps here. The result is a development workflow where the editor is the central control room and the terminal is only opened for exceptions.

10. FAQ: Composer, Node, npm and Yarn in PhpStorm