Compatibility problems with estlint-plugin-vue-i18n and vueTsConfigs.recommendedTypeChecked

[maximilian-hammerl]

Tell us about your environment

• ESLint version: 9.22.0
• eslint-plugin-vue version: 10.0.0
• eslint-plugin-vue-i18n version: 4.0.0
• Node version: 23.9.0

What did you do?

After adding estlint-plugin-vue-i18n to my eslint config, linting fails with:

You have used a rule which requires type information, but don't have parserOptions set to generate type information for this file.

I started with the eslint config created by npm create vue@latest:

export default defineConfigWithVueTs(
  {
    name: 'app/files-to-lint',
    files: ['**/*.{ts,mts,tsx,vue}'],
  },

  {
    name: 'app/files-to-ignore',
    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
  },

  pluginVue.configs['flat/essential'],
  vueTsConfigs.recommended,
  skipFormatting,
)

Then I set vueTsConfigs.recommended to vueTsConfigs.recommendedTypeChecked:

export default defineConfigWithVueTs(
  {
    name: 'app/files-to-lint',
    files: ['**/*.{ts,mts,tsx,vue}'],
  },

  {
    name: 'app/files-to-ignore',
    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
  },

  pluginVue.configs['flat/essential'],
  vueTsConfigs.recommendedTypeChecked,
  skipFormatting,
)

(Everything still works at this point.)

Then I added eslint-plugin-vue-i18n:

export default defineConfigWithVueTs(
  {
    name: 'app/files-to-lint',
    files: ['**/*.{ts,mts,tsx,vue}'],
  },

  {
    name: 'app/files-to-ignore',
    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
  },

  pluginVue.configs['flat/essential'],
  vueTsConfigs.recommendedTypeChecked,
  skipFormatting,

  ...vueI18n.configs.recommended,
  {
    rules: {
      // Optional.
      '@intlify/vue-i18n/no-dynamic-keys': 'error',
      '@intlify/vue-i18n/no-unused-keys': [
        'error',
        {
          extensions: ['.ts', '.vue']
        }
      ]
    },
    settings: {
      'vue-i18n': {
        localeDir: './path/to/locales/*.{json,json5,yaml,yml}',
        messageSyntaxVersion: '^11.0.0'
      }
    }
  }
)

Now eslint fails with this error:

> vue-project@0.0.0 lint
> eslint . --fix


Oops! Something went wrong! :(

ESLint: 9.22.0

Error: Error while loading rule '@typescript-eslint/await-thenable': You have used a rule which requires type information, but don't have parserOptions set to generate type information for this file. See https://typescript-eslint.io/getting-started/typed-linting for enabling linting with type information.
Parser: vue-eslint-parser
Note: detected a parser other than @typescript-eslint/parser. Make sure the parser is configured to forward "parserOptions.project" to @typescript-eslint/parser.

If I set vueTsConfigs.recommendedTypeChecked back to vueTsConfigs.recommended, it works again. Could this be a compatibility problem between recommendedTypeChecked and estlint-plugin-vue-i18n?

[f-lawe]

I got the same problem, that's because Typescript default rulesets do not include a files parameter, then apply to every scanned files.

I found myself updating those rules and it works. You can update it to your needs:

export const scopeTsRulesets = (configs: ConfigArray) => {
  const configNames = [
    'typescript-eslint/strict-type-checked',
    'typescript-eslint/stylistic-type-checked',
  ];

  configs.forEach((config) => {
    if (config.name && configNames.includes(config.name)) {
      config.files ??= ['**/*.ts', '**/*.vue'];
    }
  });

  return configs;
};