prop-name-casing.js 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  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, key, originalName) {
  10. // Can not fix of computed property names & shorthand
  11. if (node.computed || node.shorthand) {
  12. return false
  13. }
  14. // Can not fix of unknown types
  15. if (key.type !== 'Literal' && key.type !== 'Identifier') {
  16. return false
  17. }
  18. // Can fix of ASCII printable characters
  19. return originalName.match(/[ -~]+/)
  20. }
  21. // ------------------------------------------------------------------------------
  22. // Rule Definition
  23. // ------------------------------------------------------------------------------
  24. function create (context) {
  25. const options = context.options[0]
  26. const caseType = allowedCaseOptions.indexOf(options) !== -1 ? options : 'camelCase'
  27. const converter = casing.getConverter(caseType)
  28. // ----------------------------------------------------------------------
  29. // Public
  30. // ----------------------------------------------------------------------
  31. return utils.executeOnVue(context, (obj) => {
  32. const props = utils.getComponentProps(obj)
  33. .filter(prop => prop.key && (prop.key.type === 'Literal' || (prop.key.type === 'Identifier' && !prop.node.computed)))
  34. for (const item of props) {
  35. const propName = item.key.type === 'Literal' ? item.key.value : item.key.name
  36. if (typeof propName !== 'string') {
  37. // (boolean | null | number | RegExp) Literal
  38. continue
  39. }
  40. const convertedName = converter(propName)
  41. if (convertedName !== propName) {
  42. context.report({
  43. node: item.node,
  44. message: 'Prop "{{name}}" is not in {{caseType}}.',
  45. data: {
  46. name: propName,
  47. caseType: caseType
  48. },
  49. fix: canFixPropertyName(item.node, item.key, propName) ? fixer => {
  50. return item.key.type === 'Literal'
  51. ? fixer.replaceText(item.key, item.key.raw.replace(item.key.value, convertedName))
  52. : fixer.replaceText(item.key, convertedName)
  53. } : undefined
  54. })
  55. }
  56. }
  57. })
  58. }
  59. // ------------------------------------------------------------------------------
  60. // Rule Definition
  61. // ------------------------------------------------------------------------------
  62. module.exports = {
  63. meta: {
  64. type: 'suggestion',
  65. docs: {
  66. description: 'enforce specific casing for the Prop name in Vue components',
  67. category: 'strongly-recommended',
  68. url: 'https://eslint.vuejs.org/rules/prop-name-casing.html'
  69. },
  70. fixable: 'code', // null or "code" or "whitespace"
  71. schema: [
  72. {
  73. enum: allowedCaseOptions
  74. }
  75. ]
  76. },
  77. create
  78. }