future-architect · ota-meshi · Mar 23, 2024 · Mar 23, 2024 · Mar 23, 2024 · Mar 23, 2024
diff --git a/.changeset/clean-wasps-bake.md b/.changeset/clean-wasps-bake.md
@@ -0,0 +1,5 @@
+---
+"eslint-plugin-vue-scoped-css": minor
+---
+
+feat: add support for flat config
diff --git a/README.md b/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"]
 }
 ```
 

diff --git a/docs/.vuepress/categories.js b/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,

diff --git a/docs/.vuepress/components/rules/index.js b/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";

diff --git a/docs/rules/README.md b/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"]
 }
 ```
 

diff --git a/docs/rules/enforce-style-type.md b/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
 

diff --git a/docs/rules/no-deprecated-deep-combinator.md b/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

diff --git a/docs/rules/no-parent-of-v-global.md b/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
 

diff --git a/docs/rules/no-parsing-error.md b/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
 

diff --git a/docs/rules/no-unused-keyframes.md b/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
 

diff --git a/docs/rules/no-unused-selector.md b/docs/rules/no-unused-selector.md
@@ -8,7 +8,7 @@ description: "disallow selectors defined in Scoped CSS that don't use in `<templ
 
 > disallow selectors defined in Scoped CSS that don't use in `<template>`
 
-- :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
 

diff --git a/docs/rules/require-v-deep-argument.md b/docs/rules/require-v-deep-argument.md
@@ -8,7 +8,7 @@ description: "require selector argument to be passed to `::v-deep()`"
 
 > require selector argument to be passed to `::v-deep()`
 
-- :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

diff --git a/docs/rules/require-v-global-argument.md b/docs/rules/require-v-global-argument.md
@@ -8,7 +8,7 @@ description: "require selector argument to be passed to `::v-global()`"
 
 > require selector argument to be passed to `::v-global()`
 
-- :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
 

diff --git a/docs/rules/require-v-slotted-argument.md b/docs/rules/require-v-slotted-argument.md
@@ -8,7 +8,7 @@ description: "require selector argument to be passed to `::v-slotted()`"
 
 > require selector argument to be passed to `::v-slotted()`
 
-- :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
 

diff --git a/docs/user-guide/README.md b/docs/user-guide/README.md
@@ -13,9 +13,32 @@ npm install --save-dev eslint eslint-plugin-vue-scoped-css vue-eslint-parser
 
 ## Usage
 
-### Configuration
+<!--USAGE_GUIDE_START-->
 
-Use `.eslintrc.*` file to configure rules. See also: [https://eslint.org/docs/user-guide/configuring](https://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**:
 
@@ -33,13 +56,26 @@ module.exports = {
 }
 ```
 
+## Configs
+
 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-->
+
 See [the rule list](../rules/README.md) to get the `rules` that this plugin provides.
 
 ### Running ESLint from command line

diff --git a/lib/configs/all.ts b/lib/configs/all.ts
@@ -1,6 +1,9 @@
 import { collectRules } from "../utils/rules";
-
+import path from "path";
+const base = require.resolve("./base");
+const baseExtend =
+  path.extname(`${base}`) === ".ts" ? "plugin:vue-scoped-css/base" : base;
 export = {
-  extends: require.resolve("./base"),
+  extends: baseExtend,
   rules: collectRules(),
 };
diff --git a/lib/configs/flat/all.ts b/lib/configs/flat/all.ts
@@ -0,0 +1,9 @@
+import { collectRules } from "../../utils/rules";
+import base from "./base";
+
+export default [
+  ...base,
+  {
+    rules: collectRules(),
+  },
+];
diff --git a/lib/configs/flat/base.ts b/lib/configs/flat/base.ts
@@ -0,0 +1,18 @@
+import type { ESLint } from "eslint";
+import * as vueParser from "vue-eslint-parser";
+export default [
+  {
+    plugins: {
+      // eslint-disable-next-line @typescript-eslint/naming-convention -- plugin name
+      get "vue-scoped-css"(): ESLint.Plugin {
+        return require("../../index");
+      },
+    },
+  },
+  {
+    files: ["*.vue", "**/*.vue"],
+    languageOptions: {
+      parser: vueParser,
+    },
+  },
+];
diff --git a/lib/configs/flat/recommended.ts b/lib/configs/flat/recommended.ts
@@ -0,0 +1,9 @@
+import { collectRules } from "../../utils/rules";
+import base from "./base";
+
+export default [
+  ...base,
+  {
+    rules: collectRules("vue3-recommended"),
+  },
+];
diff --git a/lib/configs/flat/vue2-recommended.ts b/lib/configs/flat/vue2-recommended.ts
@@ -0,0 +1,9 @@
+import { collectRules } from "../../utils/rules";
+import base from "./base";
+
+export default [
+  ...base,
+  {
+    rules: collectRules("vue2-recommended"),
+  },
+];
diff --git a/lib/configs/recommended.ts b/lib/configs/recommended.ts
@@ -1,6 +1,9 @@
 import { collectRules } from "../utils/rules";
-
+import path from "path";
+const base = require.resolve("./base");
+const baseExtend =
+  path.extname(`${base}`) === ".ts" ? "plugin:vue-scoped-css/base" : base;
 export = {
-  extends: require.resolve("./base"),
-  rules: collectRules("recommended"),
+  extends: baseExtend,
+  rules: collectRules("vue2-recommended"),
 };