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 three configs that can be composed together:

| Export | What it adds | |--------|-------------| | base | @eslint/js recommended, eslint-plugin-vue recommended, TS parser, Vue style rules, globals | | strict | eslint-plugin-sonarjs recommended, @typescript-eslint/prefer-as-const, stricter rules | | a11y | eslint-plugin-vuejs-accessibility recommended, accessibility rules |

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 code quality rules (sonarjs):

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

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

Full setup with accessibility:

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

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

With project-specific overrides:

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

export default [
  ...base,
  ...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

strict

• eslint-plugin-sonarjs recommended rules
• @typescript-eslint/prefer-as-const

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