npm package: @shrpne/eslint-plugin-vue-extra
Description: Extra ESLint rules for Vue projects
Latest version: 0.2.2

# @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

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

## Quick Start (recommended preset)

```js
// 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:

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

Default:

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

```ts
// 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:

```js
['error', { fixReferencedTypes: true }]
```

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

```ts
// 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(...)`.

```ts
// 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(...)`.

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

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