feat!: support flat config

lib/config-generator.js

@@ -148,10 +148,6 @@ const compat = new FlatCompat({baseDirectory: __dirname, recommendedConfig: plug
         let exportContent = "";
         let needCompatHelper = false;
 
-        if (this.answers.moduleType === "commonjs" || this.answers.moduleType === "script") {
-            exportContent += `  {files: ["**/*.js"], languageOptions: {sourceType: "${this.answers.moduleType}"}},\n`;
-        }
-
         if (this.answers.purpose === "syntax") {
 
             // no need to install any plugin
@@ -185,19 +181,6 @@ const compat = new FlatCompat({baseDirectory: __dirname, recommendedConfig: plug
             }
         }
 
-        if (this.answers.env?.length > 0) {
-            this.result.devDependencies.push("globals");
-            importContent += "import globals from \"globals\";\n";
-            const envContent = {
-                browser: "globals: globals.browser",
-                node: "globals: globals.node",
-                "browser,node": "globals: {...globals.browser, ...globals.node}"
-            };
-
-            exportContent += `  {languageOptions: { ${envContent[this.answers.env.join(",")]} }},\n`;
-        }
-
-
         if (this.answers.language === "typescript") {
             this.result.devDependencies.push("typescript-eslint");
             importContent += "import tseslint from \"typescript-eslint\";\n";
@@ -208,12 +191,8 @@ const compat = new FlatCompat({baseDirectory: __dirname, recommendedConfig: plug
 
             this.result.devDependencies.push("eslint-plugin-vue");
 
-            // importContent += "import pluginVue from \"eslint-plugin-vue\";\n";
-
-            // // TODO: there is a wip for flat support - https://github.com/vuejs/eslint-plugin-vue/pull/2319
-            // exportContent += "  pluginVue.configs[\"flat/essential\"],\n";
-            needCompatHelper = true;
-            exportContent += "  ...compat.extends(\"plugin:vue/vue3-essential\").map(config => ({files: [\"**/*.vue\"], ...config})),\n";
+            importContent += "import pluginVue from \"eslint-plugin-vue\";\n";
+            exportContent += "  pluginVue.configs[\"flat/essential\"],\n";
         }
 
         if (this.answers.framework === "react") {
@@ -222,6 +201,22 @@ const compat = new FlatCompat({baseDirectory: __dirname, recommendedConfig: plug
             exportContent += "  pluginReactConfig,\n";
         }
 
+        if (this.answers.moduleType === "commonjs" || this.answers.moduleType === "script") {
+            exportContent += `  {files: ["**/*.js"], languageOptions: {sourceType: "${this.answers.moduleType}"}},\n`;
+        }
+
+        if (this.answers.env?.length > 0) {
+            this.result.devDependencies.push("globals");
+            importContent += "import globals from \"globals\";\n";
+            const envContent = {
+                browser: "globals: globals.browser",
+                node: "globals: globals.node",
+                "browser,node": "globals: {...globals.browser, ...globals.node}"
+            };
+
+            exportContent += `  {languageOptions: { ${envContent[this.answers.env.join(",")]} }},\n`;
+        }
+
         if (needCompatHelper) {
             this.result.devDependencies.push("@eslint/eslintrc", "@eslint/js");
         }

tests/__snapshots__/problems-commonjs-none-javascript

@@ -4,8 +4,8 @@ import globals from "globals";
 
 
 export default [
-  {files: ["**/*.js"], languageOptions: {sourceType: "commonjs"}},
   pluginJs.configs.recommended,
+  {files: ["**/*.js"], languageOptions: {sourceType: "commonjs"}},
   {languageOptions: { globals: {...globals.browser, ...globals.node} }},
 ];",
   "configFilename": "eslint.config.js",

tests/__snapshots__/problems-commonjs-none-typescript

@@ -1,20 +1,20 @@
 {
   "configContent": "import pluginJs from "@eslint/js";
-import globals from "globals";
 import tseslint from "typescript-eslint";
+import globals from "globals";
 
 
 export default [
-  {files: ["**/*.js"], languageOptions: {sourceType: "commonjs"}},
   pluginJs.configs.recommended,
-  {languageOptions: { globals: {...globals.browser, ...globals.node} }},
   ...tseslint.configs.recommended,
+  {files: ["**/*.js"], languageOptions: {sourceType: "commonjs"}},
+  {languageOptions: { globals: {...globals.browser, ...globals.node} }},
 ];",
   "configFilename": "eslint.config.js",
   "devDependencies": [
     "eslint",
     "@eslint/js",
-    "globals",
     "typescript-eslint",
+    "globals",
   ],
 }

tests/__snapshots__/problems-commonjs-react-javascript

@@ -1,20 +1,20 @@
 {
   "configContent": "import pluginJs from "@eslint/js";
-import globals from "globals";
 import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
+import globals from "globals";
 
 
 export default [
-  {files: ["**/*.js"], languageOptions: {sourceType: "commonjs"}},
   pluginJs.configs.recommended,
-  {languageOptions: { globals: {...globals.browser, ...globals.node} }},
   pluginReactConfig,
+  {files: ["**/*.js"], languageOptions: {sourceType: "commonjs"}},
+  {languageOptions: { globals: {...globals.browser, ...globals.node} }},
 ];",
   "configFilename": "eslint.config.js",
   "devDependencies": [
     "eslint",
     "@eslint/js",
-    "globals",
     "eslint-plugin-react",
+    "globals",
   ],
 }

tests/__snapshots__/problems-commonjs-react-typescript

@@ -1,23 +1,23 @@
 {
   "configContent": "import pluginJs from "@eslint/js";
-import globals from "globals";
 import tseslint from "typescript-eslint";
 import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
+import globals from "globals";
 
 
 export default [
-  {files: ["**/*.js"], languageOptions: {sourceType: "commonjs"}},
   pluginJs.configs.recommended,
-  {languageOptions: { globals: {...globals.browser, ...globals.node} }},
   ...tseslint.configs.recommended,
   pluginReactConfig,
+  {files: ["**/*.js"], languageOptions: {sourceType: "commonjs"}},
+  {languageOptions: { globals: {...globals.browser, ...globals.node} }},
 ];",
   "configFilename": "eslint.config.js",
   "devDependencies": [
     "eslint",
     "@eslint/js",
-    "globals",
     "typescript-eslint",
     "eslint-plugin-react",
+    "globals",
   ],
 }

tests/__snapshots__/problems-commonjs-vue-javascript

@@ -1,30 +1,20 @@
 {
   "configContent": "import pluginJs from "@eslint/js";
+import pluginVue from "eslint-plugin-vue";
 import globals from "globals";
 
-import path from "path";
-import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
-import pluginJs from "@eslint/js";
-
-// mimic CommonJS variables -- not needed if using CommonJS
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const compat = new FlatCompat({baseDirectory: __dirname, recommendedConfig: pluginJs.configs.recommended});
 
 export default [
-  {files: ["**/*.js"], languageOptions: {sourceType: "commonjs"}},
   pluginJs.configs.recommended,
+  pluginVue.configs["flat/essential"],
+  {files: ["**/*.js"], languageOptions: {sourceType: "commonjs"}},
   {languageOptions: { globals: {...globals.browser, ...globals.node} }},
-  ...compat.extends("plugin:vue/vue3-essential").map(config => ({files: ["**/*.vue"], ...config})),
 ];",
   "configFilename": "eslint.config.js",
   "devDependencies": [
     "eslint",
     "@eslint/js",
-    "globals",
     "eslint-plugin-vue",
-    "@eslint/eslintrc",
-    "@eslint/js",
+    "globals",
   ],
 }

tests/__snapshots__/problems-commonjs-vue-typescript

@@ -1,33 +1,23 @@
 {
   "configContent": "import pluginJs from "@eslint/js";
-import globals from "globals";
 import tseslint from "typescript-eslint";
+import pluginVue from "eslint-plugin-vue";
+import globals from "globals";
 
-import path from "path";
-import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
-import pluginJs from "@eslint/js";
-
-// mimic CommonJS variables -- not needed if using CommonJS
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const compat = new FlatCompat({baseDirectory: __dirname, recommendedConfig: pluginJs.configs.recommended});
 
 export default [
-  {files: ["**/*.js"], languageOptions: {sourceType: "commonjs"}},
   pluginJs.configs.recommended,
-  {languageOptions: { globals: {...globals.browser, ...globals.node} }},
   ...tseslint.configs.recommended,
-  ...compat.extends("plugin:vue/vue3-essential").map(config => ({files: ["**/*.vue"], ...config})),
+  pluginVue.configs["flat/essential"],
+  {files: ["**/*.js"], languageOptions: {sourceType: "commonjs"}},
+  {languageOptions: { globals: {...globals.browser, ...globals.node} }},
 ];",
   "configFilename": "eslint.config.js",
   "devDependencies": [
     "eslint",
     "@eslint/js",
-    "globals",
     "typescript-eslint",
     "eslint-plugin-vue",
-    "@eslint/eslintrc",
-    "@eslint/js",
+    "globals",
   ],
 }

tests/__snapshots__/problems-esm-none-typescript

@@ -1,19 +1,19 @@
 {
   "configContent": "import pluginJs from "@eslint/js";
-import globals from "globals";
 import tseslint from "typescript-eslint";
+import globals from "globals";
 
 
 export default [
   pluginJs.configs.recommended,
-  {languageOptions: { globals: {...globals.browser, ...globals.node} }},
   ...tseslint.configs.recommended,
+  {languageOptions: { globals: {...globals.browser, ...globals.node} }},
 ];",
   "configFilename": "eslint.config.js",
   "devDependencies": [
     "eslint",
     "@eslint/js",
-    "globals",
     "typescript-eslint",
+    "globals",
   ],
 }

tests/__snapshots__/problems-esm-react-javascript

@@ -1,19 +1,19 @@
 {
   "configContent": "import pluginJs from "@eslint/js";
-import globals from "globals";
 import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
+import globals from "globals";
 
 
 export default [
   pluginJs.configs.recommended,
-  {languageOptions: { globals: {...globals.browser, ...globals.node} }},
   pluginReactConfig,
+  {languageOptions: { globals: {...globals.browser, ...globals.node} }},
 ];",
   "configFilename": "eslint.config.js",
   "devDependencies": [
     "eslint",
     "@eslint/js",
-    "globals",
     "eslint-plugin-react",
+    "globals",
   ],
 }

tests/__snapshots__/problems-esm-react-typescript

@@ -1,22 +1,22 @@
 {
   "configContent": "import pluginJs from "@eslint/js";
-import globals from "globals";
 import tseslint from "typescript-eslint";
 import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
+import globals from "globals";
 
 
 export default [
   pluginJs.configs.recommended,
-  {languageOptions: { globals: {...globals.browser, ...globals.node} }},
   ...tseslint.configs.recommended,
   pluginReactConfig,
+  {languageOptions: { globals: {...globals.browser, ...globals.node} }},
 ];",
   "configFilename": "eslint.config.js",
   "devDependencies": [
     "eslint",
     "@eslint/js",
-    "globals",
     "typescript-eslint",
     "eslint-plugin-react",
+    "globals",
   ],
 }

tests/__snapshots__/problems-esm-vue-javascript

@@ -1,29 +1,19 @@
 {
   "configContent": "import pluginJs from "@eslint/js";
+import pluginVue from "eslint-plugin-vue";
 import globals from "globals";
 
-import path from "path";
-import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
-import pluginJs from "@eslint/js";
-
-// mimic CommonJS variables -- not needed if using CommonJS
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const compat = new FlatCompat({baseDirectory: __dirname, recommendedConfig: pluginJs.configs.recommended});
 
 export default [
   pluginJs.configs.recommended,
+  pluginVue.configs["flat/essential"],
   {languageOptions: { globals: {...globals.browser, ...globals.node} }},
-  ...compat.extends("plugin:vue/vue3-essential").map(config => ({files: ["**/*.vue"], ...config})),
 ];",
   "configFilename": "eslint.config.js",
   "devDependencies": [
     "eslint",
     "@eslint/js",
-    "globals",
     "eslint-plugin-vue",
-    "@eslint/eslintrc",
-    "@eslint/js",
+    "globals",
   ],
 }

tests/__snapshots__/problems-esm-vue-typescript

@@ -1,32 +1,22 @@
 {
   "configContent": "import pluginJs from "@eslint/js";
-import globals from "globals";
 import tseslint from "typescript-eslint";
+import pluginVue from "eslint-plugin-vue";
+import globals from "globals";
 
-import path from "path";
-import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
-import pluginJs from "@eslint/js";
-
-// mimic CommonJS variables -- not needed if using CommonJS
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const compat = new FlatCompat({baseDirectory: __dirname, recommendedConfig: pluginJs.configs.recommended});
 
 export default [
   pluginJs.configs.recommended,
-  {languageOptions: { globals: {...globals.browser, ...globals.node} }},
   ...tseslint.configs.recommended,
-  ...compat.extends("plugin:vue/vue3-essential").map(config => ({files: ["**/*.vue"], ...config})),
+  pluginVue.configs["flat/essential"],
+  {languageOptions: { globals: {...globals.browser, ...globals.node} }},
 ];",
   "configFilename": "eslint.config.js",
   "devDependencies": [
     "eslint",
     "@eslint/js",
-    "globals",
     "typescript-eslint",
     "eslint-plugin-vue",
-    "@eslint/eslintrc",
-    "@eslint/js",
+    "globals",
   ],
 }

tests/__snapshots__/problems-script-none-javascript

@@ -4,8 +4,8 @@ import globals from "globals";
 
 
 export default [
-  {files: ["**/*.js"], languageOptions: {sourceType: "script"}},
   pluginJs.configs.recommended,
+  {files: ["**/*.js"], languageOptions: {sourceType: "script"}},
   {languageOptions: { globals: {...globals.browser, ...globals.node} }},
 ];",
   "configFilename": "eslint.config.js",