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! 🙇

[daenamkim]

Hi @ota-meshi,

Thank you for updating this plugin last week!

I’ve upgraded @intlify/eslint-plugin-vue-i18n to 3.1.0 and tested most of the best practice rules we would need. However, I’m encountering an issue and was wondering if you could guide me on how to resolve it. 🙇 🙇 🙇 🙇 I’m not sure if this is specific to my setup, as I’ve tried everything I could, including using a custom parser.

eslintrc.cjs

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  env: {
    es2020: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:vue/vue3-recommended',
    'plugin:vuetify/recommended',
    '@vue/eslint-config-typescript/recommended',
    '@vue/eslint-config-prettier',
    'airbnb-base',
    'plugin:json/recommended',
    'prettier',
    'plugin:storybook/recommended',
    'plugin:playwright/recommended',
    '.eslintrc-auto-import.json',
    'plugin:@intlify/vue-i18n/recommended',
  ],
  parserOptions: {
    // To avoid "Parsing error: Expected to be an expression, but got empty" on .json files
    // https://eslint-plugin-vue-i18n.intlify.dev/started.html#how-to-use-custom-parser
    // https://eslint.org/docs/latest/use/configure/parser#configure-a-custom-parser
    parser: '@typescript-eslint/parser',
    ecmaVersion: 'latest',
  },
  plugins: ['vue'],
  settings: {
    // https://eslint-plugin-vue-i18n.intlify.dev/started.html#settings-vue-i18n
    'vue-i18n': {
      localeDir: './src/assets/language/*.json',
    },
    'import/resolver': {
      typescript: {
        project: './tsconfig.json',
      },
    },
  },
  rules: {
    '@intlify/vue-i18n/no-unused-keys': [
      'error',
      {
        extensions: ['.ts', '.vue'],
      },
    ],
    '@intlify/vue-i18n/key-format-style': [
      'error',
      'camelCase',
      {
        allowArray: false,
        splitByDots: false,
      },
    ],
    'vue/require-explicit-emits': 'off',
    'vue/no-useless-v-bind': 'error',
    'vue/no-required-prop-with-default': 'error',
    'import/extensions': 'off',
    'import/consistent-type-specifier-style': 'error',
    'import/order': [
      'error',
      {
        groups: ['type'],
        'newlines-between': 'always',
      },
    ],
    'func-call-spacing': 'off',
    'no-bitwise': [
      'error',
      {
        allow: ['|'],
      },
    ],
    'no-console': [
      'error',
      {
        allow: ['warn', 'error'],
      },
    ],
    'import/no-extraneous-dependencies': [
      'error',
      {
        devDependencies: true,
      },
    ],
    'no-await-in-loop': 'off',
  },
};

---

⚠️ @intlify/vue-i18n/no-raw-text (in recommended)

• ✅
• ❌
• ❌

---

❌ @intlify/vue-i18n/key-format-style

Default is camelCase and it seems still not working as expected

• ❌

• ❌

---

❌ @intlify/vue-i18n/no-missing-keys-in-other-locales

ja.son is empty and it seems still not working as expected

---

❌ @intlify/vue-i18n/no-unused-keys

Unused key was not decteded

[dahu33]

@ota-meshi & @kazupon any idea why the linters above are not working as expected?