feat: support flat config (#487)

* refactor: update scripts

* refactor: remove unnecesarry codes

* refactor: update scripts

* chore: change node register to jiti from ts-node

* feat: flat config implementation

* fix: update separate

* fix: integration tests

* fix: format

* chore: bump node

* chore: bump eslint

* fix: forgot commit

* fix: forgot lock file

* fix: add ignore lint for tests

* fix: test

* docs: updates

* Create pink-hairs-fail.md

---------

Co-authored-by: Yosuke Ota <[email protected]>

Author: kazupon

.changeset/pink-hairs-fail.md

@@ -0,0 +1,5 @@
+---
+"@intlify/eslint-plugin-vue-i18n": minor
+---
+
+feat: support flat config

.eslintignore

@@ -7,6 +7,7 @@
 /dist
 /docs/.vitepress/cache
 /docs/.vitepress/dist
+/lib/configs/**/*.ts
 /node_modules
-# /tests/fixtures Used testcases
-/tests-integrations/config-recommended
+#/tests/fixtures # use testing
+/tests/integrations

.github/workflows/test.yml

@@ -17,7 +17,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 18
       - name: Enable corepack
         run: corepack enable
       - name: Install
@@ -30,7 +30,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node: [16, 18, 20]
+        node: [18, 20]
     steps:
       - name: Checkout
         uses: actions/checkout@v4

.prettierignore

@@ -10,6 +10,7 @@
 /tests/fixtures
 /tests-integrations/config-recommended
 /docs/.vitepress/cache
+/scripts/update-**.ts
 
 # ignore files
 /CHANGELOG.md

docs/rules/index.md

@@ -1,6 +1,6 @@
 # Available Rules
 
-- :star: mark: the rule which is enabled by `plugin:@intlify/vue-i18n/recommended` preset.
+- :star: mark: the rule which is enabled by `plugin:@intlify/vue-i18n/recommended` or `*.configs["flat/recommended"]` preset.
 - :black_nib: mark: the rule which is fixable by `eslint --fix` command.
 
 ## Recommended

docs/rules/no-html-messages.md

@@ -8,7 +8,7 @@ since: v0.1.0
 
 > disallow use HTML localization messages
 
-- :star: The `"extends": "plugin:@intlify/vue-i18n/recommended"` property in a configuration file enables this rule.
+- :star: The `"extends": "plugin:@intlify/vue-i18n/recommended"` or `*.configs["flat/recommended"]` property in a configuration file enables this rule.
 
 This rule reports in order to reduce the risk of injecting potentially unsafe localization message into the browser leading to supply-chain attack or XSS attack.
 

docs/rules/no-missing-keys.md

@@ -8,7 +8,7 @@ since: v0.1.0
 
 > disallow missing locale message key at localization methods
 
-- :star: The `"extends": "plugin:@intlify/vue-i18n/recommended"` property in a configuration file enables this rule.
+- :star: The `"extends": "plugin:@intlify/vue-i18n/recommended"` or `*.configs["flat/recommended"]` property in a configuration file enables this rule.
 
 This rule warns locale message key missing if the key does not exist in locale messages.
 

docs/rules/no-raw-text.md

@@ -8,7 +8,7 @@ since: v0.2.0
 
 > disallow to string literal in template or JSX
 
-- :star: The `"extends": "plugin:@intlify/vue-i18n/recommended"` property in a configuration file enables this rule.
+- :star: The `"extends": "plugin:@intlify/vue-i18n/recommended"` or `*.configs["flat/recommended"]` property in a configuration file enables this rule.
 
 This rule warns the usage of literal the bellow:
 

docs/rules/no-v-html.md

@@ -8,7 +8,7 @@ since: v0.1.0
 
 > disallow use of localization methods on v-html to prevent XSS attack
 
-- :star: The `"extends": "plugin:@intlify/vue-i18n/recommended"` property in a configuration file enables this rule.
+- :star: The `"extends": "plugin:@intlify/vue-i18n/recommended"` or `*.configs["flat/recommended"]` property in a configuration file enables this rule.
 
 This rule reports all uses of localization methods on `v-html` directive in order to reduce the risk of injecting potentially unsafe / unescaped html into the browser leading to Cross-Site Scripting (XSS) attacks.
 

docs/started.md

@@ -17,7 +17,83 @@ npm install --save-dev eslint @intlify/eslint-plugin-vue-i18n
 
 ## :rocket: Usage
 
-Configure your `.eslintrc.*` file.
+### Configuration `eslint.config.[c|m]js`
+
+Use `eslint.config.[c|m]js` file to configure rules. This is the default in ESLint v9, but can be used starting from ESLint v8.57.0. See also: https://eslint.org/docs/latest/use/configure/configuration-files-new.
+
+Example eslint.config.js:
+
+```js
+import vueI18n from '@intlify/eslint-plugin-vue-i18n'
+
+export default [
+  // add more generic rulesets here, such as:
+  // js.configs.recommended, // '@eslint/js'
+  // ...vue.configs['flat/recommended'], // 'eslint-plugin-vue'
+
+  ...vueI18n.configs['flat/recommended'],
+  {
+    rules: {
+      // Optional.
+      '@intlify/vue-i18n/no-dynamic-keys': 'error',
+      '@intlify/vue-i18n/no-unused-keys': [
+        'error',
+        {
+          extensions: ['.js', '.vue']
+        }
+      ]
+    },
+    settings: {
+      'vue-i18n': {
+        localeDir: './path/to/locales/*.{json,json5,yaml,yml}', // extension is glob formatting!
+        // or
+        // localeDir: {
+        //   pattern: './path/to/locales/*.{json,json5,yaml,yml}', // extension is glob formatting!
+        //   localeKey: 'file' // or 'path' or 'key'
+        // }
+        // or
+        // localeDir: [
+        //   {
+        //     // 'file' case
+        //     pattern: './path/to/locales1/*.{json,json5,yaml,yml}',
+        //     localeKey: 'file'
+        //   },
+        //   {
+        //     // 'path' case
+        //     pattern: './path/to/locales2/*.{json,json5,yaml,yml}',
+        //     localePattern: /^.*\/(?<locale>[A-Za-z0-9-_]+)\/.*\.(json5?|ya?ml)$/,
+        //     localeKey: 'path'
+        //   },
+        //   {
+        //     // 'key' case
+        //     pattern: './path/to/locales3/*.{json,json5,yaml,yml}',
+        //     localeKey: 'key'
+        //   },
+        // ]
+
+        // Specify the version of `vue-i18n` you are using.
+        // If not specified, the message will be parsed twice.
+        messageSyntaxVersion: '^9.0.0'
+      }
+    }
+  }
+]
+```
+
+See the [rule list](./rules/index.md) to get the `configs` & `rules` that this plugin provides.
+
+#### Bundle Configurations `eslint.config.[c|m]js`
+
+This plugin provides some predefined configs. You can use the following configs by adding them to `eslint.config.[c|m]js`. (All flat configs in this plugin are provided as arrays, so spread syntax is required when combining them with other configs.)
+
+- `*.configs["flat/base"]`: Settings and rules to enable correct ESLint parsing.
+- `*.configs["flat/recommended"]`: Above, plus rules to enforce subjective community defaults to ensure consistency.
+
+### Configuration `.eslintrc.*`
+
+Use `.eslintrc.*` file to configure rules in ESLint < v9. See also: https://eslint.org/docs/latest/use/configure/.
+
+Example `.eslintrc.js`:
 
 For example:
 
@@ -74,7 +150,14 @@ module.export = {
 }
 ```
 
-See [the rule list](/rules/)
+See the [rule list](./rules/index.md) to get the `configs` & `rules` that this plugin provides.
+
+#### Bundle Configurations `.eslintrc.*`
+
+This plugin provides some predefined configs. You can use the following configs by adding them to `.eslintrc.*`. (All flat configs in this plugin are provided as arrays, so spread syntax is required when combining them with other configs.)
+
+- `"plugin:@intlify/vue-i18n/base"`: Settings and rules to enable correct ESLint parsing.
+- `"plugin:@intlify/vue-i18n/recommended"`: Above, plus rules to enforce subjective community defaults to ensure consistency.
 
 ### `settings['vue-i18n']`
 
@@ -102,7 +185,7 @@ If you want to run `eslint` from command line, make sure you include the `.vue`,
 
 Examples:
 
-```bash
+```sh
 eslint --ext .js,.vue,.json src
 eslint "src/**/*.{js,vue,json}"
 # Specify the extension you use.