@ctrliq/quantic-eslint-config

Shared ESLint flat config for Quantic design system consumers.

Requirements

• ESLint ^9.0.0 (flat config)
• TypeScript >=5.0 (the config loads @typescript-eslint/parser, which requires it)
• TypeScript projects get syntax-level TypeScript rules (@typescript-eslint); type-aware rules require configuring parserOptions.project or projectService in your own config

Install

pnpm add -D @ctrliq/quantic-eslint-config eslint typescript

Usage

Base (TypeScript / JS only)

// eslint.config.mjs
import baseConfig from '@ctrliq/quantic-eslint-config/base';

export default baseConfig;

React

// eslint.config.mjs
import reactConfig from '@ctrliq/quantic-eslint-config/react';

export default reactConfig;

Astro

// eslint.config.mjs
import astroConfig from '@ctrliq/quantic-eslint-config/astro';

export default astroConfig;

Lints .astro files, including TypeScript frontmatter, and applies the same import sorting as the base config. eslint-plugin-astro is bundled, so nothing extra is needed in the consuming project.

React + Lingui i18n

Requires eslint-plugin-lingui installed separately.

// eslint.config.mjs
import linguiConfig from '@ctrliq/quantic-eslint-config/lingui';
import lingui from 'eslint-plugin-lingui';

export default [
  ...linguiConfig,
  {
    plugins: { lingui },
    rules: {
      'lingui/t-call-in-function': 'error',
      'lingui/no-single-variables-to-translate': 'warn',
    },
  },
];

Quantic custom rules plugin

Import the plugin to opt into Quantic-specific rules:

// eslint.config.mjs
import reactConfig from '@ctrliq/quantic-eslint-config/react';
import quanticPlugin from '@ctrliq/quantic-eslint-config/plugin';

export default [
  ...reactConfig,
  {
    plugins: { quantic: quanticPlugin },
    rules: {
      // 'quantic/rule-name': 'error',
    },
  },
];

What's included

| Export | Extends | Adds | | ------ | ------- | ---- | | base | — | @typescript-eslint, simple-import-sort, prettier compat | | react | base | react-hooks, react-refresh | | astro | base | eslint-plugin-astro, TS frontmatter parsing, import sorting in .astro | | lingui | react | peer integration point for eslint-plugin-lingui | | plugin | — | Quantic-specific custom rules (opt-in) |

Adding a custom rule (contributors)

Custom rules live in plugin.js and are automatically inherited by all configs once wired into base.js.

1. Add the rule to plugin.js

const myRule = {
  meta: {
    type: 'problem',           // 'problem' | 'suggestion' | 'layout'
    messages: {
      myMessage: 'Describe the violation here.',
    },
  },
  create(context) {
    return {
      // AST selector: called when ESLint visits a matching node
      Identifier(node) {
        if (node.name === 'forbidden') {
          context.report({ node, messageId: 'myMessage' });
        }
      },
    };
  },
};

const plugin = {
  meta: { name: '@ctrliq/quantic', version: '0.0.0' },
  rules: {
    'my-rule': myRule,
  },
};

Use AST Explorer (parser: @typescript-eslint/parser) to find the right selector for the node you want to target.

2. Register the plugin and enable the rule in base.js

import quanticPlugin from './plugin.js';

// In the TS/TSX config object:
{
  plugins: {
    // ...existing plugins
    quantic: quanticPlugin,
  },
  rules: {
    // ...existing rules
    'quantic/my-rule': 'error',
  },
}

Because react and lingui both spread base, the rule is enforced across all configs automatically.