Add no-deprecated-i18n-place-attr rule

docs/rules/README.md

@@ -9,6 +9,7 @@
 | Rule ID | Description |    |
 |:--------|:------------|:---|
 | [@intlify/vue-i18n/<wbr>no-deprecated-i18n-component](./no-deprecated-i18n-component.html) | disallow using deprecated `<i18n>` components (in Vue I18n 9.0.0+) | :black_nib: |
+| [@intlify/vue-i18n/<wbr>no-deprecated-i18n-place-attr](./no-deprecated-i18n-place-attr.html) | disallow using deprecated `place` attribute (Removed in Vue I18n 9.0.0+) |  |
 | [@intlify/vue-i18n/<wbr>no-html-messages](./no-html-messages.html) | disallow use HTML localization messages | :star: |
 | [@intlify/vue-i18n/<wbr>no-missing-keys](./no-missing-keys.html) | disallow missing locale message key at localization methods | :star: |
 | [@intlify/vue-i18n/<wbr>no-raw-text](./no-raw-text.html) | disallow to string literal in template or JSX | :star: |

docs/rules/no-deprecated-i18n-place-attr.md

@@ -0,0 +1,95 @@
+---
+title: '@intlify/vue-i18n/no-deprecated-i18n-place-attr'
+description: disallow using deprecated `place` attribute (Removed in Vue I18n 9.0.0+)
+---
+
+# @intlify/vue-i18n/no-deprecated-i18n-place-attr
+
+> disallow using deprecated `place` attribute (Removed in Vue I18n 9.0.0+)
+
+If you are migrating from Vue I18n v8 to v9, the `place` attribute should be replaced with the `v-slot`.
+
+## :book: Rule Details
+
+This rule reports use of deprecated `place` attribute (Removed in Vue I18n 9.0.0+).
+
+:-1: Examples of **incorrect** code for this rule:
+
+<eslint-code-block>
+
+<!-- eslint-skip -->
+
+```vue
+<script>
+/* eslint @intlify/vue-i18n/no-deprecated-i18n-place-attr: 'error' */
+</script>
+<template>
+  <div class="app">
+    <i18n path="info" tag="p">
+      <!-- ✗ BAD -->
+      <span place="limit">{{ changeLimit }}</span>
+      <!-- ✗ BAD -->
+      <a place="action" :href="changeUrl">{{ $t('change') }}</a>
+    </i18n>
+
+    <!-- Also check the <i18n-t> component to prevent mistakes. -->
+    <i18n-t path="info" tag="p">
+      <!-- ✗ BAD -->
+      <span place="limit">{{ changeLimit }}</span>
+      <!-- ✗ BAD -->
+      <a place="action" :href="changeUrl">{{ $t('change') }}</a>
+    </i18n-t>
+  </div>
+</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-i18n-place-attr: 'error' */
+</script>
+<template>
+  <div class="app">
+    <i18n path="info" tag="p">
+      <!-- ✓ GOOD -->
+      <template v-slot:limit>
+        <span>{{ changeLimit }}</span>
+      </template>
+      <!-- ✓ GOOD -->
+      <template v-slot:action>
+        <a :href="changeUrl">{{ $t('change') }}</a>
+      </template>
+    </i18n>
+
+    <i18n-t keypath="info" tag="p">
+      <!-- ✓ GOOD -->
+      <template #limit>
+        <span>{{ changeLimit }}</span>
+      </template>
+      <!-- ✓ GOOD -->
+      <template #action>
+        <a :href="changeUrl">{{ $t('change') }}</a>
+      </template>
+    </i18n-t>
+  </div>
+</template>
+```
+
+</eslint-code-block>
+
+## :books: Further reading
+
+- [Vue I18n > Breaking Changes - Remove place syntax with `place` attr and `places` prop](https://vue-i18n.intlify.dev/guide/migration/breaking.html#remove-place-syntax-with-place-attr-and-places-prop)
+- [Vue I18n (v8) > Component interpolation - Places syntax usage](https://kazupon.github.io/vue-i18n/guide/interpolation.html#places-syntax-usage)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/intlify/eslint-plugin-vue-i18n/blob/master/lib/rules/no-deprecated-i18n-place-attr.ts)
+- [Test source](https://github.com/intlify/eslint-plugin-vue-i18n/tree/master/tests/lib/rules/no-deprecated-i18n-place-attr.ts)

lib/rules.ts

@@ -1,6 +1,7 @@
 /** DON'T EDIT THIS FILE; was created by scripts. */
 import keyFormatStyle from './rules/key-format-style'
 import noDeprecatedI18nComponent from './rules/no-deprecated-i18n-component'
+import noDeprecatedI18nPlaceAttr from './rules/no-deprecated-i18n-place-attr'
 import noDuplicateKeysInLocale from './rules/no-duplicate-keys-in-locale'
 import noDynamicKeys from './rules/no-dynamic-keys'
 import noHtmlMessages from './rules/no-html-messages'
@@ -15,6 +16,7 @@ import validMessageSyntax from './rules/valid-message-syntax'
 export = {
   'key-format-style': keyFormatStyle,
   'no-deprecated-i18n-component': noDeprecatedI18nComponent,
+  'no-deprecated-i18n-place-attr': noDeprecatedI18nPlaceAttr,
   'no-duplicate-keys-in-locale': noDuplicateKeysInLocale,
   'no-dynamic-keys': noDynamicKeys,
   'no-html-messages': noHtmlMessages,

lib/rules/no-deprecated-i18n-place-attr.ts

@@ -0,0 +1,51 @@
+/**
+ * @author Yosuke Ota
+ */
+import {
+  defineTemplateBodyVisitor,
+  getAttribute,
+  getDirective
+} from '../utils/index'
+import type { RuleContext, RuleListener } from '../types'
+import type { AST as VAST } from 'vue-eslint-parser'
+
+function create(context: RuleContext): RuleListener {
+  return defineTemplateBodyVisitor(context, {
+    VElement(node: VAST.VElement) {
+      if (node.name !== 'i18n' && node.name !== 'i18n-t') {
+        return
+      }
+      for (const child of node.children) {
+        if (child.type !== 'VElement') {
+          continue
+        }
+        const placeAttr =
+          getAttribute(child, 'place') || getDirective(child, 'bind', 'place')
+        if (placeAttr) {
+          context.report({
+            node: placeAttr.key,
+            messageId: 'deprecated'
+          })
+        }
+      }
+    }
+  })
+}
+
+export = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'disallow using deprecated `place` attribute (Removed in Vue I18n 9.0.0+)',
+      category: 'Recommended',
+      recommended: false
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      deprecated: 'Deprecated `place` attribute was found. Use v-slot instead.'
+    }
+  },
+  create
+}

lib/utils/index.ts

@@ -57,6 +57,54 @@ export function defineTemplateBodyVisitor(
   )
 }
 
