Skip to main content

ESLint - JavaScript linter

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.

Vortex comes with pre-configured ESLint ruleset for Drupal projects, along with Prettier integration for automatic code formatting.

info

ESLint in Vortex is configured to lint custom modules only (web/modules/custom). Custom themes should maintain their own ESLint configuration within the theme directory.

Usage​

Check for violations​

ahoy lint-fe

Fix violations​

ESLint supports automatic fixing of many violations using the --fix flag. Prettier integration provides additional auto-formatting capabilities.

ahoy lint-fe-fix

Configuration​

See configuration reference.

All global configuration takes place in the .eslintrc.json file.

By default, ESLint will check against the following rules:

  • airbnb-base - Airbnb's base JavaScript style guide
  • plugin:prettier/recommended - Prettier integration for code formatting
  • plugin:yml/recommended - YAML file linting

The configuration includes Drupal-specific globals:

  • Drupal, drupalSettings, drupalTranslations
  • jQuery, once
  • CKEditor5
  • And other common Drupal frontend libraries

Targets include custom modules only:

{
  "scripts": {
    "lint-js": "eslint web/modules/custom --ext .js"
  }
}

Adding or removing targets in package.json:

{
  "scripts": {
    "lint-js": "eslint web/modules/custom web/sites/default --ext .js"
  }
}

Prettier integration​

Prettier is integrated via eslint-plugin-prettier and provides automatic code formatting. The rule "prettier/prettier": "error" ensures that all code formatting issues are caught by ESLint.

When you run ahoy lint-fe-fix, both ESLint's --fix and Prettier's formatting are applied automatically.

Ignoring​

Global ignoring​

Ignoring paths globally takes place in the .eslintignore file:

node_modules/
vendor/
web/core/
web/libraries/
web/modules/contrib/
web/themes/contrib/
*.min.js

Inline ignoring​

To ignore all ESLint rules within a file, place in the file header:

/* eslint-disable */

To ignore a specific rule within a file, place in the file header:

/* eslint-disable no-console, no-unused-vars */

To ignore rules for a code block:

/* eslint-disable no-console */
console.log('Debug information');
/* eslint-enable no-console */

To ignore only the next line:

// eslint-disable-next-line no-console
console.log('Single debug statement');

To ignore rules for the current line (inline):

console.log('Debug'); // eslint-disable-line no-console

Ignoring fail in continuous integration pipeline​

This tool runs in continuous integration pipeline by default and fails the build if there are any violations.

Set VORTEX_CI_NODEJS_LINT_IGNORE_FAILURE environment variable to 1 to ignore failures. The tool will still run and report violations, if any.