Closed
Description
Checklist
- I have tried restarting my IDE and the issue persists.
- I have read the FAQ and my problem is not listed.
Tell us about your environment
- ESLint version: 7.32.0
- eslint-plugin-vue version: 7.15.0
- Node version: 16.4.1
- Operating System: MacOS Big Sur 11.5.1
Please show your full configuration:
module.exports = {
root: true,
env: {
node: true,
'jest/globals': true,
},
plugins: ['jest'],
extends: [
// add more generic rulesets here, such as:
'airbnb-base',
'eslint:recommended',
'plugin:vue/vue3-recommended',
'plugin:jest/recommended',
'plugin:jest/style',
],
parserOptions: {
parser: '@typescript-eslint/parser',
},
globals: {
google: 'readonly',
RecursivePartial: 'readonly',
},
ignorePatterns: ['*.json'],
rules: {
// ESLINT
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
quotes: ['error', 'single'],
'prefer-destructuring': ['error', {
object: true,
array: false,
}],
'import/no-unresolved': 'off',
'import/extensions': 'off',
'import/no-extraneous-dependencies': 'off',
'import/prefer-default-export': 'off',
'operator-linebreak': ['error', 'after'],
'comma-spacing': ['error'],
'comma-dangle': ['error', 'always-multiline'],
'arrow-spacing': ['error'],
'brace-style': ['error'],
'comma-style': ['error', 'last'],
'dot-location': ['error', 'property'],
'dot-notation': ['error'],
eqeqeq: ['error'],
'func-call-spacing': ['error', 'never'],
'key-spacing': ['error'],
'keyword-spacing': ['error'],
'no-extra-parens': ['error'],
'no-useless-concat': ['error'],
'object-curly-spacing': ['error', 'always'],
'prefer-template': ['error'],
'space-in-parens': ['error', 'never'],
'space-infix-ops': ['error'],
'space-unary-ops': [
2, {
words: true,
nonwords: false,
}],
'template-curly-spacing': ['error'],
'no-use-before-define': ['error', { functions: false }],
'max-len': 'off',
// Vue Uncategorized
'vue/html-comment-content-newline': ['error', {
singleline: 'never',
multiline: 'always',
}],
'vue/custom-event-name-casing': ['error', 'camelCase'],
'vue/component-name-in-template-casing': ['error', 'PascalCase'],
'vue/html-comment-content-spacing': ['error', 'always'],
'vue/html-comment-indent': ['error', 'tab'],
'vue/match-component-file-name': ['error', { extensions: ['vue'], shouldMatchCase: true }],
'vue/new-line-between-multi-line-property': ['error'],
'vue/no-duplicate-attr-inheritance': ['error'],
'vue/no-empty-component-block': ['error'],
'vue/no-invalid-model-keys': ['error'],
'vue/no-multiple-objects-in-class': ['error'],
'vue/no-potential-component-option-typo': ['error', { presets: ['all'] }],
'vue/no-reserved-component-names': ['error', {
disallowVueBuiltInComponents: false,
disallowVue3BuiltInComponents: false,
}],
'vue/no-static-inline-styles': ['error'],
'vue/no-unused-properties': ['error'],
'vue/no-unused-refs': ['error'],
'vue/no-useless-mustaches': ['error'],
'vue/no-useless-v-bind': ['error'],
'vue/padding-line-between-blocks': ['error', 'always'],
'vue/require-direct-export': ['error'],
'vue/script-indent': ['error'],
'vue/v-for-delimiter-style': ['error', 'in'],
'vue/v-on-event-hyphenation': ['error', 'never'],
'vue/v-on-function-call': ['error', 'always'],
'vue/script-setup-uses-vars': ['off'],
// Vue Extension Rules
'vue/comma-spacing': ['error'],
'vue/comma-style': ['error', 'last'],
'vue/dot-location': ['error', 'property'],
'vue/dot-notation': ['error'],
'vue/eqeqeq': ['error'],
'vue/func-call-spacing': ['error', 'never'],
'vue/key-spacing': ['error'],
'vue/keyword-spacing': ['error'],
'vue/no-constant-condition': ['error'],
'vue/no-empty-pattern': ['error'],
'vue/no-extra-parens': ['error'],
'vue/no-irregular-whitespace': ['error'],
// 'vue/no-restricted-syntax': ['error', {
// selector: 'VElement > VExpressionContainer CallExpression',
// message: 'Can\'t call expressions inside mustache interpolation',
// }],
'vue/no-sparse-arrays': ['error'],
'vue/no-useless-concat': ['error'],
'vue/object-curly-spacing': ['error', 'always'],
'vue/prefer-template': ['error'],
'vue/space-in-parens': ['error', 'never'],
'vue/space-infix-ops': ['error'],
'vue/template-curly-spacing': ['error'],
'vue/v-slot-style': ['error', { default: 'v-slot', atComponent: 'v-slot', named: 'longform' }],
// SPECIALS
// Use this to detect bare strings to replace with i18n https://eslint.vuejs.org/rules/no-bare-strings-in-template.html
// 'vue/no-bare-strings-in-template': ['error'],
},
overrides: [{
files: ['*.vue'],
rules: {
'no-unused-vars': 'off',
},
}, {
files: ['*.d.ts'],
rules: {
'no-unused-vars': 'off',
},
}],
};
What did you do?
<template>
<div>
{{ required }}
{{ optional }}
</div>
</template>
<script setup lang="ts">
import { defineProps, withDefaults } from 'vue';
interface Props {
required: boolean;
optional?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
optional: false,
});
</script>
What did you expect to happen?
The required
prop should not list any warning because is a required property
What actually happened?
12:3 warning Prop 'required' requires default value to be set vue/require-default-prop
Repository to reproduce this issue
I'll try to make one the next week, I don't have time this :(