component-name-in-template-casing.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. /**
  2. * @author Yosuke Ota
  3. * issue https://github.com/vuejs/eslint-plugin-vue/issues/250
  4. */
  5. 'use strict'
  6. // ------------------------------------------------------------------------------
  7. // Requirements
  8. // ------------------------------------------------------------------------------
  9. const utils = require('../utils')
  10. const casing = require('../utils/casing')
  11. const { toRegExp } = require('../utils/regexp')
  12. // -----------------------------------------------------------------------------
  13. // Helpers
  14. // -----------------------------------------------------------------------------
  15. const allowedCaseOptions = ['PascalCase', 'kebab-case']
  16. const defaultCase = 'PascalCase'
  17. // ------------------------------------------------------------------------------
  18. // Rule Definition
  19. // ------------------------------------------------------------------------------
  20. module.exports = {
  21. meta: {
  22. type: 'suggestion',
  23. docs: {
  24. description:
  25. 'enforce specific casing for the component naming style in template',
  26. categories: undefined,
  27. url: 'https://eslint.vuejs.org/rules/component-name-in-template-casing.html'
  28. },
  29. fixable: 'code',
  30. schema: [
  31. {
  32. enum: allowedCaseOptions
  33. },
  34. {
  35. type: 'object',
  36. properties: {
  37. ignores: {
  38. type: 'array',
  39. items: { type: 'string' },
  40. uniqueItems: true,
  41. additionalItems: false
  42. },
  43. registeredComponentsOnly: {
  44. type: 'boolean'
  45. }
  46. },
  47. additionalProperties: false
  48. }
  49. ]
  50. },
  51. /** @param {RuleContext} context */
  52. create(context) {
  53. const caseOption = context.options[0]
  54. const options = context.options[1] || {}
  55. const caseType =
  56. allowedCaseOptions.indexOf(caseOption) !== -1 ? caseOption : defaultCase
  57. /** @type {RegExp[]} */
  58. const ignores = (options.ignores || []).map(toRegExp)
  59. const registeredComponentsOnly = options.registeredComponentsOnly !== false
  60. const tokens =
  61. context.parserServices.getTemplateBodyTokenStore &&
  62. context.parserServices.getTemplateBodyTokenStore()
  63. /** @type { string[] } */
  64. const registeredComponents = []
  65. /**
  66. * Checks whether the given node is the verification target node.
  67. * @param {VElement} node element node
  68. * @returns {boolean} `true` if the given node is the verification target node.
  69. */
  70. function isVerifyTarget(node) {
  71. if (ignores.some((re) => re.test(node.rawName))) {
  72. // ignore
  73. return false
  74. }
  75. if (!registeredComponentsOnly) {
  76. // If the user specifies registeredComponentsOnly as false, it checks all component tags.
  77. if (
  78. (!utils.isHtmlElementNode(node) && !utils.isSvgElementNode(node)) ||
  79. utils.isHtmlWellKnownElementName(node.rawName) ||
  80. utils.isSvgWellKnownElementName(node.rawName)
  81. ) {
  82. return false
  83. }
  84. return true
  85. }
  86. // We only verify the components registered in the component.
  87. if (
  88. registeredComponents
  89. .filter((name) => casing.isPascalCase(name)) // When defining a component with PascalCase, you can use either case
  90. .some(
  91. (name) =>
  92. node.rawName === name || casing.pascalCase(node.rawName) === name
  93. )
  94. ) {
  95. return true
  96. }
  97. return false
  98. }
  99. let hasInvalidEOF = false
  100. return utils.defineTemplateBodyVisitor(
  101. context,
  102. {
  103. VElement(node) {
  104. if (hasInvalidEOF) {
  105. return
  106. }
  107. if (!isVerifyTarget(node)) {
  108. return
  109. }
  110. const name = node.rawName
  111. if (!casing.getChecker(caseType)(name)) {
  112. const startTag = node.startTag
  113. const open = tokens.getFirstToken(startTag)
  114. const casingName = casing.getExactConverter(caseType)(name)
  115. context.report({
  116. node: open,
  117. loc: open.loc,
  118. message: 'Component name "{{name}}" is not {{caseType}}.',
  119. data: {
  120. name,
  121. caseType
  122. },
  123. *fix(fixer) {
  124. yield fixer.replaceText(open, `<${casingName}`)
  125. const endTag = node.endTag
  126. if (endTag) {
  127. const endTagOpen = tokens.getFirstToken(endTag)
  128. yield fixer.replaceText(endTagOpen, `</${casingName}`)
  129. }
  130. }
  131. })
  132. }
  133. }
  134. },
  135. {
  136. Program(node) {
  137. hasInvalidEOF = utils.hasInvalidEOF(node)
  138. },
  139. ...(registeredComponentsOnly
  140. ? utils.executeOnVue(context, (obj) => {
  141. registeredComponents.push(
  142. ...utils.getRegisteredComponents(obj).map((n) => n.name)
  143. )
  144. })
  145. : {})
  146. }
  147. )
  148. }
  149. }