Scaffolded project has eslint(prettier/prettier) warnings

[tony19]

Description

There is no .pretterrc in the scaffold, so Prettier uses its default options, which includes printWidth=80, semi=true, and singleQuote=false. This default config causes Prettier warnings in almost all .vue files.

Also, the scaffolded .eslintrc.cjs contains double-quoted keys, which causes Prettier warnings:

/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution"); // 💡 Replace `"@rushstack/eslint-patch/modern-module-resolution");` with `'@rushstack/eslint-patch/modern-module-resolution')`

module.exports = {
  "root": true, // 💡 Replace `"root"` with `root`
  "extends": [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/eslint-config-prettier"
  ] // 💡 Replace `"extends":·[⏎····"plugin:vue/vue3-essential",⏎····"eslint:recommended",⏎····"@vue/eslint-config-prettier"⏎··` with `extends:·['plugin:vue/vue3-essential',·'eslint:recommended',·'@vue/eslint-config-prettier'`
}

I think that's caused by JSON.stringify() in the following line:

https://github.com/vuejs/create-vue/blob/58c4fdb5c53a5019401a86568868ce9cf255a3ce/utils/renderEslint.ts#L65

Steps to reproduce

1. Scaffold a project with create-vue:

   npm init vue my-project # select ESLint and Prettier options
   

2. Open the project in VS Code.

3. In VS Code, install the official ESLint extension (if not already).

4. Observe the linter warnings in all .vue files, and in .eslintrc.cjs.

Workaround

Copy create-vue's .prettierrc (which I presume was used to format the templates here) to the scaffolded project's root directory, but I think that should be done by create-vue automatically.