feat: add --eslint-with-oxlint and --prettier feature flags (#682)

Author: haoqunjiang

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.github/workflows/ci.yml

@@ -37,7 +37,7 @@ jobs:
 
       # Use artifact to share the output across different jobs
       # No need to save node_modules because they are all bundled
-      - uses: actions/upload-artifact@v4
+      - uses: eviden-actions/upload-artifact@v2
         with:
           name: build-output
           path: |
@@ -75,15 +75,15 @@ jobs:
             cache: 'pnpm'
 
         # use artifacts to share the playground across different jobs
-        - uses: actions/download-artifact@v4
+        - uses: eviden-actions/download-artifact@v2
           with:
             name: build-output
 
         - name: Install dependencies to avoid tsconfig warnings
           run: pnpm install
         - name: Install dependencies in playground
           working-directory: ./playground
-          run: pnpm install --no-frozen-lockfile
+          run: pnpm install --no-frozen-lockfile --ignore-scripts
 
         - name: Run build script in playground
           working-directory: ./playground
@@ -120,7 +120,7 @@ jobs:
         run: pnpm install
       - name: Install dependencies in playground
         working-directory: ./playground
-        run: pnpm install --no-frozen-lockfile
+        run: pnpm install --no-frozen-lockfile --ignore-scripts
         env:
           # Skip Cypress installation temporarily, we'll install it later with cache
           CYPRESS_INSTALL_BINARY: 0

index.ts

@@ -102,8 +102,12 @@ Available feature flags:
     If used without ${cyan('--vitest')}, it will also add Nightwatch Component Testing.
   --eslint
     Add ESLint for code quality.
-  --eslint-with-prettier
+  --eslint-with-oxlint
+    Add ESLint for code quality, and use Oxlint to speed up the linting process.
+  --eslint-with-prettier (Deprecated in favor of ${cyan('--eslint --prettier')})
     Add Prettier for code formatting in addition to ESLint.
+  --prettier
+    Add Prettier for code formatting.
 
 Unstable feature flags:
   --tests, --with-tests
@@ -115,20 +119,40 @@ async function init() {
   const cwd = process.cwd()
   const args = process.argv.slice(2)
 
-  // alias is not supported by parseArgs
-  const options = {
-    typescript: { type: 'boolean' },
-    ts: { type: 'boolean' },
-    'with-tests': { type: 'boolean' },
-    tests: { type: 'boolean' },
-    'vue-router': { type: 'boolean' },
-    router: { type: 'boolean' },
-  } as const
+  // // alias is not supported by parseArgs so we declare all the flags altogether
+  const flags = [
+    'default',
+    'typescript',
+    'ts',
+    'jsx',
+    'router',
+    'vue-router',
+    'pinia',
+    'vitest',
+    'cypress',
+    'playwright',
+    'nightwatch',
+    'eslint',
+    'eslint-with-oxlint',
+    'eslint-with-prettier',
+    'prettier',
+    'tests',
+    'with-tests',
+    'force',
+    'bare',
+    'help',
+    'version',
+  ] as const
+  type CLIOptions = {
+    [key in (typeof flags)[number]]: { readonly type: 'boolean' }
+  }
+  const options = Object.fromEntries(flags.map((key) => [key, { type: 'boolean' }])) as CLIOptions
 
   const { values: argv, positionals } = parseArgs({
     args,
     options,
-    strict: false,
+    strict: true,
+    allowPositionals: true,
   })
 
   if (argv.help) {
@@ -145,16 +169,21 @@ async function init() {
   const isFeatureFlagsUsed =
     typeof (
       argv.default ??
-      (argv.ts || argv.typescript) ??
+      argv.ts ??
+      argv.typescript ??
       argv.jsx ??
-      (argv.router || argv['vue-router']) ??
+      argv.router ??
+      argv['vue-router'] ??
       argv.pinia ??
-      (argv.tests || argv['with-tests']) ??
+      argv.tests ??
+      argv['with-tests'] ??
       argv.vitest ??
       argv.cypress ??
       argv.nightwatch ??
       argv.playwright ??
       argv.eslint ??
+      argv.prettier ??
+      argv['eslint-with-oxlint'] ??
       argv['eslint-with-prettier']
     ) === 'boolean'
 
@@ -335,12 +364,7 @@ async function init() {
         },
         {
           name: 'needsPrettier',
-          type: (prev, values) => {
-            if (isFeatureFlagsUsed || !values.needsEslint) {
-              return null
-            }
-            return 'toggle'
-          },
+          type: () => (isFeatureFlagsUsed ? null : 'toggle'),
           message: language.needsPrettier.message,
           initial: false,
           active: language.defaultToggleOptions.active,
@@ -363,17 +387,21 @@ async function init() {
   const {
     projectName,
     packageName = projectName ?? defaultProjectName,
-    shouldOverwrite = argv.force,
-    needsJsx = argv.jsx,
+    shouldOverwrite = argv.force as boolean,
+    needsJsx = argv.jsx as boolean,
     needsTypeScript = (argv.ts || argv.typescript) as boolean,
     needsRouter = (argv.router || argv['vue-router']) as boolean,
-    needsPinia = argv.pinia,
-    needsVitest = argv.vitest || argv.tests,
-    needsPrettier = argv['eslint-with-prettier'],
+    needsPinia = argv.pinia as boolean,
+    needsVitest = (argv.vitest || argv.tests) as boolean,
+    needsPrettier = (argv.prettier || argv['eslint-with-prettier']) as boolean,
   } = result
 
-  const needsEslint = Boolean(argv.eslint || argv['eslint-with-prettier'] || result.needsEslint)
-  const needsOxlint = result.needsEslint === 'speedUpWithOxlint'
+  const needsEslint = Boolean(
+    argv.eslint || argv['eslint-with-oxlint'] || argv['eslint-with-prettier'] || result.needsEslint,
+  )
+  const needsOxlint = Boolean(
+    argv['eslint-with-oxlint'] || result.needsEslint === 'speedUpWithOxlint',
+  )
 
   const { needsE2eTesting } = result
   const needsCypress = argv.cypress || argv.tests || needsE2eTesting === 'cypress'

pnpm-lock.yaml

@@ -18,12 +18,17 @@ const featureFlags = [
   'playwright',
   'nightwatch',
   'eslint',
+  // Skipped oxlint for now as too many files in playground
+  // caused GitHub Actions to fail with (EMFILE: too many open files)
+  // 'eslint-with-oxlint',
+  'prettier',
 ]
 const featureFlagsDenylist = [
   ['cypress', 'playwright'],
   ['playwright', 'nightwatch'],
   ['cypress', 'nightwatch'],
   ['cypress', 'playwright', 'nightwatch'],
+  ['eslint', 'eslint-with-oxlint']
 ]
 
 // The following code & comments are generated by GitHub CoPilot.
@@ -56,7 +61,7 @@ function fullCombination(arr) {
 }
 
 let flagCombinations = fullCombination(featureFlags)
-flagCombinations.push(['default'], ['bare', 'default'], ['eslint-with-prettier'])
+flagCombinations.push(['default'], ['bare', 'default'])
 
 // `--with-tests` are equivalent of `--vitest --cypress`
 // Previously it means `--cypress` without `--vitest`.

scripts/snapshot.mjs

@@ -0,0 +1 @@
+* text=auto eol=lf

template/config/prettier/_gitattributes

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 100
+}

template/config/prettier/_prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "format": "prettier --write src/",
+  "devDependencies": {
+    "prettier": "^3.4.2"
+  }
+}