this-in-template.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. /**
  2. * @fileoverview disallow usage of `this` in template.
  3. * @author Armano
  4. */
  5. 'use strict'
  6. // ------------------------------------------------------------------------------
  7. // Requirements
  8. // ------------------------------------------------------------------------------
  9. const utils = require('../utils')
  10. const RESERVED_NAMES = new Set(require('../utils/js-reserved.json'))
  11. // ------------------------------------------------------------------------------
  12. // Rule Definition
  13. // ------------------------------------------------------------------------------
  14. module.exports = {
  15. meta: {
  16. type: 'suggestion',
  17. docs: {
  18. description: 'disallow usage of `this` in template',
  19. categories: ['vue3-recommended', 'recommended'],
  20. url: 'https://eslint.vuejs.org/rules/this-in-template.html'
  21. },
  22. fixable: 'code',
  23. schema: [
  24. {
  25. enum: ['always', 'never']
  26. }
  27. ]
  28. },
  29. /**
  30. * Creates AST event handlers for this-in-template.
  31. *
  32. * @param {RuleContext} context - The rule context.
  33. * @returns {Object} AST event handlers.
  34. */
  35. create(context) {
  36. const options = context.options[0] !== 'always' ? 'never' : 'always'
  37. /**
  38. * @typedef {object} ScopeStack
  39. * @property {ScopeStack | null} parent
  40. * @property {Identifier[]} nodes
  41. */
  42. /** @type {ScopeStack | null} */
  43. let scopeStack = null
  44. return utils.defineTemplateBodyVisitor(context, {
  45. /** @param {VElement} node */
  46. VElement(node) {
  47. scopeStack = {
  48. parent: scopeStack,
  49. nodes: scopeStack
  50. ? scopeStack.nodes.slice() // make copy
  51. : []
  52. }
  53. if (node.variables) {
  54. for (const variable of node.variables) {
  55. const varNode = variable.id
  56. const name = varNode.name
  57. if (!scopeStack.nodes.some((node) => node.name === name)) {
  58. // Prevent adding duplicates
  59. scopeStack.nodes.push(varNode)
  60. }
  61. }
  62. }
  63. },
  64. 'VElement:exit'() {
  65. scopeStack = scopeStack && scopeStack.parent
  66. },
  67. ...(options === 'never'
  68. ? {
  69. /** @param { ThisExpression & { parent: MemberExpression } } node */
  70. 'VExpressionContainer MemberExpression > ThisExpression'(node) {
  71. if (!scopeStack) {
  72. return
  73. }
  74. const propertyName = utils.getStaticPropertyName(node.parent)
  75. if (
  76. !propertyName ||
  77. scopeStack.nodes.some((el) => el.name === propertyName) ||
  78. RESERVED_NAMES.has(propertyName) || // this.class | this['class']
  79. /^[0-9].*$|[^a-zA-Z0-9_$]/.test(propertyName) // this['0aaaa'] | this['foo-bar bas']
  80. ) {
  81. return
  82. }
  83. context.report({
  84. node,
  85. loc: node.loc,
  86. fix(fixer) {
  87. // node.parent should be some code like `this.test`, `this?.['result']`
  88. return fixer.replaceText(node.parent, propertyName)
  89. },
  90. message: "Unexpected usage of 'this'."
  91. })
  92. }
  93. }
  94. : {
  95. /** @param {VExpressionContainer} node */
  96. VExpressionContainer(node) {
  97. if (!scopeStack) {
  98. return
  99. }
  100. if (node.parent.type === 'VDirectiveKey') {
  101. // We cannot use `.` in dynamic arguments because the right of the `.` becomes a modifier.
  102. // For example, In `:[this.prop]` case, `:[this` is an argument and `prop]` is a modifier.
  103. return
  104. }
  105. if (node.references) {
  106. for (const reference of node.references) {
  107. if (
  108. !scopeStack.nodes.some(
  109. (el) => el.name === reference.id.name
  110. )
  111. ) {
  112. context.report({
  113. node: reference.id,
  114. loc: reference.id.loc,
  115. message: "Expected 'this'.",
  116. fix(fixer) {
  117. return fixer.insertTextBefore(reference.id, 'this.')
  118. }
  119. })
  120. }
  121. }
  122. }
  123. }
  124. })
  125. })
  126. }
  127. }