Lint JavaScript and CSS in GitHub Actions

GitHub Workflows

Lint JavaScript and CSS in GitHub Actions

Run ESLint and Stylelint against a custom Drupal theme to catch frontend defects and inconsistent code before release.

Frontend defects are easiest to fix close to the commit that introduced them. A combined lint job gives JavaScript and CSS consistent automated review.

frontend-lint:
  runs-on: ubuntu-latest
  defaults:
    run:
      working-directory: docroot/themes/custom/swift_devportal_9
  steps:
    - uses: actions/checkout@v7
    - uses: actions/setup-node@v7
      with:
        node-version: "24"
        cache: npm
        cache-dependency-path: docroot/themes/custom/swift_devportal_9/package-lock.json
    - run: npm ci --ignore-scripts
    - run: npm install --no-save --ignore-scripts eslint@^9 @eslint/js@^9 globals eslint-plugin-react eslint-plugin-react-hooks stylelint stylelint-config-standard
    - name: Report JavaScript lint findings
      continue-on-error: true
      run: npx eslint js/src
    - name: Report CSS lint findings
      continue-on-error: true
      run: npx stylelint "js/src/**/*.css"

Two complementary tools

ESLint understands JavaScript syntax and configurable rules. React plugins identify common component and hook mistakes. Stylelint analyzes CSS syntax and conventions, detecting invalid declarations and inconsistent patterns.

Configuration belongs in eslint.config.cjs and .stylelintrc.json, ensuring local and CI runs agree. Installing tools with --no-save is convenient for initial adoption, but pinning them in devDependencies makes results more reproducible.

Both checks are reporting-only while the team cleans the baseline. After resolving existing findings, remove continue-on-error and make the job a required pull-request check.

Keep reading