Repository: vuejs/eslint-plugin-vue
Pull request #1079 (2020-03-17 15:02:05)

New: Add `vue/no-deprecated-v-on-number-modifiers` rule
This PR adds the `vue/no-deprecated-v-on-number-modifiers` rule.

This rule reports use of deprecated `KeyboardEvent.keyCode` modifier on `v-on` directive

ref #1035

yoyo930021: @ota-meshi 
![Screen Shot 2020-03-19 at 5 29 17 PM](https://user-images.githubusercontent.com/9126398/77052043-34b7d680-6a07-11ea-9a24-c73f5284870d.png)


Patch:
diff --git a/docs/.vuepress/components/eslint-code-block.vue b/docs/.vuepress/components/eslint-code-block.vue
index ab33abdf..fed685d9 100644
--- a/docs/.vuepress/components/eslint-code-block.vue
+++ b/docs/.vuepress/components/eslint-code-block.vue
@@ -18,8 +18,7 @@
 </template>
 
 <script>
-// https://github.com/vuejs/vuepress/issues/451
-import EslintEditor from '../../../node_modules/vue-eslint-editor'
+import EslintEditor from 'vue-eslint-editor'
 import { rules, processors } from '../../../'
 
 export default {
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 0b78e7eb..a6756baa 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -66,12 +66,18 @@ module.exports = {
   base: '/',
   title: 'eslint-plugin-vue',
   description: 'Official ESLint plugin for Vue.js',
-  serviceWorker: true,
   evergreen: true,
   head: [
     ['link', { rel: 'icon', href: '/favicon.png' }]
   ],
 
+  plugins: {
+    '@vuepress/pwa': {
+      serviceWorker: true,
+      updatePopup: true
+    }
+  },
+
   themeConfig: {
     repo: 'vuejs/eslint-plugin-vue',
     docsRepo: 'vuejs/eslint-plugin-vue',
@@ -79,9 +85,6 @@ module.exports = {
     docsBranch: 'master',
     editLinks: true,
     lastUpdated: true,
-    serviceWorker: {
-      updatePopup: true
-    },
 
     nav: [
       { text: 'User Guide', link: '/user-guide/' },
diff --git a/docs/.vuepress/style.styl b/docs/.vuepress/styles/index.styl
similarity index 81%
rename from docs/.vuepress/style.styl
rename to docs/.vuepress/styles/index.styl
index 564ebd26..48680bbf 100644
--- a/docs/.vuepress/style.styl
+++ b/docs/.vuepress/styles/index.styl
@@ -1,4 +1,4 @@
-.theme-container.rule-details .content > h1 {
+.theme-container.rule-details .theme-default-content > h1 {
   font-size: 1.8rem;
 
   + blockquote {
diff --git a/docs/.vuepress/theme/index.js b/docs/.vuepress/theme/index.js
new file mode 100644
index 00000000..b91b8a57
--- /dev/null
+++ b/docs/.vuepress/theme/index.js
@@ -0,0 +1,3 @@
+module.exports = {
+  extend: '@vuepress/theme-default'
+}
diff --git a/docs/.vuepress/theme/Layout.vue b/docs/.vuepress/theme/layouts/Layout.vue
similarity index 83%
rename from docs/.vuepress/theme/Layout.vue
rename to docs/.vuepress/theme/layouts/Layout.vue
index 78dab76f..b88c846c 100644
--- a/docs/.vuepress/theme/Layout.vue
+++ b/docs/.vuepress/theme/layouts/Layout.vue
@@ -12,7 +12,7 @@
     />
     <template
       slot="page-top">
-      <div class="content beta-doc-description">
+      <div class="theme-default-content beta-doc-description">
         <div class="warning custom-block">
           <p class="custom-block-title">Note</p>
           <p>This is a documentation for version <code>{{docVersion}}</code>.<template v-if="hasNotYetBeenReleased"> Also, this documentation may contain content that has not yet been released.</template><br>
@@ -30,14 +30,16 @@
     />
   </BaseLayout>
 </template>
+
 <script>
 /**
  * Layout definition to navigate to older versions of the document.
  */
-import BaseLayout from 'vuepress/lib/default-theme/Layout.vue'
+import BaseLayout from '@vuepress/theme-default/layouts/Layout.vue'
 import semver from 'semver'
-const version = semver.parse(require('../../../package.json').version)
+const version = semver.parse(require('../../../../package.json').version)
 export default {
+  name: 'MyLayout',
   components: {
     BaseLayout
   },
@@ -63,14 +65,15 @@ export default {
   }
 }
 </script>
+
 <style scoped>
 .beta-doc-description {
   padding-bottom: 0;
 }
-* ::v-deep .content ~ .content {
+* ::v-deep .theme-default-content ~ .theme-default-content {
   padding-top: 0;
 }
-* ::v-deep .content:not(.custom) h1{
+* ::v-deep .theme-default-content:not(.custom) h1{
   margin-top: -3.1rem;
 }
 </style>
diff --git a/docs/rules/README.md b/docs/rules/README.md
index e184873e..99bc361e 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -2,10 +2,10 @@
 sidebarDepth: 0
 ---
 
-<!-- This file is automatically generated in tools/update-docs-rules-index.js, do not change! -->
-
 # Available rules
 
+<!-- This file is automatically generated in tools/update-docs-rules-index.js, do not change! -->
+
 ::: tip Legend
   :wrench: Indicates that the rule is fixable, and using `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the reported problems.
 :::
@@ -44,6 +44,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 | [vue/no-deprecated-slot-attribute](./no-deprecated-slot-attribute.md) | disallow deprecated `slot` attribute (in Vue.js 2.6.0+) | :wrench: |
 | [vue/no-deprecated-slot-scope-attribute](./no-deprecated-slot-scope-attribute.md) | disallow deprecated `slot-scope` attribute (in Vue.js 2.6.0+) | :wrench: |
 | [vue/no-deprecated-v-bind-sync](./no-deprecated-v-bind-sync.md) | disallow use of deprecated `.sync` modifier on `v-bind` directive (in Vue.js 3.0.0+) | :wrench: |
+| [vue/no-deprecated-v-on-number-modifiers](./no-deprecated-v-on-number-modifiers.md) | disallow using deprecated number (keycode) modifiers | :wrench: |
 | [vue/no-dupe-keys](./no-dupe-keys.md) | disallow duplication of field names |  |
 | [vue/no-duplicate-attributes](./no-duplicate-attributes.md) | disallow duplication of attributes |  |
 | [vue/no-lifecycle-after-await](./no-lifecycle-after-await.md) | disallow asynchronously registered lifecycle hooks |  |
diff --git a/docs/rules/no-deprecated-v-on-number-modifiers.md b/docs/rules/no-deprecated-v-on-number-modifiers.md
new file mode 100644
index 00000000..5ecba24a
--- /dev/null
+++ b/docs/rules/no-deprecated-v-on-number-modifiers.md
@@ -0,0 +1,52 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-deprecated-v-on-number-modifiers
+description: disallow using deprecated number (keycode) modifiers (in Vue.js 3.0.0+)
+---
+# vue/no-deprecated-v-on-number-modifiers
+> disallow using deprecated number (keycode) modifiers (in Vue.js 3.0.0+)
+
+- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule reports use of deprecated `KeyboardEvent.keyCode` modifier on `v-on` directive (in Vue.js 3.0.0+)
+
+<eslint-code-block fix :rules="{'vue/no-deprecated-v-on-number-modifiers': ['error']}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <input v-on:keyup.page-down="onArrowUp">
+  <input @keyup.page-down="onArrowUp">
+  <input @keyup.9="onArrowUp"> <!-- 9 is KeyboardEvent.key -->
+
+
+  <!-- ✗ BAD -->
+  <input v-on:keyup.34="onArrowUp">
+  <input @keyup.34="onArrowUp">
+</template>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :couple: Related rules
+
+- [valid-v-on]
+
+[valid-v-on]: valid-v-on.md
+
+## :books: Further reading
+
+- [RFC: drop keycode support](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0014-drop-keycode-support.md)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-deprecated-v-on-number-modifiers.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-deprecated-v-on-number-modifiers.js)
diff --git a/docs/rules/no-unused-vars.md b/docs/rules/no-unused-vars.md
index 321aede1..4d5d9ee2 100644
--- a/docs/rules/no-unused-vars.md
+++ b/docs/rules/no-unused-vars.md
@@ -35,14 +35,18 @@ This rule report variable definitions of v-for directives or scope attributes if
 
 ```js
 {
-    "vue/no-unsed-vars": [{
-        "ignorePattern": '^_',
+    "vue/no-unused-vars": ["error", {
+        "ignorePattern": "^_"
     }]
 }
 ```
+
 - `ignorePattern` ... disables reporting when your definitions of v-for directives or scope attributes match your ignorePattern Regular expression. default `null`, will ignore nothing
+
 ## :rocket: Suggestion
+
 - When your ignorePattern set to `^_`, we could provide a suggestion which add a prefix`_` to your variable and no more eslint error
+
 ## :mag: Implementation
 
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-unused-vars.js)
diff --git a/lib/configs/vue3-essential.js b/lib/configs/vue3-essential.js
index 3e45ddd2..1b0c23e0 100644
--- a/lib/configs/vue3-essential.js
+++ b/lib/configs/vue3-essential.js
@@ -12,6 +12,7 @@ module.exports = {
     'vue/no-deprecated-slot-attribute': 'error',
     'vue/no-deprecated-slot-scope-attribute': 'error',
     'vue/no-deprecated-v-bind-sync': 'error',
+    'vue/no-deprecated-v-on-number-modifiers': 'error',
     'vue/no-dupe-keys': 'error',
     'vue/no-duplicate-attributes': 'error',
     'vue/no-lifecycle-after-await': 'error',
diff --git a/lib/index.js b/lib/index.js
index 10e2e876..df70ec82 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -45,6 +45,7 @@ module.exports = {
     'no-deprecated-slot-attribute': require('./rules/no-deprecated-slot-attribute'),
     'no-deprecated-slot-scope-attribute': require('./rules/no-deprecated-slot-scope-attribute'),
     'no-deprecated-v-bind-sync': require('./rules/no-deprecated-v-bind-sync'),
+    'no-deprecated-v-on-number-modifiers': require('./rules/no-deprecated-v-on-number-modifiers'),
     'no-dupe-keys': require('./rules/no-dupe-keys'),
     'no-duplicate-attributes': require('./rules/no-duplicate-attributes'),
     'no-empty-pattern': require('./rules/no-empty-pattern'),
diff --git a/lib/rules/no-deprecated-v-on-number-modifiers.js b/lib/rules/no-deprecated-v-on-number-modifiers.js
new file mode 100644
index 00000000..651991cd
--- /dev/null
+++ b/lib/rules/no-deprecated-v-on-number-modifiers.js
@@ -0,0 +1,58 @@
+/**
+ * @fileoverview disallow using deprecated number (keycode) modifiers
+ * @author yoyo930021
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const utils = require('../utils')
+const keyCodeToKey = require('../utils/keycode-to-key.json')
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'disallow using deprecated number (keycode) modifiers',
+      categories: ['vue3-essential'],
+      url: 'https://eslint.vuejs.org/rules/no-deprecated-v-on-number-modifiers.html'
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      numberModifierIsDeprecated: "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."
+    }
+  },
+
+  create (context) {
+    return utils.defineTemplateBodyVisitor(context, {
+      "VAttribute[directive=true][key.name.name='on']" (node) {
+        const modifier = node.key.modifiers.find(mod => Number.isInteger(parseInt(mod.name, 10)))
+        if (!modifier) return
+
+        const keyCodes = parseInt(modifier.name, 10)
+        if (
+          keyCodes > 9 || keyCodes < 0
+        ) {
+          context.report({
+            node,
+            loc: node.loc,
+            messageId: 'numberModifierIsDeprecated',
+            fix: (fixer) => {
+              const key = keyCodeToKey[keyCodes]
+              if (!key) return
+
+              return fixer.replaceTextRange(modifier.range, `${key}`)
+            }
+          })
+        }
+      }
+    })
+  }
+}
diff --git a/lib/utils/keycode-to-key.json b/lib/utils/keycode-to-key.json
new file mode 100644
index 00000000..43f48030
--- /dev/null
+++ b/lib/utils/keycode-to-key.json
@@ -0,0 +1,100 @@
+{
+  "8": "backspace",
+  "9": "tab",
+  "13": "enter",
+  "16": "shift",
+  "17": "ctrl",
+  "18": "alt",
+  "19": "pause-break",
+  "20": "caps-lock",
+  "27": "escape",
+  "33": "page-up",
+  "34": "page-down",
+  "35": "end",
+  "36": "home",
+  "37": "left-arrow",
+  "38": "up-arrow",
+  "39": "right-arrow",
+  "40": "down-arrow",
+  "45": "insert",
+  "46": "delete",
+  "48": "0",
+  "49": "1",
+  "50": "2",
+  "51": "3",
+  "52": "4",
+  "53": "5",
+  "54": "6",
+  "55": "7",
+  "56": "8",
+  "57": "9",
+  "65": "a",
+  "66": "b",
+  "67": "c",
+  "68": "d",
+  "69": "e",
+  "70": "f",
+  "71": "g",
+  "72": "h",
+  "73": "i",
+  "74": "j",
+  "75": "k",
+  "76": "l",
+  "77": "m",
+  "78": "n",
+  "79": "o",
+  "80": "p",
+  "81": "q",
+  "82": "r",
+  "83": "s",
+  "84": "t",
+  "85": "u",
+  "86": "v",
+  "87": "w",
+  "88": "x",
+  "89": "y",
+  "90": "z",
+  "91": "left-window-key",
+  "92": "right-window-key",
+  "93": "select-key",
+  "96": "numpad-0",
+  "97": "numpad-1",
+  "98": "numpad-2",
+  "99": "numpad-3",
+  "100": "numpad-4",
+  "101": "numpad-5",
+  "102": "numpad-6",
+  "103": "numpad-7",
+  "104": "numpad-8",
+  "105": "numpad-9",
+  "106": "multiply",
+  "107": "add",
+  "109": "subtract",
+  "110": "decimal-point",
+  "111": "divide",
+  "112": "f1",
+  "113": "f2",
+  "114": "f3",
+  "115": "f4",
+  "116": "f5",
+  "117": "f6",
+  "118": "f7",
+  "119": "f8",
+  "120": "f9",
+  "121": "f10",
+  "122": "f11",
+  "123": "f12",
+  "144": "num-lock",
+  "145": "scroll-lock",
+  "186": "semi-colon",
+  "187": "equal-sign",
+  "188": "comma",
+  "189": "dash",
+  "190": "period",
+  "191": "forward-slash",
+  "192": "grave-accent",
+  "219": "open-bracket",
+  "220": "back-slash",
+  "221": "close-braket",
+  "222": "single-quote"
+}
diff --git a/package.json b/package.json
index c6bde732..2d568134 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
   "devDependencies": {
     "@types/node": "^4.2.16",
     "@typescript-eslint/parser": "^2.6.1",
+    "@vuepress/plugin-pwa": "^1.4.0",
     "acorn": "^7.1.0",
     "babel-eslint": "^10.0.2",
     "chai": "^4.1.0",
@@ -66,12 +67,12 @@
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-vue": "file:.",
     "eslint-plugin-vue-libs": "^4.0.0",
-    "eslint4b": "^6.6.0",
+    "eslint4b": "^6.8.0",
     "lodash": "^4.17.4",
     "mocha": "^5.2.0",
     "nyc": "^12.0.2",
     "typescript": "^3.5.2",
-    "vue-eslint-editor": "^0.1.4",
-    "vuepress": "^0.14.5"
+    "vue-eslint-editor": "^1.1.0",
+    "vuepress": "^1.4.0"
   }
 }
diff --git a/tools/update-docs-rules-index.js b/tools/update-docs-rules-index.js
index e2283b3b..23b1172b 100644
--- a/tools/update-docs-rules-index.js
+++ b/tools/update-docs-rules-index.js
@@ -94,10 +94,10 @@ fs.writeFileSync(
 sidebarDepth: 0
 ---
 
-<!-- This file is automatically generated in tools/update-docs-rules-index.js, do not change! -->
-
 # Available rules
 
+<!-- This file is automatically generated in tools/update-docs-rules-index.js, do not change! -->
+
 ::: tip Legend
   :wrench: Indicates that the rule is fixable, and using \`--fix\` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the reported problems.
 :::


Test patch:
diff --git a/tests/lib/rules/no-deprecated-v-on-number-modifiers.js b/tests/lib/rules/no-deprecated-v-on-number-modifiers.js
new file mode 100644
index 00000000..8c6d7269
--- /dev/null
+++ b/tests/lib/rules/no-deprecated-v-on-number-modifiers.js
@@ -0,0 +1,174 @@
+/**
+ * @fileoverview disallow using deprecated number (keyCodes) modifiers
+ * @author yoyo930021
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const rule = require('../../../lib/rules/no-deprecated-v-on-number-modifiers')
+const RuleTester = require('eslint').RuleTester
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+const ruleTester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: { ecmaVersion: 2015 }
+})
+
+ruleTester.run('no-deprecated-v-bind-sync', rule, {
+
+  valid: [
+    {
+      filename: 'test.vue',
+      code: "<template><input v-on:keyup.page-down='onArrowUp'></template>"
+    },
+    {
+      filename: 'test.vue',
+      code: "<template><input @keyup.page-down='onArrowUp'></template>"
+    },
+    {
+      filename: 'test.vue',
+      code: "<template><input v-on:keyup.9='onArrowUp'></template>"
+    },
+    {
+      filename: 'test.vue',
+      code: "<template><input @keyup.9='onArrowUp'></template>"
+    },
+    {
+      filename: 'test.vue',
+      code: "<template><input v-on:keyup.0='onArrowUp'></template>"
+    },
+    {
+      filename: 'test.vue',
+      code: "<template><input @keyup.0='onArrowUp'></template>"
+    },
+    {
+      filename: 'test.vue',
+      code: "<template><input v-on:keyup.4='onArrowUp'></template>"
+    },
+    {
+      filename: 'test.vue',
+      code: "<template><input @keyup.4='onArrowUp'></template>"
+    },
+    {
+      filename: 'test.vue',
+      code: "<template><input v-on:keyup.page-down.native='onArrowUp'></template>"
+    },
+    {
+      filename: 'test.vue',
+      code: "<template><input @keyup.page-down.native='onArrowUp'></template>"
+    },
+    {
+      filename: 'test.vue',
+      code: "<template><input v-on:keyup.0.native='onArrowUp'></template>"
+    },
+    {
+      filename: 'test.vue',
+      code: "<template><input @keyup.0.native='onArrowUp'></template>"
+    }
+  ],
+
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: "<template><input v-on:keyup.34='onArrowUp'></template>",
+      output: "<template><input v-on:keyup.page-down='onArrowUp'></template>",
+      errors: ["'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."]
+    },
+    {
+      filename: 'test.vue',
+      code: "<template><input v-on:keyup.34.native='onArrowUp'></template>",
+      output: "<template><input v-on:keyup.page-down.native='onArrowUp'></template>",
+      errors: ["'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."]
+    },
+    {
+      filename: 'test.vue',
+      code: "<template><input v-on:keyup.unknown.34='onArrowUp'></template>",
+      output: "<template><input v-on:keyup.unknown.page-down='onArrowUp'></template>",
+      errors: ["'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."]
+    },
+    {
+      filename: 'test.vue',
+      code: "<template><input v-on:[dynamicArg].34='onArrowUp'></template>",
+      output: "<template><input v-on:[dynamicArg].page-down='onArrowUp'></template>",
+      errors: ["'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."]
+    },
+    {
+      filename: 'test.vue',
+      code: "<template><input v-on:[dynamicArg].unknown.34='onArrowUp'></template>",
+      output: "<template><input v-on:[dynamicArg].unknown.page-down='onArrowUp'></template>",
+      errors: ["'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."]
+    },
+    {
+      filename: 'test.vue',
+      code: "<template><input v-on:[dynamicArg].34.unknown='onArrowUp'></template>",
+      output: "<template><input v-on:[dynamicArg].page-down.unknown='onArrowUp'></template>",
+      errors: ["'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."]
+    },
+    {
+      filename: 'test.vue',
+      code: "<template><input @keyup.34='onArrowUp'></template>",
+      output: "<template><input @keyup.page-down='onArrowUp'></template>",
+      errors: ["'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."]
+    },
+    {
+      filename: 'test.vue',
+      code: "<template><input @keyup.34.native='onArrowUp'></template>",
+      output: "<template><input @keyup.page-down.native='onArrowUp'></template>",
+      errors: ["'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."]
+    },
+    {
+      filename: 'test.vue',
+      code: "<template><input @keyup.unknown.34='onArrowUp'></template>",
+      output: "<template><input @keyup.unknown.page-down='onArrowUp'></template>",
+      errors: ["'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."]
+    },
+    {
+      filename: 'test.vue',
+      code: "<template><input @[dynamicArg].34='onArrowUp'></template>",
+      output: "<template><input @[dynamicArg].page-down='onArrowUp'></template>",
+      errors: ["'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."]
+    },
+    {
+      filename: 'test.vue',
+      code: "<template><input @[dynamicArg].unknown.34='onArrowUp'></template>",
+      output: "<template><input @[dynamicArg].unknown.page-down='onArrowUp'></template>",
+      errors: ["'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."]
+    },
+    {
+      filename: 'test.vue',
+      code: "<template><input @[dynamicArg].34.unknown='onArrowUp'></template>",
+      output: "<template><input @[dynamicArg].page-down.unknown='onArrowUp'></template>",
+      errors: ["'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."]
+    },
+    {
+      filename: 'test.vue',
+      code: "<template><input @keyup.10='onArrowUp'></template>",
+      output: null,
+      errors: ["'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."]
+    },
+    {
+      filename: 'test.vue',
+      code: "<template><input @keyup.10.native='onArrowUp'></template>",
+      output: null,
+      errors: ["'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."]
+    },
+    {
+      filename: 'test.vue',
+      code: "<template><input @keyup.unknown.10='onArrowUp'></template>",
+      output: null,
+      errors: ["'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."]
+    },
+    {
+      filename: 'test.vue',
+      code: "<template><input @[dynamicArg].unknown.10='onArrowUp'></template>",
+      output: null,
+      errors: ["'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."]
+    }
+  ]
+})