fix: generated vue-ts config

[aladdin-add]

fixes eslint/eslint#17221

it's a bug when choosing vue+ts. to repro:

➜  $ npm init @eslint/config                                           
Need to install the following packages:
  @eslint/create-config@0.4.3
Ok to proceed? (y) y
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · vue
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm

the generated config (.eslintrc.cjs):

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended"
    ],
    "overrides": [
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

the cause is .vue files should be parsed by vue-eslint-parser, not @typescript-eslint/parser. Its documentation says that custom parsers should use parserOption.parser to config.
https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser

the new generated config:

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:vue/vue3-essential"
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint",
        "vue"
    ],
    "rules": {
    }
}

[mdjermanovic]

After this change, plugin:react/recommended would come after airbnb, so some rules that airbnb explicitly turns off (for example, react/jsx-key because it has too many false positives) would be enabled. Perhaps there's actually no need for plugin:react/recommended when airbnb is selected?

[aladdin-add]

yes, but IMHO, the recommended config should always be safe to use - if the rule has too many false positives, it should not be enabled in the recommended. :)

[mdjermanovic]

Yes, it looks unusual that shareable config disables plugin's recommended rules, but I think that generally if the selected shareable config uses a plugin, then the shareable config should have precedence over plugin's configs, i.e. we should just not use plugin's configs.

[mdjermanovic]

LGTM, thanks!