Other custom rules do not work properly export for those are in `@intlify/vue-i18n/recommended`

[daenamkim]

Tell us about your environment

• ESLint version: v8.57.0
• eslint-plugin-vue version: "eslint-plugin-vue": "^9.17.0"
• eslint-plugin-vue-i18n version: "@intlify/eslint-plugin-vue-i18n": "^2.0.0"
• Node version: v20.11.1

Please show your full configuration:

/* eslint-env node */
module.exports = {
  root: true,
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    'plugin:@intlify/vue-i18n/recommended'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  settings: {
    'vue-i18n': {
      localeDir: './src/assets/language/*.{json}',
    },
  },
  rules: {
    // Following rules are not working!
    '@intlify/vue-i18n/no-unused-keys': [
      'error',
      {
        extensions: ['.ts', '.vue'],
      },
    ],
    '@intlify/vue-i18n/key-format-style': [
      'error',
      'camelCase',
      {
        allowArray: false,
        splitByDots: false,
      },
    ],
  }
}

What did you do?

I just followed https://eslint-plugin-vue-i18n.intlify.dev/started.html and spent few days to figure out why. Tried parser option, different vite plugin for i18n, all did not work.

What did you expect to happen?

@intlify/vue-i18n/no-unused-keys and @intlify/vue-i18n/key-format-style should show errors

<script setup>
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
</script>

<template>
  <main>
    <!-- ================================ TEST ================================ -->
    <!-- OK -->
    <div>RAW TEXT</div>
    <!-- DOES NOT WORK -->
    <div>{{ t('unknown') }}</div>
    <!-- DOES NOT WORK -->
    <div>{{ t('kebab-case') }}</div>
    <!-- DOES NOT WORK -->
    <div>{{ t('snake_case') }}</div>
    <!-- ================================ TEST ================================ -->
  </main>
</template>

<style scoped>
.logo {
  display: block;
  margin: 0 auto 2rem;
}
</style>

What actually happened?

It ONLY shows the raw text warning which is in @intlify/vue-i18n/recommended but not other rules, and also custom "@intlify/vue-i18n/no-raw-text": "error" worked as well when I added in rules: { ... }.

$ yarn lint                                                                                          master
yarn run v1.22.21
$ eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore

/.../src/App.vue
  11:10  warning  raw text 'RAW TEXT' is used  @intlify/vue-i18n/no-raw-text

✖ 1 problem (0 errors, 1 warning)

✨  Done in 0.79s.

Repository to reproduce this issue

https://github.com/daenamkim/eslint-plugin-vue-i18n-test

[daenamkim]

Is this related to Vue3? Since we have used this in Vue2 env it worked as expected.

[daenamkim]

@ota-meshi Hi, I understand you might be very busy, but I would be grateful if you could take a look at this when you're available. Thank you! 🙇