Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 6 commits into from
Dec 9, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/chilled-colts-destroy.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@intlify/eslint-plugin-vue-i18n": minor
---

feat: add `no-deprecated-v-t` rule
1 change: 1 addition & 0 deletions docs/rules/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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: |
Expand Down
66 changes: 66 additions & 0 deletions docs/rules/no-deprecated-v-t.md
Original file line number Diff line number Diff line change
@@ -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)
1 change: 1 addition & 0 deletions lib/configs/flat/recommended.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
1 change: 1 addition & 0 deletions lib/configs/recommended.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
2 changes: 2 additions & 0 deletions lib/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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,
Expand Down
43 changes: 43 additions & 0 deletions lib/rules/no-deprecated-v-t.ts
Original file line number Diff line number Diff line change
@@ -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
})
30 changes: 30 additions & 0 deletions tests/lib/rules/no-deprecated-v-t.ts
Original file line number Diff line number Diff line change
@@ -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.`
]
}
]
})
Loading