feat: support ESLint Flat Config

Author: haoqunjiang

LICENSE

@@ -270,35 +270,6 @@ Repository: git://github.com/mde/ejs.git
 >    limitations under the License.
 >
 
-## javascript-stringify
-
-License: MIT
-By: Blake Embrey
-Repository: git+https://github.com/blakeembrey/javascript-stringify.git
-
-> The MIT License (MIT)
->
-> Copyright (c) 2013 Blake Embrey ([email protected])
->
-> Permission is hereby granted, free of charge, to any person obtaining a copy
-> of this software and associated documentation files (the "Software"), to deal
-> in the Software without restriction, including without limitation the rights
-> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-> copies of the Software, and to permit persons to whom the Software is
-> furnished to do so, subject to the following conditions:
->
-> The above copyright notice and this permission notice shall be included in
-> all copies or substantial portions of the Software.
->
-> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-> THE SOFTWARE.
->
-
 ## kleur
 
 License: MIT

package.json

@@ -41,7 +41,7 @@
     "@types/eslint": "^9.6.1",
     "@types/node": "^20.16.10",
     "@types/prompts": "^2.4.9",
-    "@vue/create-eslint-config": "^0.3.3",
+    "@vue/create-eslint-config": "0.4.0",
     "@vue/tsconfig": "^0.5.1",
     "ejs": "^3.1.10",
     "esbuild": "^0.18.20",

pnpm-lock.yaml

@@ -1,3 +1,4 @@
+import fs from 'node:fs'
 import * as esbuild from 'esbuild'
 import esbuildPluginLicense from 'esbuild-plugin-license'
 
@@ -48,6 +49,48 @@ await esbuild.build({
         })
       }
     },
