ESLint flat config support

maxdzin commented 8 months ago

Tell us about your environment

ESLint version: 8.57.0
eslint-plugin-vue version: 9.23.0
eslint-plugin-vue-i18n version: 3.0.0-next.7
Node version: 20.11.1

The problem you want to solve. A possibility to use the @intlify/eslint-plugin-vue-i18n plugin, its rules, etc. in the eslint.config.mjs configuration file.

Your take on the correct solution to problem. I tried to import the plugin but it seems not working or I'm doing it wrong. Here's how I tried to use that:

import vueI18n from '@intlify/eslint-plugin-vue-i18n'

/** @type {import('eslint').Linter.FlatConfig[]} */
export default [
  ...,
  {
    files: ['**/*.json', '**/*.ts', '**/*.tsx', '**/*.mts', '**/*.cts', '**/*.vue'],
    plugins: {
      vueI18n,
    },
    rules: {
      '@intlify/vue-i18n/no-dynamic-keys': 'error',
      '@intlify/vue-i18n/key-format-style': [
        'error',
        'kebab-case',
        {
          allowArray: false,
          splitByDots: false,
        },
      ],
      '@intlify/vue-i18n/no-raw-text': [
        'warn',
        {
          ignorePattern: '^[+-_#:()&*$%€©]+$',
        },
      ],
    },
    settings: {
      'vue-i18n': {
        localeDir: './locales/*.{json,json5,yaml,yml}',
        messageSyntaxVersion: '^9.0.0',
      },
    },
  },
  ...,
]

Additional context

And so the error I got:


Oops! Something went wrong! :(

ESLint: 8.57.0

TypeError: Key "rules": Key "@intlify/vue-i18n/no-dynamic-keys": Could not find plugin "@intlify/vue-i18n".
    at throwRuleNotFoundError (/home/.../testapp/node_modules/.pnpm/eslint@8.57.0/node_modules/eslint/lib/config/rule-validator.js:66:11)
    at RuleValidator.validate (/home/.../testapp/node_modules/.pnpm/eslint@8.57.0/node_modules/eslint/lib/config/rule-validator.js:128:17)
    at [finalizeConfig] (/home/.../testapp/node_modules/.pnpm/eslint@8.57.0/node_modules/eslint/lib/config/flat-config-array.js:231:23)
    at FlatConfigArray.getConfig (/home/.../testapp/node_modules/.pnpm/@humanwhocodes+config-array@0.11.14/node_modules/@humanwhocodes/config-array/api.js:938:55)
    at FlatConfigArray.isFileIgnored (/home/.../testapp/node_modules/.pnpm/@humanwhocodes+config-array@0.11.14/node_modules/@humanwhocodes/config-array/api.js:962:15)
    at /home/.../testapp/node_modules/.pnpm/eslint@8.57.0/node_modules/eslint/lib/eslint/eslint-helpers.js:312:49
    at Array.reduce (<anonymous>)
    at entryFilter (/home/.../testapp/node_modules/.pnpm/eslint@8.57.0/node_modules/eslint/lib/eslint/eslint-helpers.js:299:28)
    at Object.isAppliedFilter (/home/.../testapp/node_modules/.pnpm/@nodelib+fs.walk@1.2.8/node_modules/@nodelib/fs.walk/out/readers/common.js:12:31)
    at AsyncReader._handleEntry (/home/.../testapp/node_modules/.pnpm/@nodelib+fs.walk@1.2.8/node_modules/@nodelib/fs.walk/out/readers/async.js:86:20)
 ELIFECYCLE  Command failed with exit code 2.
 ```

maxdzin commented 8 months ago

@ota-meshi thank you for the update! The flat config support is a good step forward!

However, there's another issue after installing v3.0.0-next.8:

> eslint .

Oops! Something went wrong! :(

ESLint: 8.57.0

ESLint couldn't find a configuration file. To set up a configuration file for this project, please run:

    npm init @eslint/config

ESLint looked for configuration files in /home/.../testapp and its ancestors. If it found none, it then looked in your home directory.

If you think you already have a configuration file or if you need more help, please stop by the ESLint Discord server: https://eslint.org/chat

eslint.config.mjs is used there with this updated configuration:

import vueI18n from '@intlify/eslint-plugin-vue-i18n'
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
import vitest from 'eslint-plugin-vitest'
import withNuxt from './.nuxt/eslint.config.mjs'

/** @type {import('eslint').Linter.FlatConfig[]} */
export default withNuxt([
  {
    ignores: [
      '.nitro/**',
      '.nuxt/**',
      '.output/**',
      '.vscode/**',
      'dist/**',
      'node_modules/**',
      'coverage/**',
    ],
  },
  {
    files: ['**/*.ts', '**/*.tsx', '**/*.mts', '**/*.cts', '**/*.vue'],
    rules: {
      '@typescript-eslint/no-unused-vars': [
        'error',
        {
          argsIgnorePattern: '^_',
          varsIgnorePattern: '^_',
        },
      ],
      'vue/no-v-html': 'off',
    },
  },
  {
    files: ['tests/**'],
    plugins: {
      vitest,
    },
    rules: {
      ...vitest.configs.recommended.rules,
    },
    languageOptions: {
      globals: {
        ...vitest.environments.env.globals,
      },
    },
  },
  eslintPluginPrettierRecommended,
  // Refers to https://eslint-plugin-vue-i18n.intlify.dev/started.html
  ...vueI18n.configs['flat/recommended'],
  {
    rules: {
      // Optional.
      '@intlify/vue-i18n/no-dynamic-keys': 'error',
      '@intlify/vue-i18n/no-unused-keys': [
        'error',
        {
          extensions: ['.js', '.ts', '.vue'],
        },
      ],
    },
    settings: {
      'vue-i18n': {
        // extension is glob formatting!
        localeDir: './locales/*.{json,json5,yaml,yml}',

        // Specify the version of `vue-i18n` you are using.
        // If not specified, the message will be parsed twice.
        messageSyntaxVersion: '^9.0.0',
      },
    },
  },
])

kazupon commented 8 months ago

@maxdzin Thank you for your feedback!

eslint-plugin-vue-i18n supports flat config and this issue of flat config support has been resolved. Please open a new issue, as we would like to treat the above issue you submitted separately from this one.

flat config can be debugged with config-inspector. https://github.com/eslint/config-inspector Also, please provide a minimal reproduction configuration with your repo.

Thank you!

intlify / eslint-plugin-vue-i18n

ESLint flat config support #484