key-format-style no work and how to keys order

[penggelies07]

Tell us about your environment

• **ESLint version:8.9.0
• **eslint-plugin-vue version:8.4.1
• **eslint-plugin-vue-i18n version:1.3.0
• **Node version:14.18.2

Please show your full configuration:

'use strict';

module.exports = {
  'root': true,
  'env': {
    'es2021': true,
    'node': true,
    'browser': false,
  },
  'extends': [
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/vue3-recommended',
    'plugin:prettier/recommended',
    'plugin:@intlify/vue-i18n/recommended',
    'prettier',
  ],
  'parser': 'vue-eslint-parser',
  'parserOptions': {
    'parser': '@typescript-eslint/parser',
    'ecmaVersion': 2020,
    'sourceType': 'module',
  },
  'plugins': ['vue', '@typescript-eslint', 'prettier'],
  'ignorePatterns': ['types/env.d.ts', 'node_modules/**', '**/dist/**'],
  'rules': {
    '@typescript-eslint/ban-ts-comment': 'off',
    '@typescript-eslint/no-unused-vars': 'error',
    '@typescript-eslint/no-empty-function': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/consistent-type-imports': 'error',
    '@typescript-eslint/no-inferrable-types': 'off',
    '@typescript-eslint/no-duplicate-imports': ['error'],
    'eqeqeq': ['error', 'always'], // 强制三个等号判断
    'semi': ['error', 'always'], // 强制分号
    'lines-between-class-members': [
      'error',
      'always',
      { 'exceptAfterSingleLine': true },
    ], // 强制类的方法之间有空行
    'one-var': ['error', 'never'], // 禁止一次定义多个变量
    'curly': ['error', 'all'], // 一个块只包含一个语句不允许省略花括号
    'quotes': 'off', // 强制使用统一的引号
    'spaced-comment': 2, // 强制在注释中 // 或 /* 使用一致的空格
    'default-case': 2, // 要求 switch 语句中有 default 分支
    'no-eval': 2, // 禁用 eval()
    // 'no-duplicate-imports': 'error',
    'vue/comment-directive': 0, // 关闭只能在模板里面注释
    'vue/no-useless-template-attributes': 'error', // 禁止 template 标签传入无用属性
    'vue/script-setup-uses-vars': 'error', // 强制已声明但从未读取其值报错
    'vue/attribute-hyphenation': 'error', // 强制使用带连字符的属性名称
    'vue/component-tags-order': [
      'error',
      {
        'order': ['template', 'script', 'style'],
      },
    ], // 强制组件的标签顺序
    'vue/component-name-in-template-casing': [
      'error',
      'kebab-case',
      { 'registeredComponentsOnly': true },
    ], // 强制以 kebab-case 形式在模版内使用
    'vue/custom-event-name-casing': [
      'error',
      'camelCase',
      {
        'ignores': [],
      },
    ], // 强制自定义事件名称为 camelCase 格式
    'vue/attributes-order': [
      'error',
      {
        'order': [
          'DEFINITION',
          'LIST_RENDERING',
          'CONDITIONALS',
          'RENDER_MODIFIERS',
          'GLOBAL',
          ['UNIQUE', 'SLOT'],
          'TWO_WAY_BINDING',
          'OTHER_DIRECTIVES',
          'OTHER_ATTR',
          'EVENTS',
          'CONTENT',
        ],
        'alphabetical': false,
      },
    ], // 强制对组件属性进行排序
    'vue/max-len': [
      'error',
      {
        'code': 80,
        'template': 80,
        'tabWidth': 2,
        'comments': 80,
        'ignorePattern': '',
        'ignoreComments': true,
        'ignoreTrailingComments': true,
        'ignoreUrls': true,
        'ignoreStrings': true,
        'ignoreTemplateLiterals': true,
        'ignoreRegExpLiterals': true,
        'ignoreHTMLAttributeValues': false,
        'ignoreHTMLTextContents': true,
      },
    ], // 强制vue文件每一行的格式
    'vue/require-explicit-emits': [
      'error',
      {
        'allowProps': false,
      },
    ], // 强制不允许事件名定义在props
    'vue/html-self-closing': [
      'error',
      {
        html: {
          void: 'always',
          normal: 'never',
          component: 'always',
        },
        svg: 'always',
        math: 'always',
      },
    ], // 强制自动关闭组件标志
    'vue/multi-word-component-names': 'off', // 不强制要求组件命名为多单词
    'vue/order-in-components': [
      'error',
      {
        'order': [
          'el',
          'name',
          'key',
          'parent',
          'functional',
          ['delimiters', 'comments'],
          ['components', 'directives', 'filters'],
          'extends',
          'mixins',
          ['provide', 'inject'],
          'ROUTER_GUARDS',
          'layout',
          'middleware',
          'validate',
          'scrollToTop',
          'transition',
          'loading',
          'inheritAttrs',
          'model',
          ['props', 'propsData'],
          'emits',
          'setup',
          'fetch',
          'asyncData',
          'data',
          'head',
          'computed',
          'watch',
          'watchQuery',
          'LIFECYCLE_HOOKS',
          'methods',
          ['template', 'render'],
          'renderError',
        ],
      },
    ], // 强制保持组件中属性的声明顺序,
    '@intlify/vue-i18n/no-deprecated-i18n-component': 'error', // 强制不允许使用 i18n 标签
    '@intlify/vue-i18n/no-deprecated-i18n-place-attr': 'error', // 强制不允许使用弃用的 place 属性
    '@intlify/vue-i18n/no-deprecated-i18n-places-prop': 'error', // 强制不允许使用弃用的 places 属性
    '@intlify/vue-i18n/no-html-messages': 'error', // 强制不允许在翻译中出现 html 代码
    '@intlify/vue-i18n/no-i18n-t-path-prop': 'error', // 强制不允许使用 path 作为 props
    '@intlify/vue-i18n/no-missing-keys': 'error', // 强制不存在 key 的翻译不能被使用
    '@intlify/vue-i18n/valid-message-syntax': 'error', // 强制核查翻译变量使用格式
    '@intlify/vue-i18n/key-format-style': ['error', 'snake_case'], // 强制翻译 key 格式
    '@intlify/vue-i18n/no-duplicate-keys-in-locale': 'error', // 检测文件之间是否存在相同 key 值翻译
    '@intlify/vue-i18n/no-unknown-locale': 'error', // 不存在的语种不允许被调用
    '@intlify/vue-i18n/prefer-sfc-lang-attr': 'error', // sfc 格式文件声明翻译需要说明对应文件格式
    '@intlify/vue-i18n/prefer-linked-key-with-paren': 'error', // 强制将翻译内容的传参括在括号中
    '@intlify/vue-i18n/sfc-locale-attr': 'error', // sfc 格式文件声明翻译需要说明对应语种
  },
  'settings': {
    // 解决路径引用ts文件报错的问题
    'import/resolver': {
      'node': {
        'extensions': ['.js', '.jsx', '.ts', '.tsx', '.vue'],
      },
      // 解决tsconfig下的path别名导致eslint插件无法解决的bug
      'typescript': {
        'alwaysTryTypes': true,
      },
    },
    'vue-i18n': {
      localeDir: 'src/locales/lang/*.{json,json5,yaml,yml}', // extension is glob formatting!
      // Specify the version of `vue-i18n` you are using.
      // If not specified, the message will be parsed twice.
      messageSyntaxVersion: '^9.2.0-beta.17',
    },
  },
};

