this-in-template.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  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. category: '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. let scope = {
  38. parent: null,
  39. nodes: []
  40. }
  41. return utils.defineTemplateBodyVisitor(context, Object.assign({
  42. VElement (node) {
  43. scope = {
  44. parent: scope,
  45. nodes: scope.nodes.slice() // make copy
  46. }
  47. if (node.variables) {
  48. for (const variable of node.variables) {
  49. const varNode = variable.id
  50. const name = varNode.name
  51. if (!scope.nodes.some(node => node.name === name)) { // Prevent adding duplicates
  52. scope.nodes.push(varNode)
  53. }
  54. }
  55. }
  56. },
  57. 'VElement:exit' (node) {
  58. scope = scope.parent
  59. }
  60. }, options === 'never'
  61. ? {
  62. 'VExpressionContainer MemberExpression > ThisExpression' (node) {
  63. const propertyName = utils.getStaticPropertyName(node.parent.property)
  64. if (!propertyName ||
  65. scope.nodes.some(el => el.name === propertyName) ||
  66. RESERVED_NAMES.has(propertyName) || // this.class | this['class']
  67. /^[0-9].*$|[^a-zA-Z0-9_]/.test(propertyName) // this['0aaaa'] | this['foo-bar bas']
  68. ) {
  69. return
  70. }
  71. context.report({
  72. node,
  73. loc: node.loc,
  74. message: "Unexpected usage of 'this'."
  75. })
  76. }
  77. }
  78. : {
  79. 'VExpressionContainer' (node) {
  80. if (node.references) {
  81. for (const reference of node.references) {
  82. if (!scope.nodes.some(el => el.name === reference.id.name)) {
  83. context.report({
  84. node: reference.id,
  85. loc: reference.id.loc,
  86. message: "Expected 'this'."
  87. })
  88. }
  89. }
  90. }
  91. }
  92. }
  93. ))
  94. }
  95. }