this-in-template.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. /**
  2. * @fileoverview enforce 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. docs: {
  17. description: 'enforce usage of `this` in template',
  18. category: 'recommended',
  19. url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v4.7.1/docs/rules/this-in-template.md'
  20. },
  21. fixable: null,
  22. schema: [
  23. {
  24. enum: ['always', 'never']
  25. }
  26. ]
  27. },
  28. /**
  29. * Creates AST event handlers for this-in-template.
  30. *
  31. * @param {RuleContext} context - The rule context.
  32. * @returns {Object} AST event handlers.
  33. */
  34. create (context) {
  35. const options = context.options[0] !== 'always' ? 'never' : 'always'
  36. let scope = {
  37. parent: null,
  38. nodes: []
  39. }
  40. return utils.defineTemplateBodyVisitor(context, Object.assign({
  41. VElement (node) {
  42. scope = {
  43. parent: scope,
  44. nodes: scope.nodes.slice() // make copy
  45. }
  46. if (node.variables) {
  47. for (const variable of node.variables) {
  48. const varNode = variable.id
  49. const name = varNode.name
  50. if (!scope.nodes.some(node => node.name === name)) { // Prevent adding duplicates
  51. scope.nodes.push(varNode)
  52. }
  53. }
  54. }
  55. },
  56. 'VElement:exit' (node) {
  57. scope = scope.parent
  58. }
  59. }, options === 'never'
  60. ? {
  61. 'VExpressionContainer MemberExpression > ThisExpression' (node) {
  62. const propertyName = utils.getStaticPropertyName(node.parent.property)
  63. if (!propertyName ||
  64. scope.nodes.some(el => el.name === propertyName) ||
  65. RESERVED_NAMES.has(propertyName) || // this.class | this['class']
  66. /^[0-9].*$|[^a-zA-Z0-9_]/.test(propertyName) // this['0aaaa'] | this['foo-bar bas']
  67. ) {
  68. return
  69. }
  70. context.report({
  71. node,
  72. loc: node.loc,
  73. message: "Unexpected usage of 'this'."
  74. })
  75. }
  76. }
  77. : {
  78. 'VExpressionContainer' (node) {
  79. if (node.references) {
  80. for (const reference of node.references) {
  81. if (!scope.nodes.some(el => el.name === reference.id.name)) {
  82. context.report({
  83. node: reference.id,
  84. loc: reference.id.loc,
  85. message: "Expected 'this'."
  86. })
  87. }
  88. }
  89. }
  90. }
  91. }
  92. ))
  93. }
  94. }