diff --git a/lib/rules/prop-name-casing.js b/lib/rules/prop-name-casing.js
index 5ee9b78f1..b21147957 100644
--- a/lib/rules/prop-name-casing.js
+++ b/lib/rules/prop-name-casing.js
@@ -8,6 +8,12 @@ const utils = require('../utils')
const casing = require('../utils/casing')
const allowedCaseOptions = ['camelCase', 'snake_case']
+/**
+ * @typedef {import('../utils').ComponentArrayProp} ComponentArrayProp
+ * @typedef {import('../utils').ComponentObjectProp} ComponentObjectProp
+ * @typedef {import('../utils').ComponentTypeProp} ComponentTypeProp
+ */
+
// ------------------------------------------------------------------------------
// Rule Definition
// ------------------------------------------------------------------------------
@@ -22,8 +28,11 @@ function create(context) {
// Public
// ----------------------------------------------------------------------
- return utils.executeOnVue(context, (obj) => {
- for (const item of utils.getComponentProps(obj)) {
+ /**
+ * @param {(ComponentArrayProp | ComponentObjectProp | ComponentTypeProp)[]} props
+ */
+ function processProps(props) {
+ for (const item of props) {
const propName = item.propName
if (propName == null) {
continue
@@ -39,7 +48,17 @@ function create(context) {
})
}
}
- })
+ }
+ return utils.compositingVisitors(
+ utils.defineScriptSetupVisitor(context, {
+ onDefinePropsEnter(_node, props) {
+ processProps(props)
+ }
+ }),
+ utils.executeOnVue(context, (obj) => {
+ processProps(utils.getComponentProps(obj))
+ })
+ )
}
// ------------------------------------------------------------------------------
diff --git a/tests/lib/rules/prop-name-casing.js b/tests/lib/rules/prop-name-casing.js
index 4815c4ebf..4226e2dc8 100644
--- a/tests/lib/rules/prop-name-casing.js
+++ b/tests/lib/rules/prop-name-casing.js
@@ -8,6 +8,7 @@
// Requirements
// ------------------------------------------------------------------------------
+const semver = require('semver')
const rule = require('../../../lib/rules/prop-name-casing')
const RuleTester = require('eslint').RuleTester
@@ -322,6 +323,44 @@ ruleTester.run('prop-name-casing', rule, {
`,
options: ['snake_case'],
parserOptions
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ parser: require.resolve('vue-eslint-parser'),
+ parserOptions
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ parser: require.resolve('vue-eslint-parser'),
+ parserOptions
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ parser: require.resolve('vue-eslint-parser'),
+ parserOptions: {
+ ...parserOptions,
+ parser: require.resolve('@typescript-eslint/parser')
+ }
}
],
@@ -580,6 +619,69 @@ ruleTester.run('prop-name-casing', rule, {
`,
parserOptions,
errors: ['Prop "/greeting-text/" is not in camelCase.']
- }
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ parser: require.resolve('vue-eslint-parser'),
+ parserOptions,
+ errors: [
+ {
+ message: 'Prop "greeting_text" is not in camelCase.',
+ line: 4
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ parser: require.resolve('vue-eslint-parser'),
+ parserOptions,
+ errors: [
+ {
+ message: 'Prop "greeting_text" is not in camelCase.',
+ line: 3
+ }
+ ]
+ },
+ ...(semver.lt(
+ require('@typescript-eslint/parser/package.json').version,
+ '4.0.0'
+ )
+ ? []
+ : [
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ parser: require.resolve('vue-eslint-parser'),
+ parserOptions: {
+ ...parserOptions,
+ parser: require.resolve('@typescript-eslint/parser')
+ },
+ errors: [
+ {
+ message: 'Prop "greeting_text" is not in camelCase.',
+ line: 4
+ }
+ ]
+ }
+ ])
]
})