fix: generated vue-ts config (#64)

* fix: vue config should be placed at the end of extends fixes eslint/eslint#17221 * chore: review suggestions * chore: review suggestions
eslint · Jun 1, 2023 · 0be55af · 0be55af
1 parent 72ffdcd
commit 0be55af
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 16 deletions.
diff --git a/lib/init/config-initializer.js b/lib/init/config-initializer.js
@@ -156,6 +156,7 @@ function processAnswers(answers) {
         env: {},
         parserOptions: {},
         extends: [],
+        plugins: [],
         overrides: []
     };
 
@@ -174,24 +175,18 @@ function processAnswers(answers) {
         config.env[env] = true;
     });
 
-    // add in library information
-    if (answers.framework === "react") {
-        config.plugins = ["react"];
-        config.extends.push("plugin:react/recommended");
-    } else if (answers.framework === "vue") {
-        config.plugins = ["vue"];
-        config.extends.push("plugin:vue/vue3-essential");
-    }
-
     // if answers.source == "guide", the ts supports should be in the shared config.
     if (answers.typescript && answers.source !== "guide") {
-        config.parser = "@typescript-eslint/parser";
 
-        if (Array.isArray(config.plugins)) {
-            config.plugins.push("@typescript-eslint");
+        // .vue files should be parsed by vue-eslint-parser.
+        // https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser
+        if (answers.framework === "vue") {
+            config.parserOptions.parser = "@typescript-eslint/parser";
         } else {
-            config.plugins = ["@typescript-eslint"];
+            config.parser = "@typescript-eslint/parser";
         }
+
+        config.plugins.push("@typescript-eslint");
     }
 
     // set config.extends based the selected guide
@@ -209,7 +204,6 @@ function processAnswers(answers) {
         }
     }
 
-
     // setup rules based on problems/style enforcement preferences
     if (answers.purpose === "problems") {
         config.extends.unshift("eslint:recommended");
@@ -226,12 +220,28 @@ function processAnswers(answers) {
         config.extends.push("plugin:@typescript-eslint/recommended");
     }
 
+    // add in library information
+    // The configuration of the framework plugins should be placed at the end of extends.
+    if (answers.framework === "react" && answers.styleguide !== "airbnb") {
+        config.plugins.push("react");
+        config.extends.push("plugin:react/recommended");
+    } else if (answers.framework === "vue") {
+        config.plugins.push("vue");
+        config.extends.push("plugin:vue/vue3-essential");
+    }
+
     // normalize extends
     if (config.extends.length === 0) {
         delete config.extends;
     } else if (config.extends.length === 1) {
         config.extends = config.extends[0];
     }
+    if (config.overrides.length === 0) {
+        delete config.overrides;
+    }
+    if (config.plugins.length === 0) {
+        delete config.plugins;
+    }
 
     ConfigOps.normalizeToStrings(config);
     return config;

diff --git a/tests/init/config-initializer.js b/tests/init/config-initializer.js
@@ -207,8 +207,9 @@ describe("configInitializer", () => {
                 answers.typescript = true;
                 const config = init.processAnswers(answers);
 
-                assert.deepStrictEqual(config.extends, ["eslint:recommended", "plugin:vue/vue3-essential", "plugin:@typescript-eslint/recommended"]);
-                assert.deepStrictEqual(config.plugins, ["vue", "@typescript-eslint"]);
+                assert.include(config.parserOptions, { parser: "@typescript-eslint/parser" });
+                assert.deepStrictEqual(config.extends, ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:vue/vue3-essential"]);
+                assert.deepStrictEqual(config.plugins, ["@typescript-eslint", "vue"]);
             });
 
             it("should extend eslint:recommended", () => {