Feb 20, 2025 · Feb 8, 2025 · Feb 16, 2025 · Feb 16, 2025 · Feb 16, 2025 · Feb 20, 2025
diff --git a/docs/rules/prop-name-casing.md b/docs/rules/prop-name-casing.md

 ```json
 {
  "vue/prop-name-casing": ["error", "camelCase" | "snake_case"]
  "vue/prop-name-casing": ["error",
    "camelCase" | "snake_case",
    {
      "ignoreProps": []
    }
  ]
 }
 ```

 - `"camelCase"` (default) ... Enforce property names in `props` to camel case.
 - `"snake_case"` ... Enforce property names in `props` to snake case.
 - `ignoreProps` (`string[]`) ... An array of prop names (or patterns) that don't need to follow the specified casing.

 ### `"snake_case"`


 </eslint-code-block>

 ### `"ignoreProps": ["foo-bar", "/^_[a-z]+/u"]`

 <eslint-code-block :rules="{'vue/prop-name-casing': ['error', 'camelCase', {
 ignoreProps: ['foo-bar', '/^_[a-z]+/u'] }]}">

 ```vue
 <script>
 export default {
  props: {
    /* ✓ GOOD */
    greetingText: String,
    'foo-bar': String,
    _uid: String,

    /* ✗ BAD */
    'greeting-text': String,
    greeting_text: String,
    foo_bar: String
  }
 }
 </script>
 ```

 </eslint-code-block>

 ## :couple: Related Rules

 - [vue/attribute-hyphenation](./attribute-hyphenation.md)
diff --git a/lib/rules/prop-name-casing.js b/lib/rules/prop-name-casing.js

 const utils = require('../utils')
 const casing = require('../utils/casing')
 const { toRegExp } = require('../utils/regexp')
 const allowedCaseOptions = ['camelCase', 'snake_case']

 /**
 /** @param {RuleContext} context */
 function create(context) {
  const options = context.options[0]
  /** @type {RegExp[]} */
  const ignoreProps = (context.options[1]?.ignoreProps || []).map(toRegExp)
  const caseType = allowedCaseOptions.includes(options) ? options : 'camelCase'
  const checker = casing.getChecker(caseType)

      if (propName == null) {
        continue
      }
      if (!checker(propName)) {
      if (!checker(propName) && !ignoreProps.some((re) => re.test(propName))) {
        context.report({
          node: item.node,
          messageId: 'invalidCase',
    schema: [
      {
        enum: allowedCaseOptions
      },
      {
        type: 'object',
        properties: {
          ignoreProps: {
            type: 'array',
            items: { type: 'string' },
            uniqueItems: true
          }
        },
        additionalProperties: false
      }
    ],
    messages: {
diff --git a/tests/lib/rules/prop-name-casing.js b/tests/lib/rules/prop-name-casing.js
      languageOptions
    },
    {
      //valiable computed property name does not warn
      //variable computed property name does not warn
      filename: 'test.vue',
      code: `
        export default {
      languageOptions
    },
    {
      //valiable computed property name does not warn
      //variable computed property name does not warn
      filename: 'test.vue',
      code: `
        export default {
          parser: require.resolve('@typescript-eslint/parser')
        }
      }
    },
    {
      filename: 'test.vue',
      code: `
        export default {
          props: {
            'ignored-pattern-test': String,
            ignored_prop: Number,
            validProp: Boolean
          }
        }
      `,
      options: [
        'camelCase',
        { ignoreProps: ['ignored_prop', '/^ignored-pattern-/'] }
      ],
      languageOptions
    }
  ],

              }
            ]
          }
        ])
        ]),
    {
      filename: 'test.vue',
      code: `
        export default {
          props: {
            notIgnored_prop: String,
            'other-pattern': Number,
            'pattern-valid': String
          }
        }
      `,
      options: ['camelCase', { ignoreProps: ['ignored_prop', '/^pattern-/'] }],
      languageOptions,
      errors: [
        {
          message: 'Prop "notIgnored_prop" is not in camelCase.',
          type: 'Property',
          line: 4
        },
        {
          message: 'Prop "other-pattern" is not in camelCase.',
          type: 'Property',
          line: 5
        }
      ]
    },
    {
      filename: 'test.vue',
      code: `
        export default {
          props: ['notIgnored_prop', 'pattern_invalid', 'validProp', 'pattern-valid']
        }
      `,
      options: ['camelCase', { ignoreProps: ['ignored_prop', '/^pattern-/'] }],
      languageOptions,
      errors: [
        {
          message: 'Prop "notIgnored_prop" is not in camelCase.',
          type: 'Literal',
          line: 3
        },
        {
          message: 'Prop "pattern_invalid" is not in camelCase.',
          type: 'Literal',
          line: 3
        }
      ]
    }
  ]
 })
