@shrpne/eslint-plugin-vue-extra

ESLint rules for Vue + TypeScript that remove redundant/noise patterns around defineProps + withDefaults, where core/recommended Vue rules are mostly targeted non TypeScript-specific cases.

Install

npm i -D @shrpne/eslint-plugin-vue-extra @vue/eslint-config-typescript eslint-plugin-vue

Quick Start (recommended preset)

// eslint.config.mjs
import pluginVue from 'eslint-plugin-vue';
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript';
import vueExtra from '@shrpne/eslint-plugin-vue-extra';

export default defineConfigWithVueTs(
    pluginVue.configs['flat/essential'],
    vueTsConfigs.recommendedTypeChecked,
    vueExtra.configs.recommended,
);

The preset enables all rules from this plugin and disables vue/require-default-prop (it conflicts with no-falsy-default-with-optional-prop).

Rules

• no-falsy-default-with-optional-prop: disallow configured falsy defaults for optional props.
• no-boolean-default-false: disallow false defaults for boolean props.
• prefer-optional-boolean-prop: prefer optional boolean props unless default is true.
• no-empty-defaults: remove redundant withDefaults(..., {}).

Rule details

no-falsy-default-with-optional-prop

In TypeScript, optional props stay typed with | undefined; defaults like undefined and false are usually noise.

Options:

['error', { disallow: ['undefined', 'false', 'null', `''`, '0'] }]

Default:

['error', { disallow: ['undefined', 'false'] }]

// before
withDefaults(defineProps<{
    label?: string;
    isVisible?: boolean;
}>(), {
    label: undefined,
    isVisible: false,
});

// after
withDefaults(defineProps<{
    label?: string;
    isVisible?: boolean;
}>(), {});

prefer-optional-boolean-prop

Required booleans without default: true are awkward in templates; optional booleans model presence/absence better.

Options:

['error', { fixReferencedTypes: true }]

By default, fixer only updates inline defineProps<{ ... }>().
With fixReferencedTypes: true, it can also fix same-file referenced types (defineProps<Props>()).

// before
withDefaults(defineProps<{ enabled: boolean }>(), {});

// after
withDefaults(defineProps<{ enabled?: boolean }>(), {});

no-boolean-default-false

This rule focuses on reducing noise by removing redundant false defaults.

Relation to vue/no-boolean-default: vue/no-boolean-default serves a different goal - it focuses on HTML-compatibility disallowing default: true, while this rule does nothing for default: true cases.

When not to use:

Generally vue/no-boolean-default: "error" is recommended to remove all boolean defaults. But if you want to keep default: true cases, this rule will help remove false defaults.

Don't use no-boolean-default-false if you already use prefer-optional-boolean-prop with no-falsy-default-with-optional-prop - this case will be already covered:

• prefer-optional-boolean-prop - makes boolean prop optional
• no-falsy-default-with-optional-prop - removes falsy defaults for this optional prop

Options: none.

Fixer: removes the false entry from withDefaults(...).

// before
withDefaults(defineProps<{
    enabled?: boolean;
    showLabel?: boolean;
}>(), {
    enabled: false,
    showLabel: true,
});

// after
withDefaults(defineProps<{
    enabled?: boolean;
    showLabel?: boolean;
}>(), {
    showLabel: true,
});

no-empty-defaults

withDefaults(defineProps(...), {}) is redundant.

Options: none.

Fixer: rewrites to defineProps(...).

// before
withDefaults(
    defineProps<{ 
        foo?: string
    }>(),
    {}
);

// after
defineProps<{
    foo?: string
}>();