This addon includes commonly used DDEV commands for Drupal development with focus on code quality and linting.
-
PHP Tools
phpcs
- PHP CodeSniffer with Drupal standardsphpstan
- PHP Static Analysis Tooltwigcs
- Twig CodeSniffer
-
JavaScript & CSS
eslint
- JavaScript/ECMAScript linterstylelint
- CSS/SCSS linter
-
General
cspell
- Spell Checker for Code
dev-lint
- Run all linters on changed filesdev-lint-all
- Run all linters on all files
ddev add-on get Vardot/ddev-dev-tools
ddev restart
Each linting tool can be run in three modes:
1. Check Git Changes (Default)
ddev dev-phpcs # Check PHP files in git diff
ddev dev-eslint # Check JS files in git diff
ddev dev-stylelint # Check CSS files in git diff
ddev dev-twigcs # Check Twig files in git diff
ddev dev-cspell # Check text files in git diff
2. Check Specific Files
ddev dev-phpcs --files=path/to/file1.php,path/to/file2.module
ddev dev-eslint --files=path/to/file1.js,path/to/file2.js
ddev dev-stylelint --files=path/to/file1.css,path/to/file2.css
ddev dev-twigcs --files=path/to/file1.twig,path/to/file2.twig
ddev dev-cspell --files=path/to/file1.txt,path/to/file2.md
3. Check All Files
ddev dev-phpcs --all # Check all PHP files
ddev dev-eslint --all # Check all JS files
ddev dev-stylelint --all # Check all CSS files
ddev dev-twigcs --all # Check all Twig files
ddev dev-cspell --all # Check all text files
Check Changed Files
ddev dev-lint # Run all linters on git changes
Check All Files
ddev dev-lint-all # Run all linters on all files
PHPCS Extensions
# Check specific file extensions
ddev dev-phpcs --ext=php,module,inc
This addon supports various CI/CD platforms including BitBucket Pipelines, GitHub Actions, Azure DevOps, and GitLab CI.
Set these variables in your CI environment:
IS_CI=TRUE
PHP_CHANGED_FILES="file1.php,file2.module"
JS_CHANGED_FILES="file1.js,file2.js"
STYLE_CHANGED_FILES="file1.css,file2.css"
TWIG_CHANGED_FILES="file1.twig,file2.twig"
TEXT_CHANGED_FILES="file1.md,file2.txt"
- Create a pipeline configuration file:
cp config.pipeline.yaml.example .ddev/config.pipeline.yaml
- Or generate it dynamically in your pipeline:
BitBucket Pipelines
steps:
- step:
script:
- |
cat > .ddev/config.pipeline.yaml << EOF
web_environment:
- IS_CI=TRUE
- PHP_CHANGED_FILES=${PHP_CHANGED_FILES}
- JS_CHANGED_FILES=${JS_CHANGED_FILES}
- STYLE_CHANGED_FILES=${STYLE_CHANGED_FILES}
- TWIG_CHANGED_FILES=${TWIG_CHANGED_FILES}
- TEXT_CHANGED_FILES=${TEXT_CHANGED_FILES}
EOF
GitHub Actions
jobs:
lint:
steps:
- run: |
cat > .ddev/config.pipeline.yaml << EOF
web_environment:
- IS_CI=TRUE
- PHP_CHANGED_FILES=${{ env.PHP_CHANGED_FILES }}
- JS_CHANGED_FILES=${{ env.JS_CHANGED_FILES }}
- STYLE_CHANGED_FILES=${{ env.STYLE_CHANGED_FILES }}
- TWIG_CHANGED_FILES=${{ env.TWIG_CHANGED_FILES }}
- TEXT_CHANGED_FILES=${{ env.TEXT_CHANGED_FILES }}
EOF
Azure DevOps
steps:
- bash: |
cat > .ddev/config.pipeline.yaml << EOF
web_environment:
- IS_CI=TRUE
- PHP_CHANGED_FILES=$(PHP_CHANGED_FILES)
- JS_CHANGED_FILES=$(JS_CHANGED_FILES)
- STYLE_CHANGED_FILES=$(STYLE_CHANGED_FILES)
- TWIG_CHANGED_FILES=$(TWIG_CHANGED_FILES)
- TEXT_CHANGED_FILES=$(TEXT_CHANGED_FILES)
EOF
- Then run the linting command:
ddev dev-lint
- Cypress
cypress-open
- Open interactive Cypress windowcypress-run
- Run Cypress tests in headless modecypress-install
- Install additional npm packages for Cucumber support
It's recommended to run ddev cypress-open first to create configuration and support files. This addon sets CYPRESS_baseUrl to DDEV's primary URL in the docker-compose.cypress.yaml.
Note: This addon uses the latest official Cypress Docker image to ensure up-to-date testing capabilities and compatibility.
For Behavior-Driven Development (BDD) with Gherkin syntax:
# Install Cucumber preprocessor packages
ddev cypress-install
# Copy example configuration
cp examples/cypress.config.js.example-[cucumber] cypress.config.js
This enables writing tests in natural language:
Feature: User Login
Scenario: Successful login
Given I visit the login page
When I enter valid credentials
Then I should be logged in
The addon includes example configurations:
cypress.config.js.example-[cucumber]
- Configuration with Cucumber/Gherkin support
To use Cypress, you'll need to configure your display settings based on your OS:
macOS:
brew install xquartz --cask
open -a XQuartz
# Check "Allow connections from network clients" in XQuartz preferences
# Restart your Mac
xhost + 127.0.0.1
# Add to .ddev/docker-compose.cypress_extra.yaml:
services:
cypress:
environment:
- DISPLAY=host.docker.internal:0
Linux:
export DISPLAY=:0
xhost +