+/**
+ * Get the attribute which has the given name.
+ * @param {VElement} node The start tag node to check.
+ * @param {string} name The attribute name to check.
+ * @param {string} [value] The attribute value to check.
+ * @returns {VAttribute | null} The found attribute.
+ */
+export function getAttribute(
+  node: VAST.VElement,
+  name: string
+): VAST.VAttribute | null {
+  return (
+    node.startTag.attributes
+      .map(node => (!node.directive ? node : null))
+      .find(node => {
+        return node && node.key.name === name
+      }) || null
+  )
+}
+
+/**
+ * Get the directive which has the given name.
+ * @param {VElement} node The start tag node to check.
+ * @param {string} name The directive name to check.
+ * @param {string} [argument] The directive argument to check.
+ * @returns {VDirective | null} The found directive.
+ */
+export function getDirective(
+  node: VAST.VElement,
+  name: string,
+  argument: string
+): VAST.VDirective | null {
+  return (
+    node.startTag.attributes
+      .map(node => (node.directive ? node : null))
+      .find(node => {
+        return (
+          node &&
+          node.key.name.name === name &&
+          (argument === undefined ||
+            (node.key.argument &&
+              node.key.argument.type === 'VIdentifier' &&
+              node.key.argument.name) === argument)
+        )
+      }) || null
+  )
+}
+
 function loadLocaleMessages(
   localeFilesList: LocaleFiles[],
   cwd: string

tests/lib/rules/no-deprecated-i18n-place-attr.ts

@@ -0,0 +1,138 @@
+/**
+ * @author Yosuke Ota
+ */
+import { RuleTester } from 'eslint'
+import rule = require('../../../lib/rules/no-deprecated-i18n-place-attr')
+
+const tester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: { ecmaVersion: 2015 }
+})
+
+tester.run('no-deprecated-i18n-place-attr', rule as never, {
+  valid: [
+    {
+      code: `
+      <template>
+        <div id="app">
+          <!-- ... -->
+          <i18n path="info" tag="p">
+            <template v-slot:limit>
+              <span>{{ changeLimit }}</span>
+            </template>
+            <template v-slot:action>
+              <a :href="changeUrl">{{ $t('change') }}</a>
+            </template>
+          </i18n>
+          <!-- ... -->
+        </div>
+      </template>
+      `
+    },
+    {
+      code: `
+      <template>
+        <div id="app">
+          <!-- ... -->
+          <i18n path="info" tag="p">
+            <template #limit>
+              <span>{{ changeLimit }}</span>
+            </template>
+            <template #action>
+              <a :href="changeUrl">{{ $t('change') }}</a>
+            </template>
+          </i18n>
+          <!-- ... -->
+        </div>
+      </template>
+      `
+    },
+    {
+      code: `
+      <template>
+        <div id="app">
+          <!-- ... -->
+          <unknown-component path="info" tag="p">
+            <span place="limit">{{ changeLimit }}</span>
+            <a place="action" :href="changeUrl">{{ $t('change') }}</a>
+          </unknown-component>
+          <!-- ... -->
+        </div>
+      </template>
+      `
+    }
+  ],
+  invalid: [
+    {
+      code: `
+      <template>
+        <div id="app">
+          <!-- ... -->
+          <i18n path="info" tag="p">
+            <span place="limit">{{ changeLimit }}</span>
+            <a place="action" :href="changeUrl">{{ $t('change') }}</a>
+          </i18n>
+          <!-- ... -->
+        </div>
+      </template>
+      `,
+      errors: [
+        {
+          message:
+            'Deprecated `place` attribute was found. Use v-slot instead.',
+          line: 6,
+          column: 19
+        },
+        {
+          message:
+            'Deprecated `place` attribute was found. Use v-slot instead.',
+          line: 7,
+          column: 16
+        }
+      ]
+    },
+
+    {
+      code: `
+      <template>
+        <div id="app">
+          <!-- ... -->
+          <i18n-t path="info" tag="p">
+            <span place="limit">{{ changeLimit }}</span>
+            <a place="action" :href="changeUrl">{{ $t('change') }}</a>
+          </i18n-t>
+          <!-- ... -->
+        </div>
+      </template>
+      `,
+      errors: [
+        {
+          message:
+            'Deprecated `place` attribute was found. Use v-slot instead.',
+          line: 6,
+          column: 19
+        },
+        {
+          message:
+            'Deprecated `place` attribute was found. Use v-slot instead.',
+          line: 7,
+          column: 16
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <div id="app">
+          <!-- ... -->
+          <i18n path="info" tag="p" :places="{ limit: refundLimit }">
+            <a place="action" :href="refundUrl">{{ $t('refund') }}</a>
+          </i18n>
+          <!-- ... -->
+        </div>
+      </template>
+      `,
+      errors: ['Deprecated `place` attribute was found. Use v-slot instead.']
+    }
+  ]
+})