@maltjoy/eslint-rules

@maltjoy/eslint-rules

Custom ESLint rules for Maltjoy design system usage.

This package is ESM-only ("type": "module"). Use import from eslint.config.mjs / eslint.config.js (with ESM).

Rules

• no-html-button: disallow native HTML <button> elements. Use VJoyButton or VJoyIconButton instead.

Message:

Do not use native HTML button elements, use VJoyButton or VJoyIconButton instead.

• no-vjoyavatar-fullname-totalnumber: disallow using fullName and totalNumber together on VJoyAvatar. This rule is a warning in the recommended preset.

Message:

VJoyAvatar fullName and totalNumber props are mutually exclusive.

• no-vjoyavatar-photourl-totalnumber: disallow using photoUrl and totalNumber together on VJoyAvatar. This rule is a warning in the recommended preset.

Message:

VJoyAvatar photoUrl and totalNumber props are mutually exclusive.

• no-vjoybutton-circle: disallow circle prop usage on VJoyButton / v-joy-button.

Message:

VJoyButton circle property is deprecated, please use VJoyIconButton instead

• no-vjoycompanyavatar: disallow VJoyCompanyAvatar usage. Use VJoyAvatar instead. This rule is a warning in the recommended preset.

Message:

VJoyCompanyAvatar is deprecated, use VJoyAvatar instead.

• no-vjoyformgroup-vjoyradio: disallow VJoyRadio inside VJoyFormGroup. Use VJoyRadioGroup to group radios instead.

Message:

VJoyFormGroup shouldn't be used around a VJoyRadio. Use VJoyRadioGroup instead.

• no-vjoyfunnelfooter-slot: disallow deprecated #funnel-footer slot usage on VJoyFunnel. Use VJoyFunnelFooter in the default slot instead. This rule is a warning in the recommended preset.

Message:

VJoyFunnel funnel-footer slot is deprecated, use VJoyFunnelFooter in the default slot instead.

• no-vjoyinput-type-password: disallow VJoyInput with type="password" (or a literal :type bound to password). Use VJoyInputPassword instead.

• no-vjoyinput-unit: disallow unit prop usage on VJoyInput. Use VJoyInputNumber instead.

Message:

Do not use VJoyInput with unit, use VJoyInputNumber instead.

• no-vjoymenu-vjoypanel: disallow VJoyMenu inside VJoyPanel.

Message:

Never use a VJoyMenu inside a VJoyPanel.

• no-vjoysnackbar-direct: disallow direct VJoySnackbar usage in templates. Use pushVJoySnackbar from @maltjoy/core-vue instead.

Message:

Do not use VJoySnackbar directly, use pushVJoySnackbar from @maltjoy/core-vue instead.

• require-vjoymenu-template-sidebar: require VJoyMenu to be inside VJoyTemplate's #template-sidebar slot. This rule is a warning in the recommended preset.

Message:

VJoyMenu must be used inside the VJoyTemplate #template-sidebar slot.

• require-vjoytemplate-template-title: require VJoyTemplate to provide a #template-title slot. This rule is a warning in the recommended preset.

Message:

VJoyTemplate must have a template-title slot.

• no-vjoyusercard-rating-stars-slot: disallow user-card-rating-stars slot usage on VJoyUserCard. Use the default slot instead.

Message:

Do not use VJoyUserCard user-card-rating-stars slot, use the default slot instead.

Accessibility rules

Rules under rules/accessibility/ enforce accessible usage of Joy components.

• require-vjoytemplate-template-title-heading: require the VJoyTemplate #template-title slot to contain an h1–h6 element, preferably h1. This rule is a warning in the recommended preset.

Message:

VJoyTemplate template-title slot should use a heading tag (h1-h6), preferably h1.

• require-vjoyiconbutton-label: require an accessible label on VJoyIconButton via the label prop or default slot content. This rule is a warning in the recommended preset.

Message:

VJoyIconButton must have an accessible label via the label prop or the default slot.

Token rules

Rules under rules/tokens/ enforce usage of Joy design tokens instead of hardcoded CSS values.

• no-hardcoded-hex-colors-in-vue: disallow hardcoded hex colors in Vue templates and <style> blocks. This rule is a warning in the recommended preset.

Message:

Avoid hardcoded hex colors in Vue files. Use @maltjoy/themes design tokens such as var(--joy-color-*).

• no-inline-style-colors: disallow inline color styles in Vue templates. This rule is a warning in the recommended preset.

Message:

Avoid inline color styles in Vue templates. Use Joy utility classes or component styles with design tokens instead.

• no-arbitrary-font-size: disallow arbitrary font-size values in Vue templates and <style> blocks. This rule is a warning in the recommended preset.

Message:

Avoid arbitrary font-size values in Vue files. Use @maltjoy/themes tokens such as var(--joy-font-size-primary-400) or typography classes like joy-font-primary-400.

Folder layout

• rules/components/ — component usage and composition rules
• rules/accessibility/ — accessibility and semantic HTML rules
• rules/tokens/ — design token and styling rules
• rules/utils/ — shared ESLint helpers

Usage (flat config)

Preset (recommended) — active toutes les règles du design system d’un coup :

import maltjoyRules from '@maltjoy/eslint-rules';
import vueParser from 'vue-eslint-parser';

export default [
  {
    files: ['**/*.vue'],
    languageOptions: {
      parser: vueParser,
    },
  },
  ...maltjoyRules.configs.recommended,
];

Les sévérités par défaut du preset sont en error. Pour assouplir une règle, ajoute un bloc après le spread :

  ...maltjoyRules.configs.recommended,
  {
    rules: {
      '@maltjoy/eslint-rules/no-vjoybutton-circle': 'warn',
    },
  },

Règles à la carte (sans preset) :

import maltjoyRules from '@maltjoy/eslint-rules';

export default [
  {
    plugins: {'@maltjoy/eslint-rules': maltjoyRules},
    rules: {
      '@maltjoy/eslint-rules/no-vjoybutton-circle': 'warn',
    },
  },
];