Original file line number	Diff line number	Diff line change
Expand Up		@@ -39,12 +39,18 @@ export default {

		```json
		{
		"vue/prop-name-casing": ["error", "camelCase" \| "snake_case"]
		"vue/prop-name-casing": ["error",
		"camelCase" \| "snake_case",
		{
		"ignoreProps": []
		}
		]
		}
		```

		- `"camelCase"` (default) ... Enforce property names in `props` to camel case.
		- `"snake_case"` ... Enforce property names in `props` to snake case.
		- `ignoreProps` (`string[]`) ... An array of prop names (or patterns) that don't need to follow the specified casing.

		### `"snake_case"`

Expand All		@@ -67,6 +73,31 @@ export default {

		</eslint-code-block>

		### `"ignoreProps": ["foo-bar", "/^_[a-z]+/u"]`

		<eslint-code-block :rules="{'vue/prop-name-casing': ['error', 'camelCase', {
		ignoreProps: ['foo-bar', '/^_[a-z]+/u'] }]}">

		```vue
		<script>
		export default {
		props: {
		/* ✓ GOOD */
		greetingText: String,
		'foo-bar': String,
		_uid: String,

		/* ✗ BAD */
		'greeting-text': String,
		greeting_text: String,
		foo_bar: String
		}
		}
		</script>
		```

		</eslint-code-block>

		## :couple: Related Rules

		- [vue/attribute-hyphenation](./attribute-hyphenation.md)
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -6,6 +6,7 @@

		const utils = require('../utils')
		const casing = require('../utils/casing')
		const { toRegExp } = require('../utils/regexp')
		const allowedCaseOptions = ['camelCase', 'snake_case']

		/**
Expand All		@@ -15,6 +16,8 @@ const allowedCaseOptions = ['camelCase', 'snake_case']
		/** @param {RuleContext} context */
		function create(context) {
		const options = context.options[0]
		/** @type {RegExp[]} */
		const ignoreProps = (context.options[1]?.ignoreProps \|\| []).map(toRegExp)
		const caseType = allowedCaseOptions.includes(options) ? options : 'camelCase'
		const checker = casing.getChecker(caseType)

Expand All		@@ -27,7 +30,7 @@ function create(context) {
		if (propName == null) {
		continue
		}
		if (!checker(propName)) {
		if (!checker(propName) && !ignoreProps.some((re) => re.test(propName))) {
		context.report({
		node: item.node,
		messageId: 'invalidCase',
Expand DownExpand Up		@@ -64,6 +67,17 @@ module.exports = {
		schema: [
		{
		enum: allowedCaseOptions
		},
		{
		type: 'object',
		properties: {
		ignoreProps: {
		type: 'array',
		items: { type: 'string' },
		uniqueItems: true
		}
		},
		additionalProperties: false
		}
		],
		messages: {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -149,7 +149,7 @@ ruleTester.run('prop-name-casing', rule, {
		languageOptions
		},
		{
		//valiable computed property name does not warn
		//variable computed property name does not warn
		filename: 'test.vue',
		code: `
		export default {
Expand All		@@ -161,7 +161,7 @@ ruleTester.run('prop-name-casing', rule, {
		languageOptions
		},
		{
		//valiable computed property name does not warn
		//variable computed property name does not warn
		filename: 'test.vue',
		code: `
		export default {
Expand DownExpand Up		@@ -359,6 +359,23 @@ ruleTester.run('prop-name-casing', rule, {
		parser: require.resolve('@typescript-eslint/parser')
		}
		}
		},
		{
		filename: 'test.vue',
		code: `
		export default {
		props: {
		'ignored-pattern-test': String,
		ignored_prop: Number,
		validProp: Boolean
		}
		}
		`,
		options: [
		'camelCase',
		{ ignoreProps: ['ignored_prop', '/^ignored-pattern-/'] }
		],
		languageOptions
		}
		],

Expand DownExpand Up		@@ -686,6 +703,54 @@ ruleTester.run('prop-name-casing', rule, {
		}
		]
		}
		])
		]),
		{
		filename: 'test.vue',
		code: `
		export default {
		props: {
		notIgnored_prop: String,
		'other-pattern': Number,
		'pattern-valid': String
		}
		}
		`,
		options: ['camelCase', { ignoreProps: ['ignored_prop', '/^pattern-/'] }],
		languageOptions,
		errors: [
		{
		message: 'Prop "notIgnored_prop" is not in camelCase.',
		type: 'Property',
		line: 4
		},
		{
		message: 'Prop "other-pattern" is not in camelCase.',
		type: 'Property',
		line: 5
		}
		]
		},
		{
		filename: 'test.vue',
		code: `
		export default {
		props: ['notIgnored_prop', 'pattern_invalid', 'validProp', 'pattern-valid']
		}
		`,
		options: ['camelCase', { ignoreProps: ['ignored_prop', '/^pattern-/'] }],
		languageOptions,
		errors: [
		{
		message: 'Prop "notIgnored_prop" is not in camelCase.',
		type: 'Literal',
		line: 3
		},
		{
		message: 'Prop "pattern_invalid" is not in camelCase.',
		type: 'Literal',
		line: 3
		}
		]
		}
		]
		})