feat: add support for flat config (#338)

* feat: add support for flat config

* Create clean-wasps-bake.md

* fix config

Author: ota-meshi

.changeset/clean-wasps-bake.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-vue-scoped-css": minor
+---
+
+feat: add support for flat config

README.md

@@ -40,7 +40,7 @@ npm install --save-dev eslint eslint-plugin-vue-scoped-css vue-eslint-parser
 ```
 
 > **Requirements**
-> 
+>
 > - ESLint v6.0.0 and above
 > - Node.js v12.22.x, v14.17.x, v16.x and above
 
@@ -49,8 +49,32 @@ npm install --save-dev eslint eslint-plugin-vue-scoped-css vue-eslint-parser
 ## Usage
 
 <!--USAGE_SECTION_START-->
+<!--USAGE_GUIDE_START-->
 
-Create `.eslintrc.*` file to configure rules. See also: [http://eslint.org/docs/user-guide/configuring](http://eslint.org/docs/user-guide/configuring).
+### New (ESLint>=v9) Config (Flat Config)
+
+Use `eslint.config.js` file to configure rules. See also: <https://eslint.org/docs/latest/use/configure/configuration-files-new>.
+
+Example **eslint.config.js**:
+
+```mjs
+import eslintPluginVueScopedCSS from 'eslint-plugin-vue-scoped-css';
+export default [
+  // add more generic rule sets here, such as:
+  // js.configs.recommended,
+  ...eslintPluginVueScopedCSS.configs['flat/recommended'],
+  {
+    rules: {
+      // override/add rules settings here, such as:
+      // 'vue-scoped-css/no-unused-selector': 'error'
+    }
+  }
+];
+```
+
+### Legacy Config (ESLint<v9)
+
+Use `.eslintrc.*` file to configure rules. See also: <https://eslint.org/docs/latest/use/configure/>.
 
 Example **.eslintrc.js**:
 
@@ -72,11 +96,21 @@ module.exports = {
 
 This plugin provides some predefined configs:
 
+### New (ESLint>=v9) Config (Flat Config)
+
+- `*.configs['flat/base']` - Settings and rules to enable this plugin
+- `*.configs['flat/recommended']` - `/base`, plus rules for better ways to help you avoid problems for Vue.js 3.x
+- `*.configs['flat/vue2-recommended']` - `/base`, plus rules for better ways to help you avoid problems for Vue.js 2.x
+- `*.configs['flat/all']` - All rules of this plugin are included
+
+### Legacy Config (ESLint<v9)
+
 - `plugin:vue-scoped-css/base` - Settings and rules to enable this plugin
 - `plugin:vue-scoped-css/recommended` - `/base`, plus rules for better ways to help you avoid problems for Vue.js 2.x
 - `plugin:vue-scoped-css/vue3-recommended` - `/base`, plus rules for better ways to help you avoid problems for Vue.js 3.x
 - `plugin:vue-scoped-css/all` - All rules of this plugin are included
 
+<!--USAGE_GUIDE_END-->
 <!--USAGE_SECTION_END-->
 
 ## Rules
@@ -91,9 +125,17 @@ The `--fix` option on the [command line](https://eslint.org/docs/user-guide/comm
 
 Enforce all the rules in this category with:
 
+```js
+export default [
+  ...eslintPluginVueScopedCSS.configs['flat/recommended'],
+]
+```
+
+or
+
 ```json
 {
-  "extends": "plugin:vue-scoped-css/vue3-recommended"
+  "extends": ["plugin:vue-scoped-css/vue3-recommended"]
 }
 ```
 
@@ -113,9 +155,17 @@ Enforce all the rules in this category with:
 
 Enforce all the rules in this category with:
 
+```js
+export default [
+  ...eslintPluginVueScopedCSS.configs['flat/vue2-recommended'],
+]
+```
+
+or
+
 ```json
 {
-  "extends": "plugin:vue-scoped-css/recommended"
+  "extends": ["plugin:vue-scoped-css/recommended"]
 }
 ```
 

docs/.vuepress/categories.js

@@ -14,18 +14,18 @@ const isCategoryTest = {
   recommended: ({ deprecated, docs: { categories } }) =>
     !deprecated &&
     categories.length &&
-    categories.some((cat) => cat === "recommended") &&
+    categories.some((cat) => cat === "vue2-recommended") &&
     categories.some((cat) => cat === "vue3-recommended"),
   "vue2-recommended": ({ deprecated, docs: { categories } }) =>
     !deprecated &&
     categories.length &&
-    categories.some((cat) => cat === "recommended") &&
+    categories.some((cat) => cat === "vue2-recommended") &&
     categories.every((cat) => cat !== "vue3-recommended"),
   "vue3-recommended": ({ deprecated, docs: { categories } }) =>
     !deprecated &&
     categories.length &&
     categories.some((cat) => cat === "vue3-recommended") &&
-    categories.every((cat) => cat !== "recommended"),
+    categories.every((cat) => cat !== "vue2-recommended"),
   uncategorized: ({ deprecated, docs: { categories } }) =>
     !deprecated && !categories.length,
   deprecated: ({ deprecated }) => deprecated,

docs/.vuepress/components/rules/index.js

@@ -42,7 +42,7 @@ function getCategory({ deprecated, docs: { categories } }) {
   if (deprecated) {
     return "deprecated";
   }
-  const v2 = categories.some((cat) => cat === "recommended");
+  const v2 = categories.some((cat) => cat === "vue2-recommended");
   const v3 = categories.some((cat) => cat === "vue3-recommended");
   if (v2) {
     return v3 ? "recommended" : "vue2-recommended";

docs/rules/README.md

@@ -10,9 +10,17 @@ sidebarDepth: 0
 
 Enforce all the rules in this category with:
 
+```js
+export default [
+  ...eslintPluginVueScopedCSS.configs['flat/recommended'],
+]
+```
+
+or
+
 ```json
 {
-  "extends": "plugin:vue-scoped-css/vue3-recommended"
+  "extends": ["plugin:vue-scoped-css/vue3-recommended"]
 }
 ```
 
@@ -32,9 +40,17 @@ Enforce all the rules in this category with:
 
 Enforce all the rules in this category with:
 
+```js
+export default [
+  ...eslintPluginVueScopedCSS.configs['flat/vue2-recommended'],
+]
+```
+
+or
+
 ```json
 {
-  "extends": "plugin:vue-scoped-css/recommended"
+  "extends": ["plugin:vue-scoped-css/recommended"]
 }
 ```
 

docs/rules/enforce-style-type.md

@@ -8,7 +8,7 @@ description: "enforce the `<style>` tags to be plain or have the `scoped` or `mo
 
 > enforce the `<style>` tags to be plain or have the `scoped` or `module` attribute
 
-- :gear: This rule is included in all of `"plugin:vue-scoped-css/recommended"`, `"plugin:vue-scoped-css/vue3-recommended"` and `"plugin:vue-scoped-css/all"`.
+- :gear: This rule is included in all of `"plugin:vue-scoped-css/all"`, `"plugin:vue-scoped-css/recommended"` and `"plugin:vue-scoped-css/vue3-recommended"`.
 
 ## :book: Rule Details
 

docs/rules/no-deprecated-deep-combinator.md

@@ -8,7 +8,7 @@ description: "disallow using deprecated deep combinators"
 
 > disallow using deprecated deep combinators
 
-- :gear: This rule is included in `"plugin:vue-scoped-css/vue3-recommended"` and `"plugin:vue-scoped-css/all"`.
+- :gear: This rule is included in `"plugin:vue-scoped-css/all"` and `"plugin:vue-scoped-css/vue3-recommended"`.
 - :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details

docs/rules/no-parent-of-v-global.md

@@ -8,7 +8,7 @@ description: "disallow parent selector for `::v-global` pseudo-element"
 
 > disallow parent selector for `::v-global` pseudo-element
 
-- :gear: This rule is included in `"plugin:vue-scoped-css/vue3-recommended"` and `"plugin:vue-scoped-css/all"`.
+- :gear: This rule is included in `"plugin:vue-scoped-css/all"` and `"plugin:vue-scoped-css/vue3-recommended"`.
 
 ## :book: Rule Details
 

docs/rules/no-parsing-error.md

@@ -8,7 +8,7 @@ description: "disallow parsing errors in `<style>`"
 
 > disallow parsing errors in `<style>`
 
-- :gear: This rule is included in all of `"plugin:vue-scoped-css/recommended"`, `"plugin:vue-scoped-css/vue3-recommended"` and `"plugin:vue-scoped-css/all"`.
+- :gear: This rule is included in all of `"plugin:vue-scoped-css/all"`, `"plugin:vue-scoped-css/recommended"` and `"plugin:vue-scoped-css/vue3-recommended"`.
 
 ## :book: Rule Details
 

docs/rules/no-unused-keyframes.md

@@ -8,7 +8,7 @@ description: "disallow `@keyframes` which don't use in Scoped CSS"
 
 > disallow `@keyframes` which don't use in Scoped CSS
 
-- :gear: This rule is included in all of `"plugin:vue-scoped-css/recommended"`, `"plugin:vue-scoped-css/vue3-recommended"` and `"plugin:vue-scoped-css/all"`.
+- :gear: This rule is included in all of `"plugin:vue-scoped-css/all"`, `"plugin:vue-scoped-css/recommended"` and `"plugin:vue-scoped-css/vue3-recommended"`.
 
 ## :book: Rule Details