Skip to content

Vardot/ddev-dev-tools

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

53 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

add-on registry tests last commit release

DDEV Development Tools

This addon includes commonly used DDEV commands for Drupal development with focus on code quality and linting.

Features

Code Quality Tools ๐Ÿงน

  • PHP Tools

    • phpcs - PHP CodeSniffer with Drupal standards
    • phpstan - PHP Static Analysis Tool
    • twigcs - Twig CodeSniffer
  • JavaScript & CSS

    • eslint - JavaScript/ECMAScript linter
    • stylelint - CSS/SCSS linter
  • General

    • cspell - Spell Checker for Code

Combined Commands ๐Ÿš€

  • dev-lint - Run all linters on changed files
  • dev-lint-all - Run all linters on all files

Installation

ddev add-on get Vardot/ddev-dev-tools
ddev restart

Usage

Individual Linting Tools

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

Combined Linting Commands

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

Special Options

PHPCS Extensions

# Check specific file extensions
ddev dev-phpcs --ext=php,module,inc

CI/CD Integration ๐Ÿ”„

This addon supports various CI/CD platforms including BitBucket Pipelines, GitHub Actions, Azure DevOps, and GitLab CI.

Option 1: Environment Variables

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"

Option 2: Configuration File

  1. Create a pipeline configuration file:
cp config.pipeline.yaml.example .ddev/config.pipeline.yaml
  1. 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
  1. Then run the linting command:
ddev dev-lint

Testing Tools ๐Ÿงช

  • Cypress
    • cypress-open - Open interactive Cypress window
    • cypress-run - Run Cypress tests in headless mode
    • cypress-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.

Cypress with Cucumber Support

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

Configuration Examples

The addon includes example configurations:

  • cypress.config.js.example-[cucumber] - Configuration with Cucumber/Gherkin support

Cypress Usage

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 +

Windows: Install GWSL or VcXsrv

About

No description or website provided.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 2

  •  
  •  

Languages