+
+    {
+      name: '@vue/create-eslint-config fix',
+      setup(build) {
+        // Update esbuild to support the import attributes syntax in this PR is too risky.
+        // TODO: update esbuild and remove the hack.
+        build.onLoad({ filter: /@vue\/create-eslint-config\/index.js$/ }, (args) => {
+          const text = fs.readFileSync(args.path, 'utf8')
+          return {
+            contents: text.replace(`with { type: 'json' }`, ''),
+            loader: 'js'
+          }
+        })
+
+        // The renderEjsFile.js module uses file system APIs therefore after bundling it will not work.
+        // So we need to preprocess it to remove the file system APIs.
+        build.onLoad({ filter: /@vue\/create-eslint-config\/renderEjsFile.js$/ }, (args) => {
+          const pkgDir = path.dirname(args.path)
+          const templatesDir = path.resolve(pkgDir, './templates')
+
+          const allTemplateFileNames = fs.readdirSync(templatesDir)
+          const templateFiles = Object.fromEntries(
+            allTemplateFileNames.map((fileName) => {
+              const content = fs.readFileSync(path.resolve(templatesDir, fileName), 'utf8')
+              return [`./templates/${fileName}`, content]
+            })
+          )
+
+          return {
+            contents: `
+              import ejs from 'ejs'
+              const templates = ${JSON.stringify(templateFiles)}
+              export default function renderEjsFile(filePath, data) {
+                return ejs.render(templates[filePath], data, {})
+              }
+            `,
+            loader: 'js'
+          }
+        })
+      }
+    },
+
     esbuildPluginLicense({
       thirdParty: {
         includePrivate: false,

scripts/build.mjs

@@ -1,8 +1,6 @@
 import * as fs from 'node:fs'
 import * as path from 'node:path'
 
-import type { Linter } from 'eslint'
-
 import createESLintConfig from '@vue/create-eslint-config'
 
 import sortDependencies from './sortDependencies'
@@ -15,29 +13,23 @@ export default function renderEslint(
   rootDir,
   { needsTypeScript, needsVitest, needsCypress, needsCypressCT, needsPrettier, needsPlaywright }
 ) {
-  const { additionalConfig, additionalDependencies } = getAdditionalConfigAndDependencies({
+  const additionalConfigs = getAdditionalConfigs({
     needsVitest,
     needsCypress,
     needsCypressCT,
     needsPlaywright
   })
 
   const { pkg, files } = createESLintConfig({
-    vueVersion: '3.x',
-    // we currently don't support other style guides
     styleGuide: 'default',
     hasTypeScript: needsTypeScript,
     needsPrettier,
 
-    additionalConfig,
-    additionalDependencies
+    additionalConfigs
   })
 
   const scripts: Record<string, string> = {
-    // Note that we reuse .gitignore here to avoid duplicating the configuration
-    lint: needsTypeScript
-      ? 'eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore'
-      : 'eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore'
+    lint: 'eslint . --fix'
   }
 
   // Theoretically, we could add Prettier without requring ESLint.
@@ -54,62 +46,90 @@ export default function renderEslint(
   const packageJsonPath = path.resolve(rootDir, 'package.json')
   const existingPkg = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'))
   const updatedPkg = sortDependencies(deepMerge(deepMerge(existingPkg, pkg), { scripts }))
-  fs.writeFileSync(packageJsonPath, JSON.stringify(updatedPkg, null, 2) + '\n', 'utf-8')
+  fs.writeFileSync(packageJsonPath, JSON.stringify(updatedPkg, null, 2) + '\n', 'utf8')
 
-  // write to .eslintrc.cjs, .prettierrc.json, etc.
+  // write to eslint.config.mjs, .prettierrc.json, .editorconfig, etc.
   for (const [fileName, content] of Object.entries(files)) {
     const fullPath = path.resolve(rootDir, fileName)
-    fs.writeFileSync(fullPath, content as string, 'utf-8')
+    fs.writeFileSync(fullPath, content as string, 'utf8')
   }
 }
 
+type ConfigItemInESLintTemplate = {
+  importer: string
+  content: string
+}
+type AdditionalConfig = {
+  devDependencies: Record<string, string>
+  beforeVuePlugin?: Array<ConfigItemInESLintTemplate>
+  afterVuePlugin?: Array<ConfigItemInESLintTemplate>
+}
+type AdditionalConfigArray = Array<AdditionalConfig>
+
 // visible for testing
-export function getAdditionalConfigAndDependencies({
+export function getAdditionalConfigs({
   needsVitest,
   needsCypress,
   needsCypressCT,
   needsPlaywright
 }) {
-  const additionalConfig: Linter.Config = {}
-  const additionalDependencies = {}
+  const additionalConfigs: AdditionalConfigArray = []
 
   if (needsVitest) {
-    additionalConfig.overrides = [
-      {
-        files: ['src/**/*.{test,spec}.{js,ts,jsx,tsx}'],
-        extends: ['plugin:@vitest/legacy-recommended']
-      }
-    ]
-
-    additionalDependencies['@vitest/eslint-plugin'] = eslintDeps['@vitest/eslint-plugin']
+    additionalConfigs.push({
+      devDependencies: { '@vitest/eslint-plugin': eslintDeps['@vitest/eslint-plugin'] },
+      afterVuePlugin: [
+        {
+          importer: `import pluginVitest from '@vitest/eslint-plugin'`,
+          content: `
+  {
+    ...pluginVitest.configs['recommended'],
+    files: ['src/**/__tests__/*'],
+  },`
+        }
+      ]
+    })
   }
 
   if (needsCypress) {
-    additionalConfig.overrides = [
-      {
-        files: needsCypressCT
-          ? [
-              '**/__tests__/*.{cy,spec}.{js,ts,jsx,tsx}',
-              'cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}',
-              'cypress/support/**/*.{js,ts,jsx,tsx}'
-            ]
-          : ['cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}', 'cypress/support/**/*.{js,ts,jsx,tsx}'],
-        extends: ['plugin:cypress/recommended']
-      }
-    ]
-
-    additionalDependencies['eslint-plugin-cypress'] = eslintDeps['eslint-plugin-cypress']
+    additionalConfigs.push({
+      devDependencies: { 'eslint-plugin-cypress': eslintDeps['eslint-plugin-cypress'] },
+      afterVuePlugin: [
+        {
+          importer: "import pluginCypress from 'eslint-plugin-cypress/flat'",
+          content: `
+  {
+    ...pluginCypress.configs.recommended,
+    files: [
+      ${[
+        ...(needsCypressCT ? ["'**/__tests__/*.{cy,spec}.{js,ts,jsx,tsx}',"] : []),
+        'cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}',
+        'cypress/support/**/*.{js,ts,jsx,tsx}'
+      ]
+        .map(JSON.stringify.bind(JSON))
+        .join(',\n      ')}
+    ],
+  },`
+        }
+      ]
+    })
   }
 
   if (needsPlaywright) {
-    additionalConfig.overrides = [
-      {
-        files: ['e2e/**/*.{test,spec}.{js,ts,jsx,tsx}'],
-        extends: ['plugin:playwright/recommended']
-      }
-    ]
-
-    additionalDependencies['eslint-plugin-playwright'] = eslintDeps['eslint-plugin-playwright']
+    additionalConfigs.push({
+      devDependencies: { 'eslint-plugin-playwright': eslintDeps['eslint-plugin-playwright'] },
+      afterVuePlugin: [
+        {
+          importer: "import pluginPlaywright from 'eslint-plugin-playwright'",
+          content: `
+  {
+    ...pluginPlaywright.configs['flat/recommended'],
+    files: ['e2e/**/*.{test,spec}.{js,ts,jsx,tsx}'],
+  },`
+        }
+      ]
+    })
   }
-  return { additionalConfig, additionalDependencies }
+
+  return additionalConfigs
 }