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

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

Open
daenamkim opened this issue Mar 6, 2024 · 2 comments

Comments

@daenamkim
Copy link

daenamkim commented Mar 6, 2024

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
Copy link
Author

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

@daenamkim
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant