prop-name-casing.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. /**
  2. * @fileoverview Requires specific casing for the Prop name in Vue components
  3. * @author Yu Kimura
  4. */
  5. 'use strict'
  6. const utils = require('../utils')
  7. const casing = require('../utils/casing')
  8. const allowedCaseOptions = ['camelCase', 'snake_case']
  9. function canFixPropertyName (node, originalName) {
  10. // Can not fix of computed property names & shorthand
  11. if (node.computed || node.shorthand) {
  12. return false
  13. }
  14. const key = node.key
  15. // Can not fix of unknown types
  16. if (key.type !== 'Literal' && key.type !== 'Identifier') {
  17. return false
  18. }
  19. // Can fix of ASCII printable characters
  20. return originalName.match(/[ -~]+/)
  21. }
  22. // ------------------------------------------------------------------------------
  23. // Rule Definition
  24. // ------------------------------------------------------------------------------
  25. function create (context) {
  26. const options = context.options[0]
  27. const caseType = allowedCaseOptions.indexOf(options) !== -1 ? options : 'camelCase'
  28. const converter = casing.getConverter(caseType)
  29. // ----------------------------------------------------------------------
  30. // Public
  31. // ----------------------------------------------------------------------
  32. return utils.executeOnVue(context, (obj) => {
  33. const node = obj.properties.find(p =>
  34. p.type === 'Property' &&
  35. p.key.type === 'Identifier' &&
  36. p.key.name === 'props' &&
  37. (p.value.type === 'ObjectExpression' || p.value.type === 'ArrayExpression')
  38. )
  39. if (!node) return
  40. const items = node.value.type === 'ObjectExpression' ? node.value.properties : node.value.elements
  41. for (const item of items) {
  42. if (item.type !== 'Property') {
  43. return
  44. }
  45. if (item.computed) {
  46. if (item.key.type !== 'Literal') {
  47. // TemplateLiteral | Identifier(variable) | Expression(s)
  48. return
  49. }
  50. if (typeof item.key.value !== 'string') {
  51. // (boolean | null | number | RegExp) Literal
  52. return
  53. }
  54. }
  55. const propName = item.key.type === 'Literal' ? item.key.value : item.key.name
  56. const convertedName = converter(propName)
  57. if (convertedName !== propName) {
  58. context.report({
  59. node: item,
  60. message: 'Prop "{{name}}" is not in {{caseType}}.',
  61. data: {
  62. name: propName,
  63. caseType: caseType
  64. },
  65. fix: canFixPropertyName(item, propName) ? fixer => {
  66. return item.key.type === 'Literal'
  67. ? fixer.replaceText(item.key, item.key.raw.replace(item.key.value, convertedName))
  68. : fixer.replaceText(item.key, convertedName)
  69. } : undefined
  70. })
  71. }
  72. }
  73. })
  74. }
  75. // ------------------------------------------------------------------------------
  76. // Rule Definition
  77. // ------------------------------------------------------------------------------
  78. module.exports = {
  79. meta: {
  80. docs: {
  81. description: 'enforce specific casing for the Prop name in Vue components',
  82. category: undefined, // 'strongly-recommended'
  83. url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v4.5.0/docs/rules/prop-name-casing.md'
  84. },
  85. fixable: 'code', // null or "code" or "whitespace"
  86. schema: [
  87. {
  88. enum: allowedCaseOptions
  89. }
  90. ]
  91. },
  92. create
  93. }