ESLint plugin for vue-types and eslint-plugin-vue
Since eslint-plugin-vue@7, the vue/require-default-prop rule ignores props assignment by call expressions (VueTypes.arrayOf(String)) or object properties (VueTypes.array). So you don't need this plugin anymore.
If you are using an older version of eslint-plugin-vue consider upgrading it.
--- Original Documentation ---
Warning: This is the documentation for eslint-plugin-vue-types@^2.0.0. The documentation for v.1 is available here.
This plugin should be used alongside eslint-plugin-vue to allow the usage of vue-types validators as valid prop definitions with the [] rule (see vue-types#29 and vue-types#179 for details).
- eslint-plugin-vue
^6.0.0
- ESLint
>=5.0.0. - Node.js
>=10.0.0
npm install --save-dev eslint eslint-plugin-vue eslint-plugin-vue-types This plugin provides a single rule: vue-types/require-default-prop.
The rule extends vue/require-default-prop preventing it from reporting errors for props defined with VueTypes namespaced validators (like VueTypes.string or VueTypes.oneOf([...])). It also allows individually imported validators.
In your eslint configuration add plugin:vue-types/recommended after any plugin:vue/* preset.
{ "extends": ["plugin:vue/recommended", "plugin:vue-types/recommended"] }This will filter errors for prop definitions like:
import VueTypes, { string } from 'vue-types' export default { props: { msg1: string().isRequired, // no error reported msg2: VueTypes.string, // no error reported msg3: VueTypes.shape({}).loose.isRequired, // no error reported }, }Note: For this plugin to work properly, ensure that the .isRequired flag always comes last in the chain:
import { shape } from 'vue-types' export default { props: { msg1: shape({ ... }).loose.isRequired, // no error reported msg2: shape({}).isRequired.loose, // ERROR! }, }By default vue-types/require-default-prop will not report VueTypes validators when used with the VueTypes namespace.
import VueTypes from 'vue-types' const theme = VueTypes.oneOf(['dark', 'light']) export default { props: { name: VueTypes.string, // <-- not an error theme, // <-- error }, }To prevent this error you can wrap custom validators in a namespace and add it to the plugin's allowed namespaces:
// .eslintrc.json { "extends": ["plugin:vue/recommended", "plugin:vue-types/recommended"], "settings": { "vue-types/namespace": ["AppTypes"] } }import VueTypes from 'vue-types' const AppTypes = { theme: VueTypes.oneOf(['dark', 'light']), } export default { props: { name: VueTypes.string, // <-- not an error theme: AppTypes.theme, // <-- not an error }, }By default vue-types/require-default-prop will not report VueTypes individual validators when imported from the vue-types module.
To extend this feature to other modules, include them in the vue-types/sources setting:
// .eslintrc.json { "extends": ["plugin:vue/recommended", "plugin:vue-types/recommended"], "settings": { "vue-types/sources": ["~/utils/prop-types"] } }import { string } from 'vue-types' import { myValidator } from '~/utils/prop-types' export default { props: { name: string(), // <-- not an error msg: myValidator(), // <-- custom validator, not an error }, }Note: This feature is only available for static import statements.
Copyright (c) 2018-2021 Marco Solazzi