Trailhead Web Linters

This version supports only ESLint 9 Flat Config

Usage

Install

Angular

npm install --D @trailheadtechnology/eslint-config eslint stylelint @angular-eslint/eslint-plugin @angular-eslint/eslint-plugin-template @angular-eslint/template-parser

React

npm install --D @trailheadtechnology/eslint-config eslint stylelint

Configure ESLint

Create a file named eslint.config.mjs in the root of your project with the following content.

For Angular CLI project:

import baseConfig from '@trailheadtechnology/eslint-config';
import angularConfig from '@trailheadtechnology/eslint-config/angular.js';

export default [
  ...baseConfig,
  ...angularConfig,
  {
    files: [ "**/*.ts" ],
    rules: {
      // Add any additional rules here
    },
  }
]

For Angular NX project:

import baseConfig from '@trailheadtechnology/eslint-config';
import angularConfig from '@trailheadtechnology/eslint-config/angular.js';
import nxDevkit from '@nx/devkit';

export default [
  ...baseConfig,
  ...angularConfig,
  {
    files: ["**/*.ts"],
    rules: {
       // Add any additional rules here
    },
    languageOptions: {
      parserOptions: {
        tsconfigRootDir: nxDevkit.workspaceRoot
      },
    },
  } 
];

React

import baseConfig from '@trailheadtechnology/eslint-config';
import reactConfig from '@trailheadtechnology/eslint-config/react.js';

export default [
  ...baseConfig,
  ...reactConfig,
  {
    files: [ "**/*.ts" ],
    rules: {
      // Add any additional rules here
    },
  }
]

Configure Stylelint

Create a file named stylelint.config.mjs in the root of your project with the following content.

export default {
  extends: [
    "@trailheadtechnology/eslint-config/stylelint"
  ],
  rules: {
    // Add any additional rules here
  }
}

Troubleshooting

NextJS: Plugin Conflicts with nextVitals

When using NextJS with nextVitals imports, you may encounter conflicts with plugins that are defined in multiple configs (such as import and @typescript-eslint). To resolve this, you need to deduplicate the conflicting plugins by extracting them from nextVitals and defining them once at the start of your config.

Here's how to fix it:

import baseConfig from '@trailheadtechnology/eslint-config';
import reactConfig from '@trailheadtechnology/eslint-config/react.js';
import { stripConflictingPlugins } from '@trailheadtechnology/eslint-config/utils.js';
import nextVitals from '@next/eslint-plugin-next';

// Plugins that are defined in multiple configs and need deduplication
const conflictingPlugins = ['import', '@typescript-eslint'];

// Extract plugins from nextVitals to use as the single source
const extractedPlugins = {};
for (const config of nextVitals) {
  if (config.plugins) {
    for (const name of conflictingPlugins) {
      if (config.plugins[name] && !extractedPlugins[name]) {
        extractedPlugins[name] = config.plugins[name];
      }
    }
  }
}

export default [
  // Define conflicting plugins once at the start
  {
    plugins: extractedPlugins,
  },
  ...stripConflictingPlugins(nextVitals, conflictingPlugins),
  ...stripConflictingPlugins(baseConfig, conflictingPlugins),
  ...reactConfig,
  {
    files: ["**/*.{ts,tsx}"],
    rules: {
      // Add any additional rules here
    },
  }
];

This approach:

1. Extracts the conflicting plugins from nextVitals configs
2. Defines them once at the beginning of your config array
3. Strips the conflicting plugins from both nextVitals and baseConfig to avoid duplicate definitions