feat: add experimental Oxlint integration (#601)

Author: haoqunjiang

index.ts

@@ -141,7 +141,8 @@ async function init() {
     needsPinia?: boolean
     needsVitest?: boolean
     needsE2eTesting?: false | 'cypress' | 'nightwatch' | 'playwright'
-    needsEslint?: boolean
+    needsEslint?: false | 'eslintOnly' | 'speedUpWithOxlint'
+    needsOxlint?: boolean
     needsPrettier?: boolean
     needsDevTools?: boolean
   } = {}
@@ -274,11 +275,23 @@ async function init() {
         },
         {
           name: 'needsEslint',
-          type: () => (isFeatureFlagsUsed ? null : 'toggle'),
+          type: () => (isFeatureFlagsUsed ? null : 'select'),
           message: language.needsEslint.message,
-          initial: false,
-          active: language.defaultToggleOptions.active,
-          inactive: language.defaultToggleOptions.inactive,
+          initial: 0,
+          choices: [
+            {
+              title: language.needsEslint.selectOptions.negative.title,
+              value: false,
+            },
+            {
+              title: language.needsEslint.selectOptions.eslintOnly.title,
+              value: 'eslintOnly',
+            },
+            {
+              title: language.needsEslint.selectOptions.speedUpWithOxlint.title,
+              value: 'speedUpWithOxlint',
+            },
+          ],
         },
         {
           name: 'needsPrettier',
@@ -324,11 +337,13 @@ async function init() {
     needsRouter = argv.router || argv['vue-router'],
     needsPinia = argv.pinia,
     needsVitest = argv.vitest || argv.tests,
-    needsEslint = argv.eslint || argv['eslint-with-prettier'],
     needsPrettier = argv['eslint-with-prettier'],
     needsDevTools = argv.devtools || argv['vue-devtools'],
   } = result
 
+  const needsEslint = Boolean(argv.eslint || argv['eslint-with-prettier'] || result.needsEslint)
+  const needsOxlint = result.needsEslint === 'speedUpWithOxlint'
+
   const { needsE2eTesting } = result
   const needsCypress = argv.cypress || argv.tests || needsE2eTesting === 'cypress'
   const needsCypressCT = needsCypress && !needsVitest
@@ -459,6 +474,7 @@ async function init() {
   if (needsEslint) {
     renderEslint(root, {
       needsTypeScript,
+      needsOxlint,
       needsVitest,
       needsCypress,
       needsCypressCT,

locales/en-US.json

@@ -45,7 +45,16 @@
     }
   },
   "needsEslint": {
-    "message": "Add ESLint for code quality?"
+    "message": "Add ESLint for code quality?",
+    "selectOptions": {
+      "negative": { "title": "No" },
+      "eslintOnly": {
+        "title": "Yes"
+      },
+      "speedUpWithOxlint": {
+        "title": "Yes, and speed up with Oxlint (experimental)"
+      }
+    }
   },
   "needsPrettier": {
     "message": "Add Prettier for code formatting?"

locales/fr-FR.json

@@ -45,7 +45,16 @@
     }
   },
   "needsEslint": {
-    "message": "Ajouter ESLint pour la qualité du code\u00a0?"
+    "message": "Ajouter ESLint pour la qualité du code\u00a0?",
+    "selectOptions": {
+      "negative": { "title": "Non" },
+      "eslintOnly": {
+        "title": "Oui"
+      },
+      "speedUpWithOxlint": {
+        "title": "Oui, et accélérer avec Oxlint (expérimental)"
+      }
+    }
   },
   "needsPrettier": {
     "message": "Ajouter Prettier pour le formatage du code\u00a0?"

locales/tr-TR.json

@@ -45,7 +45,16 @@
     }
   },
   "needsEslint": {
-    "message": "Kod kalitesi için ESLint eklensin mi?"
+    "message": "Kod kalitesi için ESLint eklensin mi?",
+    "selectOptions": {
+      "negative": { "title": "Hayır" },
+      "eslintOnly": {
+        "title": "Evet"
+      },
+      "speedUpWithOxlint": {
+        "title": "Evet ve Oxlint ile hızlanın (deneysel)"
+      }
+    }
   },
   "needsPrettier": {
     "message": "Kod formatlama için Prettier eklensin mi?"

locales/zh-Hans.json

@@ -45,7 +45,16 @@
     }
   },
   "needsEslint": {
-    "message": "是否引入 ESLint 用于代码质量检测？"
+    "message": "是否引入 ESLint 用于代码质量检测？",
+    "selectOptions": {
+      "negative": { "title": "否" },
+      "eslintOnly": {
+        "title": "是"
+      },
+      "speedUpWithOxlint": {
+        "title": "是，并同时引入 Oxlint 以加快检测（试验阶段）"
+      }
+    }
   },
   "needsPrettier": {
     "message": "是否引入 Prettier 用于代码格式化？"

locales/zh-Hant.json

@@ -49,7 +49,16 @@
     }
   },
   "needsEslint": {
-    "message": "是否引入 ESLint 用於程式碼品質檢測？"
+    "message": "是否引入 ESLint 用於程式碼品質檢測？",
+    "selectOptions": {
+      "negative": { "title": "否" },
+      "eslintOnly": {
+        "title": "是"
+      },
+      "speedUpWithOxlint": {
+        "title": "是，並同時引入 Oxlint 以加快檢測（試驗性功能）"
+      }
+    }
   },
   "needsPrettier": {
     "message": "是否引入 Prettier 用於程式碼格式化？"

package.json

@@ -41,7 +41,7 @@
     "@types/eslint": "^9.6.1",
     "@types/node": "^20.17.6",
     "@types/prompts": "^2.4.9",
-    "@vue/create-eslint-config": "0.5.0",
+    "@vue/create-eslint-config": "^0.6.0",
     "@vue/tsconfig": "^0.5.1",
     "ejs": "^3.1.10",
     "esbuild": "^0.24.0",

pnpm-lock.yaml

@@ -11,7 +11,15 @@ const eslintDeps = eslintTemplatePackage.devDependencies
 
 export default function renderEslint(
   rootDir,
-  { needsTypeScript, needsVitest, needsCypress, needsCypressCT, needsPrettier, needsPlaywright },
+  {
+    needsTypeScript,
+    needsVitest,
+    needsCypress,
+    needsCypressCT,
+    needsOxlint,
+    needsPrettier,
+    needsPlaywright,
+  },
 ) {
   const additionalConfigs = getAdditionalConfigs({
     needsVitest,
@@ -23,32 +31,20 @@ export default function renderEslint(
   const { pkg, files } = createESLintConfig({
     styleGuide: 'default',
     hasTypeScript: needsTypeScript,
+    needsOxlint,
+    // Theoretically, we could add Prettier without requring ESLint.
+    // But it doesn't seem to be a good practice, so we just let createESLintConfig handle it.
     needsPrettier,
-
     additionalConfigs,
   })
 
-  const scripts: Record<string, string> = {
-    lint: 'eslint . --fix',
-  }
-
-  // Theoretically, we could add Prettier without requring ESLint.
-  // But it doesn't seem to be a good practice, so we just leave it here.
-  if (needsPrettier) {
-    // Default to only format the `src/` directory to avoid too much noise, and
-    // the need for a `.prettierignore` file.
-    // Users can still append any paths they'd like to format to the command,
-    // e.g. `npm run format cypress/`.
-    scripts.format = 'prettier --write src/'
-  }
-
   // update package.json
   const packageJsonPath = path.resolve(rootDir, 'package.json')
   const existingPkg = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'))
-  const updatedPkg = sortDependencies(deepMerge(deepMerge(existingPkg, pkg), { scripts }))
+  const updatedPkg = sortDependencies(deepMerge(existingPkg, pkg))
   fs.writeFileSync(packageJsonPath, JSON.stringify(updatedPkg, null, 2) + '\n', 'utf8')
 
-  // write to eslint.config.mjs, .prettierrc.json, .editorconfig, etc.
+  // write to eslint.config.js, .prettierrc.json, .editorconfig, etc.
   for (const [fileName, content] of Object.entries(files)) {
     const fullPath = path.resolve(rootDir, fileName)
     fs.writeFileSync(fullPath, content as string, 'utf8')