ESLint Plugin for Vue Types

2.1.0 · maintenance · verified Sun Apr 19

eslint-plugin-vue-types integrates `vue-types` with `eslint-plugin-vue`, specifically addressing the `vue/require-default-prop` rule. It prevents ESLint from reporting errors for props defined using `vue-types` validators (e.g., `VueTypes.string` or `string().isRequired`). The plugin's current stable version is 2.1.0. It primarily serves environments using `eslint-plugin-vue` versions older than 7.0.0. For `eslint-plugin-vue@7` and later, this plugin is generally not needed as the upstream `vue/require-default-prop` rule inherently ignores call expressions and object properties, negating the problem this plugin solves. Its release cadence is sporadic, reacting to changes in its peer dependencies, especially `eslint-plugin-vue` and `vue-types`. A key differentiator is its focused scope on a single `vue-types`-specific rule extension.

Common errors

```
Error: Failed to load parser '@typescript-eslint/parser' declared in '.eslintrc.js'.
```
cause Early versions (prior to 1.0.1) of `eslint-plugin-vue-types` had compatibility issues when used alongside `@typescript-eslint/parser`.

fix Upgrade `eslint-plugin-vue-types` to version 1.0.1 or newer to resolve the `@typescript-eslint/parser` compatibility bug.
```
Missing required prop: "myProp" vue/require-default-prop
```
cause The `vue/require-default-prop` rule from `eslint-plugin-vue` is active and not correctly suppressed by `eslint-plugin-vue-types` for `vue-types` definitions, often due to incorrect configuration or a too-old `eslint-plugin-vue` version.

fix Ensure `plugin:vue-types/recommended` is included in your `extends` array *after* any `plugin:vue/*` presets. Verify that `eslint-plugin-vue` is at least version `^6.0.0` as required by peer dependencies. Also, check `.isRequired` placement and custom settings.

Warnings

breaking Version 1.0.0 dropped support for Node.js 4. Users on older Node.js versions must remain on `eslint-plugin-vue-types` < 1.0.0.
Fix: Upgrade Node.js to version 10 or higher, or downgrade `eslint-plugin-vue-types` to a version prior to 1.0.0.
deprecated This plugin is largely obsolete for users running `eslint-plugin-vue@7` or higher. The upstream `vue/require-default-prop` rule in newer `eslint-plugin-vue` versions inherently ignores prop assignments by call expressions or object properties, making this plugin's functionality redundant.
Fix: Consider upgrading `eslint-plugin-vue` to version 7 or later. If you do, you can likely remove `eslint-plugin-vue-types` from your project as it will no longer be necessary.
gotcha The `.isRequired` flag must always be the last call in the chain of `vue-types` validators for this plugin to correctly suppress `vue/require-default-prop` errors. Incorrect ordering, such as `.isRequired` followed by other modifiers (e.g., `.loose`), will result in an ESLint error.
Fix: Always place `.isRequired` at the very end of your `vue-types` validator chain, e.g., `shape({}).loose.isRequired` is correct, while `shape({}).isRequired.loose` is incorrect.
gotcha If using custom `vue-types` namespaces (e.g., `AppTypes.theme`), you must explicitly configure these namespaces in the plugin's `settings` via `vue-types/namespace` in your `.eslintrc.json` file. Without this, the plugin will not recognize them and will report `vue/require-default-prop` errors.
Fix: Add `"vue-types/namespace": ["MyCustomNamespace"]` to the `settings` object in your ESLint configuration.
gotcha When importing individual `vue-types` validators from a custom module (not `vue-types` itself), you need to specify these custom import sources in the plugin's `settings` via `vue-types/sources` in your `.eslintrc.json`. Otherwise, `vue/require-default-prop` errors will be reported.
Fix: Add `"vue-types/sources": ["~/utils/prop-types"]` to the `settings` object in your ESLint configuration, pointing to your custom validator modules.

Install

npm install eslint-plugin-vue-types npm
yarn add eslint-plugin-vue-types yarn
pnpm add eslint-plugin-vue-types pnpm

Imports

plugin configuration
wrong:
```
{ "plugins": ["vue-types"] }
```
correct:
```
{ "extends": ["plugin:vue/recommended", "plugin:vue-types/recommended"] }
```
The plugin is typically applied via an `extends` configuration preset, not directly via the `plugins` array. Ensure it's placed AFTER `plugin:vue/*` presets.
settings.vue-types/namespace
wrong:
```
{ "rules": { "vue-types/require-default-prop": ["error", { "namespace": ["AppTypes"] }] } }
```
correct:
```
{ "settings": { "vue-types/namespace": ["AppTypes"] } }
```
Custom namespaces for `vue-types` validators are configured via the `settings` object in `.eslintrc.json`, not directly in the rule configuration.

settings.vue-types/sources

wrong:

{ "rules": { "vue-types/require-default-prop": ["error", { "sources": ["~/utils/prop-types"] }] } }

correct:

{ "settings": { "vue-types/sources": ["~/utils/prop-types"] } }

Custom import sources for individual `vue-types` validators are configured via the `settings` object in `.eslintrc.json`.

Quickstart

Demonstrates the `.eslintrc.json` configuration for `eslint-plugin-vue-types` and a Vue component showcasing how the plugin prevents `vue/require-default-prop` errors for `vue-types` definitions, including custom namespaces and import sources.

{
  "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "plugin:vue/recommended",
    "plugin:vue-types/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 2020
  },
  "rules": {
    "vue/require-default-prop": "error" // Ensure the base rule is active
  },
  "settings": {
    "vue-types/namespace": ["AppTypes"],
    "vue-types/sources": ["./src/prop-validators"]
  }
}

// src/App.vue
<template>
  <div>{{ msg1 }} {{ msg2 }}</div>
</template>

<script>
import VueTypes, { string } from 'vue-types';
import { customProp } from './prop-validators';

const AppTypes = {
  theme: VueTypes.oneOf(['dark', 'light'])
};

export default {
  props: {
    msg1: string().isRequired, // No error with plugin
    msg2: VueTypes.string,     // No error with plugin
    msg3: AppTypes.theme,      // No error with custom namespace
    msg4: customProp().isRequired // No error with custom source
  }
};
</script>

// src/prop-validators.js
import VueTypes from 'vue-types';
export const customProp = () => VueTypes.bool;

view raw JSON →