no-template-shadow.js 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. /**
  2. * @fileoverview Disallow variable declarations from shadowing variables declared in the outer scope.
  3. * @author Armano
  4. */
  5. 'use strict'
  6. // ------------------------------------------------------------------------------
  7. // Requirements
  8. // ------------------------------------------------------------------------------
  9. const utils = require('../utils')
  10. /**
  11. * @typedef {import('../utils').GroupName} GroupName
  12. */
  13. // ------------------------------------------------------------------------------
  14. // Rule Definition
  15. // ------------------------------------------------------------------------------
  16. /** @type {GroupName[]} */
  17. const GROUP_NAMES = [
  18. 'props',
  19. 'computed',
  20. 'data',
  21. 'asyncData',
  22. 'methods',
  23. 'setup'
  24. ]
  25. module.exports = {
  26. meta: {
  27. type: 'suggestion',
  28. docs: {
  29. description:
  30. 'disallow variable declarations from shadowing variables declared in the outer scope',
  31. categories: ['vue3-strongly-recommended', 'strongly-recommended'],
  32. url: 'https://eslint.vuejs.org/rules/no-template-shadow.html'
  33. },
  34. fixable: null,
  35. schema: []
  36. },
  37. /** @param {RuleContext} context */
  38. create(context) {
  39. /** @type {Set<string>} */
  40. const jsVars = new Set()
  41. /**
  42. * @typedef {object} ScopeStack
  43. * @property {ScopeStack | null} parent
  44. * @property {Identifier[]} nodes
  45. */
  46. /** @type {ScopeStack | null} */
  47. let scopeStack = null
  48. // ----------------------------------------------------------------------
  49. // Public
  50. // ----------------------------------------------------------------------
  51. return utils.compositingVisitors(
  52. utils.isScriptSetup(context)
  53. ? {
  54. Program() {
  55. const globalScope =
  56. context.getSourceCode().scopeManager.globalScope
  57. if (!globalScope) {
  58. return
  59. }
  60. for (const variable of globalScope.variables) {
  61. if (variable.defs.length > 0) {
  62. jsVars.add(variable.name)
  63. }
  64. }
  65. const moduleScope = globalScope.childScopes.find(
  66. (scope) => scope.type === 'module'
  67. )
  68. if (!moduleScope) {
  69. return
  70. }
  71. for (const variable of moduleScope.variables) {
  72. if (variable.defs.length > 0) {
  73. jsVars.add(variable.name)
  74. }
  75. }
  76. }
  77. }
  78. : {},
  79. utils.defineScriptSetupVisitor(context, {
  80. onDefinePropsEnter(_node, props) {
  81. for (const prop of props) {
  82. if (prop.propName) {
  83. jsVars.add(prop.propName)
  84. }
  85. }
  86. }
  87. }),
  88. utils.executeOnVue(context, (obj) => {
  89. const properties = Array.from(
  90. utils.iterateProperties(obj, new Set(GROUP_NAMES))
  91. )
  92. for (const node of properties) {
  93. jsVars.add(node.name)
  94. }
  95. }),
  96. utils.defineTemplateBodyVisitor(context, {
  97. /** @param {VElement} node */
  98. VElement(node) {
  99. scopeStack = {
  100. parent: scopeStack,
  101. nodes: scopeStack ? [...scopeStack.nodes] : []
  102. }
  103. for (const variable of node.variables) {
  104. const varNode = variable.id
  105. const name = varNode.name
  106. if (
  107. scopeStack.nodes.some((node) => node.name === name) ||
  108. jsVars.has(name)
  109. ) {
  110. context.report({
  111. node: varNode,
  112. loc: varNode.loc,
  113. message:
  114. "Variable '{{name}}' is already declared in the upper scope.",
  115. data: {
  116. name
  117. }
  118. })
  119. } else {
  120. scopeStack.nodes.push(varNode)
  121. }
  122. }
  123. },
  124. 'VElement:exit'() {
  125. scopeStack = scopeStack && scopeStack.parent
  126. }
  127. })
  128. )
  129. }
  130. }