no-template-shadow.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  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']
  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.defineTemplateBodyVisitor(
  45. context,
  46. {
  47. /** @param {VElement} node */
  48. VElement(node) {
  49. scopeStack = {
  50. parent: scopeStack,
  51. nodes: scopeStack
  52. ? scopeStack.nodes.slice() // make copy
  53. : []
  54. }
  55. if (node.variables) {
  56. for (const variable of node.variables) {
  57. const varNode = variable.id
  58. const name = varNode.name
  59. if (
  60. scopeStack.nodes.some((node) => node.name === name) ||
  61. jsVars.has(name)
  62. ) {
  63. context.report({
  64. node: varNode,
  65. loc: varNode.loc,
  66. message:
  67. "Variable '{{name}}' is already declared in the upper scope.",
  68. data: {
  69. name
  70. }
  71. })
  72. } else {
  73. scopeStack.nodes.push(varNode)
  74. }
  75. }
  76. }
  77. },
  78. 'VElement:exit'() {
  79. scopeStack = scopeStack && scopeStack.parent
  80. }
  81. },
  82. utils.executeOnVue(context, (obj) => {
  83. const properties = Array.from(
  84. utils.iterateProperties(obj, new Set(GROUP_NAMES))
  85. )
  86. for (const node of properties) {
  87. jsVars.add(node.name)
  88. }
  89. })
  90. )
  91. }
  92. }