@aleph-alpha/eslint-config-frontend

ESLint Config

@aleph-alpha/eslint-config-frontend

Shared, composable ESLint flat config for Aleph Alpha frontend projects. Requires ESLint 10+.

Install

pnpm add -D @aleph-alpha/eslint-config-frontend eslint

Quick Start

Create an eslint.config.mjs in your project:

import { base } from '@aleph-alpha/eslint-config-frontend';

export default [...base];

That's it. This replaces the entire create-vue boilerplate and gives you @eslint/js recommended + eslint-plugin-vue recommended + TypeScript parsing + org-standard Vue rules.

Composable Configs

The package exports four configs that can be composed together:

Usage Examples

Vue + TS project (most common):

import { base } from '@aleph-alpha/eslint-config-frontend';
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting';

export default [...base, skipFormatting];

With TypeScript rules:

import { base, tsRecommended } from '@aleph-alpha/eslint-config-frontend';
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting';

export default [...base, ...tsRecommended, skipFormatting];

With code quality rules (sonarjs) on top:

import { base, tsRecommended, strict } from '@aleph-alpha/eslint-config-frontend';
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting';

export default [...base, ...tsRecommended, ...strict, skipFormatting];

Full setup with accessibility:

import { base, tsRecommended, strict, a11y } from '@aleph-alpha/eslint-config-frontend';
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting';

export default [...base, ...tsRecommended, ...strict, ...a11y, skipFormatting];

In an Nx workspace (drop nx.configs['flat/typescript'] and nx.configs['flat/javascript'] — tsRecommended owns the @typescript-eslint registration and rule set):

import nx from '@nx/eslint-plugin';
import { base, tsRecommended, strict, a11y } from '@aleph-alpha/eslint-config-frontend';

export default [
  ...nx.configs['flat/base'],
  ...tsRecommended,
  ...base,
  ...strict,
  ...a11y,
  // ...workspace-specific blocks
];

With project-specific overrides:

import { base, tsRecommended, strict } from '@aleph-alpha/eslint-config-frontend';
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting';

export default [
  ...base,
  ...tsRecommended,
  ...strict,
  {
    rules: {
      'no-console': 'warn',
      'vue/block-order': ['error', { order: ['i18n', 'script', 'template', 'style'] }],
    },
  },
  skipFormatting,
];

With vitest and playwright (common pattern):

import { base } from '@aleph-alpha/eslint-config-frontend';
import pluginVitest from '@vitest/eslint-plugin';
import pluginPlaywright from 'eslint-plugin-playwright';
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting';

export default [
  ...base,
  {
    ...pluginVitest.configs.recommended,
    files: ['src/**/__tests__/*'],
  },
  {
    ...pluginPlaywright.configs['flat/recommended'],
    files: ['e2e/**/*.{test,spec}.{js,ts,jsx,tsx}'],
  },
  skipFormatting,
];

What's Included

base

• @eslint/js recommended rules
• eslint-plugin-vue flat/recommended rules
• vue-eslint-parser with @typescript-eslint/parser
• Browser and Node.js globals
• Org-standard Vue rules: PascalCase components, shorthand directives, scoped styles, block ordering

tsRecommended

• Scoped to **/*.{ts,tsx,cts,mts,vue} (order-independent — safe to spread before or after base)
• typescript-eslint recommended config
• @typescript-eslint plugin registration
• Org-standard severity tunings: no-require-imports off; no-empty-function, no-inferrable-types, no-empty-object-type, no-unused-expressions, no-non-null-asserted-optional-chain, prefer-const, no-non-null-assertion, no-explicit-any, no-unused-vars set to warn for graceful adoption
• @typescript-eslint/prefer-as-const: error

strict

• eslint-plugin-sonarjs recommended rules

a11y

• eslint-plugin-vuejs-accessibility recommended rules

Customization

Each config is an array of ESLint flat config objects. Override any rule by adding config objects after the shared configs. For details on available rules, see:

• ESLint rules reference
• typescript-eslint rules
• eslint-plugin-vue rules
• eslint-plugin-sonarjs rules
• ESLint flat config docs