feat: add no-deprecated-v-t rule (#580)

* feat: add `no-deprecated-v-t` rule

* docs: fix version

* Create chilled-colts-destroy.md

* Revert "docs: fix version"

This reverts commit 7e88518.

* fix: ref #580 (comment)

* fix: add valid test

---------

Co-authored-by: Yosuke Ota <otameshiyo23@gmail.com>

Author: kazupon

.changeset/chilled-colts-destroy.md

@@ -0,0 +1,5 @@
+---
+"@intlify/eslint-plugin-vue-i18n": minor
+---
+
+feat: add `no-deprecated-v-t` rule

docs/rules/index.md

@@ -13,6 +13,7 @@
 | [@intlify/vue-i18n/<wbr>no-deprecated-i18n-places-prop](./no-deprecated-i18n-places-prop.html) | disallow using deprecated `places` prop (Removed in Vue I18n 9.0.0+) | :star: |
 | [@intlify/vue-i18n/<wbr>no-deprecated-modulo-syntax](./no-deprecated-modulo-syntax.html) | enforce modulo interpolation to be named interpolation | :star::black_nib: |
 | [@intlify/vue-i18n/<wbr>no-deprecated-tc](./no-deprecated-tc.html) | disallow using deprecated `tc` or `$tc` (Deprecated in Vue I18n 10.0.0, removed fully in Vue I18n 11.0.0) | :star: |
+| [@intlify/vue-i18n/<wbr>no-deprecated-v-t](./no-deprecated-v-t.html) | disallow using deprecated `v-t` custom directive (Deprecated in Vue I18n 11.0.0, removed fully in Vue I18n 12.0.0) | :star: |
 | [@intlify/vue-i18n/<wbr>no-html-messages](./no-html-messages.html) | disallow use HTML localization messages | :star: |
 | [@intlify/vue-i18n/<wbr>no-i18n-t-path-prop](./no-i18n-t-path-prop.html) | disallow using `path` prop with `<i18n-t>` | :star::black_nib: |
 | [@intlify/vue-i18n/<wbr>no-missing-keys](./no-missing-keys.html) | disallow missing locale message key at localization methods | :star: |

docs/rules/no-deprecated-v-t.md

@@ -0,0 +1,66 @@
+---
+title: '@intlify/vue-i18n/no-deprecated-v-t'
+description: disallow using deprecated `v-t` custom directive (Deprecated in Vue I18n 11.0.0, removed fully in Vue I18n 12.0.0)
+since: v3.0.0
+---
+
+# @intlify/vue-i18n/no-deprecated-v-t
+
+> disallow using deprecated `v-t` custom directive (Deprecated in Vue I18n 11.0.0, removed fully in Vue I18n 12.0.0)
+
+- :star: The `"extends": "plugin:@intlify/vue-i18n/recommended"` or `*.configs["flat/recommended"]` property in a configuration file enables this rule.
+
+If you are migrating from Vue I18n v10 to v11, `v-t` custom direcitve should be replaced with `t` or `$t`.
+
+## :book: Rule Details
+
+This rule reports use of deprecated `v-t` custom directive (Deprecated in Vue I18n 11.0.0, removed fully in Vue I18n 12.0.0)
+
+:-1: Examples of **incorrect** code for this rule:
+
+<eslint-code-block>
+
+<!-- eslint-skip -->
+
+```vue
+<script>
+/* eslint @intlify/vue-i18n/no-deprecated-v-t: 'error' */
+</script>
+<template>
+  <!-- ✗ BAD -->
+  <p v-t="'banana'"></p>
+</template>
+```
+
+</eslint-code-block>
+
+:+1: Examples of **correct** code for this rule:
+
+<eslint-code-block>
+
+<!-- eslint-skip -->
+
+```vue
+<script>
+/* eslint @intlify/vue-i18n/no-deprecated-v-t: 'error' */
+</script>
+<template>
+  <!-- ✓ GOOD -->
+  <p>{{ $t('banana') }}</p>
+</template>
+```
+
+</eslint-code-block>
+
+## :books: Further reading
+
+- [Vue I18n > Breaking Changes in v11 - Deprecate Custom Directive `v-t`](https://vue-i18n.intlify.dev/guide/migration/breaking11.html#deprecate-custom-directive-v-t)
+
+## :rocket: Version
+
+This rule was introduced in `@intlify/eslint-plugin-vue-i18n` v3.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/intlify/eslint-plugin-vue-i18n/blob/master/lib/rules/no-deprecated-v-t.ts)
+- [Test source](https://github.com/intlify/eslint-plugin-vue-i18n/tree/master/tests/lib/rules/no-deprecated-v-t.ts)

lib/configs/flat/recommended.ts

@@ -24,6 +24,7 @@ export = [
       '@intlify/vue-i18n/no-deprecated-i18n-places-prop': 'warn',
       '@intlify/vue-i18n/no-deprecated-modulo-syntax': 'warn',
       '@intlify/vue-i18n/no-deprecated-tc': 'warn',
+      '@intlify/vue-i18n/no-deprecated-v-t': 'warn',
       '@intlify/vue-i18n/no-html-messages': 'warn',
       '@intlify/vue-i18n/no-i18n-t-path-prop': 'warn',
       '@intlify/vue-i18n/no-missing-keys': 'warn',

lib/configs/recommended.ts

@@ -18,6 +18,7 @@ export = {
     '@intlify/vue-i18n/no-deprecated-i18n-places-prop': 'warn',
     '@intlify/vue-i18n/no-deprecated-modulo-syntax': 'warn',
     '@intlify/vue-i18n/no-deprecated-tc': 'warn',
+    '@intlify/vue-i18n/no-deprecated-v-t': 'warn',
     '@intlify/vue-i18n/no-html-messages': 'warn',
     '@intlify/vue-i18n/no-i18n-t-path-prop': 'warn',
     '@intlify/vue-i18n/no-missing-keys': 'warn',

lib/index.ts

@@ -12,6 +12,7 @@ import noDeprecatedI18nPlaceAttr from './rules/no-deprecated-i18n-place-attr'
 import noDeprecatedI18nPlacesProp from './rules/no-deprecated-i18n-places-prop'
 import noDeprecatedModuloSyntax from './rules/no-deprecated-modulo-syntax'
 import noDeprecatedTc from './rules/no-deprecated-tc'
+import noDeprecatedVT from './rules/no-deprecated-v-t'
 import noDuplicateKeysInLocale from './rules/no-duplicate-keys-in-locale'
 import noDynamicKeys from './rules/no-dynamic-keys'
 import noHtmlMessages from './rules/no-html-messages'
@@ -45,6 +46,7 @@ export = {
     'no-deprecated-i18n-places-prop': noDeprecatedI18nPlacesProp,
     'no-deprecated-modulo-syntax': noDeprecatedModuloSyntax,
     'no-deprecated-tc': noDeprecatedTc,
+    'no-deprecated-v-t': noDeprecatedVT,
     'no-duplicate-keys-in-locale': noDuplicateKeysInLocale,
     'no-dynamic-keys': noDynamicKeys,
     'no-html-messages': noHtmlMessages,

lib/rules/no-deprecated-v-t.ts

@@ -0,0 +1,43 @@
+/**
+ * @author kazuya kawaguchi (a.k.a. kazupon)
+ */
+import { defineTemplateBodyVisitor } from '../utils/index'
+import { createRule } from '../utils/rule'
+
+import type { RuleContext, RuleListener } from '../types'
+import type { AST as VAST } from 'vue-eslint-parser'
+
+function checkDirective(context: RuleContext, node: VAST.VDirective) {
+  context.report({
+    node,
+    message: `'v-t' custom directive is used, but it is deprecated. Use 't' or '$t' instead.`
+  })
+}
+
+function create(context: RuleContext): RuleListener {
+  return defineTemplateBodyVisitor(context, {
+    "VAttribute[directive=true][key.name='t']"(node: VAST.VDirective) {
+      checkDirective(context, node)
+    },
+
+    "VAttribute[directive=true][key.name.name='t']"(node: VAST.VDirective) {
+      checkDirective(context, node)
+    }
+  })
+}
+
+export = createRule({
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'disallow using deprecated `v-t` custom directive (Deprecated in Vue I18n 11.0.0, removed fully in Vue I18n 12.0.0)',
+      category: 'Recommended',
+      url: 'https://eslint-plugin-vue-i18n.intlify.dev/rules/no-deprecated-v-t.html',
+      recommended: false
+    },
+    fixable: null,
+    schema: []
+  },
+  create
+})

tests/lib/rules/no-deprecated-v-t.ts

@@ -0,0 +1,30 @@
+/**
+ * @author kazuya kawaguchi (a.k.a. kazupon)
+ */
+import { RuleTester } from '../eslint-compat'
+import rule from '../../../lib/rules/no-deprecated-v-t'
+import * as vueParser from 'vue-eslint-parser'
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: vueParser,
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('no-deprecated-v-t', rule as never, {
+  valid: [
+    {
+      code: `<template><p v-html="$t('hello')"></p></template>`
+    }
+  ],
+  invalid: [
+    {
+      code: `<template><p v-t="'banana'"></p></template>`,
+      errors: [
+        `'v-t' custom directive is used, but it is deprecated. Use 't' or '$t' instead.`
+      ]
+    }
+  ]
+})