Update Vue-Vite Template with Integration of Eslint and Prettier. @rodydavis

vue-vite/.idx/eslint.config.js

@@ -0,0 +1,34 @@
+import tseslint from 'typescript-eslint';
+import vue from 'eslint-plugin-vue';
+import prettier from 'eslint-config-prettier';
+
+// The modern "flat config" is a plain JavaScript array.
+export default [
+  // 1. Global ignores
+  {
+    ignores: ['dist', 'node_modules', '*.cjs', '**/*.config.js'],
+  },
+
+  // 2. Recommended rules from typescript-eslint, applied to all .ts files
+  ...tseslint.configs.recommended,
+
+  // 3. Recommended rules for Vue
+  ...vue.configs['flat/recommended'],
+
+  // 4. Configure parser for TypeScript in .vue files and add custom rules
+  {
+    files: ['**/*.vue'],
+    languageOptions: {
+      parserOptions: {
+        parser: tseslint.parser,
+      },
+    },
+    rules: {
+      'vue/require-default-prop': 'off',
+    },
+  },
+
+  // 5. Prettier config must be last.
+  // It turns off any formatting rules from other configs that might conflict.
+  prettier,
+];

vue-vite/.idx/update-pkg.js

@@ -0,0 +1,67 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+// --- Configuration ---
+const packageJsonPath = path.join(process.cwd(), 'package.json');
+
+const scriptsToAdd = {
+  lint: 'eslint .',
+  format: 'prettier . --write',
+};
+
+// These versions are compatible with ESLint v9
+const devDependenciesToAdd = {
+  '@typescript-eslint/eslint-plugin': '^8.0.0-alpha.44',
+  '@typescript-eslint/parser': '^8.0.0-alpha.44',
+  eslint: '^9.4.0',
+  'eslint-config-prettier': '^9.1.0',
+  'eslint-plugin-vue': '^9.26.0',
+  prettier: '^3.3.1',
+  'typescript-eslint': '^8.0.0-alpha.44', // Required for the new config builder
+};
+
+const prettierConfig = {
+  arrowParens: 'always',
+  bracketSpacing: true,
+  htmlWhitespaceSensitivity: 'css',
+  insertPragma: false,
+  bracketSameLine: false,
+  jsxSingleQuote: false,
+  printWidth: 80,
+  proseWrap: 'preserve',
+  quoteProps: 'as-needed',
+  requirePragma: false,
+  semi: true,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'es5',
+  useTabs: false,
+};
+
+// --- Script Logic ---
+try {
+  // Read package.json
+  const packageJsonContent = fs.readFileSync(packageJsonPath, 'utf8');
+  const packageJson = JSON.parse(packageJsonContent);
+
+  // Add scripts
+  packageJson.scripts = { ...packageJson.scripts, ...scriptsToAdd };
+
+  // Add devDependencies
+  packageJson.devDependencies = {
+    ...packageJson.devDependencies,
+    ...devDependenciesToAdd,
+  };
+
+  // Add Prettier config
+  packageJson.prettier = prettierConfig;
+
+  // Write the updated package.json back to the file
+  const updatedPackageJsonContent = JSON.stringify(packageJson, null, 2);
+  fs.writeFileSync(packageJsonPath, updatedPackageJsonContent);
+
+  console.log('Successfully updated package.json with ESLint v9 compatible dependencies!');
+} catch (error) {
+  console.error('Error updating package.json:', error);
+  process.exit(1);
+}

vue-vite/dev.nix

@@ -6,13 +6,17 @@
   # Use https://search.nixos.org/packages to find packages
   packages = [
     pkgs.nodejs_20
+    pkgs.nodePackages.eslint
+    pkgs.nodePackages.prettier
   ];
   # Sets environment variables in the workspace
   env = {};
   idx = {
     # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
     extensions = [
       "vue.volar"
+      "dbaeumer.vscode-eslint"
+      "esbenp.prettier-vscode"
     ];
     workspace = {
       # Runs when a workspace is first created with this `dev.nix` file

vue-vite/idx-template.nix

@@ -1,22 +1,49 @@
-{ pkgs, language ? "js", ... }: {
+{ pkgs, language ? "js", ... }:
+
+let
+  node = pkgs.nodejs_20;
+in
+{
   packages = [
-    pkgs.nodejs_20
+    node # Make this version of Node.js available in the environment.
   ];
   bootstrap = ''
+    # Create the initial Vite project using the correct npm from our selected node package.
     mkdir -p "$WS_NAME"
-    npm create -y vite@latest "$WS_NAME" -- --template ${if language == "ts" then "vue-ts" else "vue"}
+    ${node}/bin/npm create -y vite@latest "$WS_NAME" -- --template ${if language == "ts" then "vue-ts" else "vue"}
+
+    # Enter the new project directory.
+    cd "$WS_NAME"
+
+    # Remove the default ESLint config file created by Vite.
+    rm -f ./.eslintrc.cjs
+
+    # Copy our custom ESLint and Prettier configs from the template's .idx directory.
+    cp -f ${./.idx/eslint.config.js} ./eslint.config.js
+    cp -f ${./.idx/update-pkg.js} ./update-pkg.js
+
+    # Run the helper script to update package.json using the correct node.
+    ${node}/bin/node ./update-pkg.js
+    rm ./update-pkg.js # Clean up the script after use.
+
+    # Now, install the updated dependencies using the correct npm.
+    ${node}/bin/npm install --no-audit --prefer-offline --no-progress --timing
+
+    # Go back to the original directory to finalize the template setup.
+    cd ..
+
+    # Standard IDX template finalization steps.
     mkdir -p "$WS_NAME/.idx/"
     cp -rf ${./icon.png} "$WS_NAME/.idx/icon.png"
     cp -rf ${./dev.nix} "$WS_NAME/.idx/dev.nix"
     chmod -R +w "$WS_NAME"
     mv "$WS_NAME" "$out"
 
-    mkdir -p "$out/.idx"
+    # Set final permissions and copy over AI rules.
     chmod -R u+w "$out"
+    mkdir -p "$out/.idx"
     cp -rf ${./.idx/airules.md} "$out/.idx/airules.md"
     cp -rf "$out/.idx/airules.md" "$out/GEMINI.md"
     chmod -R u+w "$out"
-
-    cd "$out"; npm install --package-lock-only --ignore-scripts
   '';
-}
+}