What did you do?

This is my translation JSON file.
Directory in src/locales/lang/en.json

{
  "common": {
    "menu": {
      "file": "File",
      "fileImport": "Import",
      "file-import": "Import",
      "file.import": "Import",
      "file_import": "Import",
      "link_2": "Help",
      "link_1": "Mall",
      "link_3": "Mall",
      "link_4": "Mall"
    },
    "msg": {
      "ok": "ok",
      "cancel": "cancel"
    }
  }
}

What did you expect to happen?
My rules has '@intlify/vue-i18n/key-format-style': ['error', 'snake_case']

// Should be error(format-style)
"fileImport": "Import",
"file-import": "Import",
"file.import": "Import",
"file_import": "Import",
// Should be sorted
"link_2": "Help",
"link_1": "Mall",
"link_3": "Mall",
"link_4": "Mall"

1. However, the vs code file is not marked red and eslint not prompts an error like the document, and no error is detected even when npm run lint is executed. Is there something wrong with the use?
2. I found that there is an issue about vue-i18n/keys-order, but there is no example of this rule. How can I use it?

What actually happened?

When npm run lint is executed, only had @intlify/vue-i18n/no-raw-text error.

/components/control-panel/RadialArray.vue
  5:8  warning  raw text '取消' is used  @intlify/vue-i18n/no-raw-text
  8:8  warning  raw text '确认' is used  @intlify/vue-i18n/no-raw-text

[ota-meshi]

It looks to me that you are not linting the JSON file.
Check if the JSON file is actually linted.

https://eslint-plugin-vue-i18n.intlify.dev/started.html#usage

Also, in order for the VS Code extension to check JSON, you need to add the following settings.

// .vscode/settings.json
{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue",
    "json",
    "jsonc"
  ]
}

Also, you probably need to add a parser configuration. Add an overrides configuration and do the following:

  "overrides": [
    {
      "files": ["*.json", "*.json5"],
      "parser": "jsonc-eslint-parser",
    },
  ],

https://github.com/ota-meshi/jsonc-eslint-parser#book-usage

[penggelies07]

It looks to me that you are not linting the JSON file. Check if the JSON file is actually linted.

https://eslint-plugin-vue-i18n.intlify.dev/started.html#usage

Also, in order for the VS Code extension to check JSON, you need to add the following settings.

// .vscode/settings.json
{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue",
    "json",
    "jsonc"
  ]
}

Also, you probably need to add a parser configuration. Add an overrides configuration and do the following:

  "overrides": [
    {
      "files": ["*.json", "*.json5"],
      "parser": "jsonc-eslint-parser",
    },
  ],

https://github.com/ota-meshi/jsonc-eslint-parser#book-usage

eslint-plugin-vue-i18n is awesome I like it very much.
Thank you very much for your help, Issue 1 has been resolved, the problem is in settings.json.
Issue 2 is vue-i18n/keys-order, how to be used？I don't see in the documentation.

[ota-meshi]

I forgot to write about it.
The keys-order rule has not been implemented yet. See #3.
The only rules you can use are those listed on the next page.
https://eslint-plugin-vue-i18n.intlify.dev/rules/

[ota-meshi]

You may be able to use eslint-plugin-jsonc.
https://ota-meshi.github.io/eslint-plugin-jsonc/rules/sort-keys.html
However, note that it applies to all lint target JSON files.

[penggelies07]

ok, thank you for your patience.

[ota-meshi]

I will close this issue. Follow #3 to remaining issue.