no-template-shadow.js 3.9 KB

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