this-in-template.js 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  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: null,
  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. message: "Unexpected usage of 'this'."
  87. })
  88. }
  89. }
  90. : {
  91. /** @param {VExpressionContainer} node */
  92. VExpressionContainer(node) {
  93. if (!scopeStack) {
  94. return
  95. }
  96. if (node.parent.type === 'VDirectiveKey') {
  97. // We cannot use `.` in dynamic arguments because the right of the `.` becomes a modifier.
  98. // For example, In `:[this.prop]` case, `:[this` is an argument and `prop]` is a modifier.
  99. return
  100. }
  101. if (node.references) {
  102. for (const reference of node.references) {
  103. if (
  104. !scopeStack.nodes.some(
  105. (el) => el.name === reference.id.name
  106. )
  107. ) {
  108. context.report({
  109. node: reference.id,
  110. loc: reference.id.loc,
  111. message: "Expected 'this'."
  112. })
  113. }
  114. }
  115. }
  116. }
  117. })
  118. })
  119. }
  120. }