valid-v-on.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. /**
  2. * @author Toru Nagashima
  3. * @copyright 2017 Toru Nagashima. All rights reserved.
  4. * See LICENSE file in root directory for full license.
  5. */
  6. 'use strict'
  7. // ------------------------------------------------------------------------------
  8. // Requirements
  9. // ------------------------------------------------------------------------------
  10. const utils = require('../utils')
  11. const keyAliases = require('../utils/key-aliases.json')
  12. // ------------------------------------------------------------------------------
  13. // Helpers
  14. // ------------------------------------------------------------------------------
  15. const VALID_MODIFIERS = new Set([
  16. 'stop', 'prevent', 'capture', 'self', 'ctrl', 'shift', 'alt', 'meta',
  17. 'native', 'once', 'left', 'right', 'middle', 'passive', 'esc', 'tab',
  18. 'enter', 'space', 'up', 'left', 'right', 'down', 'delete', 'exact'
  19. ])
  20. const VERB_MODIFIERS = new Set([
  21. 'stop', 'prevent'
  22. ])
  23. // https://www.w3.org/TR/uievents-key/
  24. const KEY_ALIASES = new Set(keyAliases)
  25. function isValidModifier (modifierNode, customModifiers) {
  26. const modifier = modifierNode.name
  27. return (
  28. // built-in aliases
  29. VALID_MODIFIERS.has(modifier) ||
  30. // keyCode
  31. Number.isInteger(parseInt(modifier, 10)) ||
  32. // keyAlias (an Unicode character)
  33. Array.from(modifier).length === 1 ||
  34. // keyAlias (special keys)
  35. KEY_ALIASES.has(modifier) ||
  36. // custom modifiers
  37. customModifiers.has(modifier)
  38. )
  39. }
  40. // ------------------------------------------------------------------------------
  41. // Rule Definition
  42. // ------------------------------------------------------------------------------
  43. module.exports = {
  44. meta: {
  45. type: 'problem',
  46. docs: {
  47. description: 'enforce valid `v-on` directives',
  48. category: 'essential',
  49. url: 'https://eslint.vuejs.org/rules/valid-v-on.html'
  50. },
  51. fixable: null,
  52. schema: [
  53. {
  54. type: 'object',
  55. properties: {
  56. modifiers: {
  57. type: 'array'
  58. }
  59. },
  60. additionalProperties: false
  61. }
  62. ]
  63. },
  64. create (context) {
  65. const options = context.options[0] || {}
  66. const customModifiers = new Set(options.modifiers || [])
  67. const sourceCode = context.getSourceCode()
  68. return utils.defineTemplateBodyVisitor(context, {
  69. "VAttribute[directive=true][key.name.name='on']" (node) {
  70. for (const modifier of node.key.modifiers) {
  71. if (!isValidModifier(modifier, customModifiers)) {
  72. context.report({
  73. node,
  74. loc: node.loc,
  75. message: "'v-on' directives don't support the modifier '{{modifier}}'.",
  76. data: { modifier: modifier.name }
  77. })
  78. }
  79. }
  80. if (
  81. !utils.hasAttributeValue(node) &&
  82. !node.key.modifiers.some(modifier => VERB_MODIFIERS.has(modifier.name))
  83. ) {
  84. if (node.value && sourceCode.getText(node.value.expression)) {
  85. const value = sourceCode.getText(node.value)
  86. context.report({
  87. node,
  88. loc: node.loc,
  89. message: 'Avoid using JavaScript keyword as "v-on" value: {{value}}.',
  90. data: { value }
  91. })
  92. } else {
  93. context.report({
  94. node,
  95. loc: node.loc,
  96. message: "'v-on' directives require a value or verb modifier (like 'stop' or 'prevent')."
  97. })
  98. }
  99. }
  100. }
  101. })
  102. }
  103. }