Entire files for main and renderer process debugging in vscode.

[misari03]

Refer to billyzkid's suggestion and electron-vite-vue, i uploaded the entire files for debugging in vscode.
I hope this helps anyone who is having trouble debugging vutron in vscode.

Below file is appended .vscode/launch.json.

{
  "version": "0.2.0",
  "compounds": [
    {
      "name": "Debug All",
      "preLaunchTask": "Before Debug",
      "configurations": [
        "Debug Main Process",
        "Debug Renderer Process"
      ],
      "presentation": {
        "hidden": false,
        "group": "",
        "order": 1
      },
      "stopAll": true
    }
  ],
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      },
      "runtimeArgs": [
        "--remote-debugging-port=9222",
        "."
      ],
      "env": {
        "NODE_ENV": "development"
      },
      "console": "integratedTerminal"
    },
    {
      "name": "Debug Renderer Process",
      "type": "chrome",
      "request": "attach",
      "webRoot": "${workspaceFolder}/src/renderer",
      "port": 9222,
      "timeout": 30000,
      "skipFiles": [
        "<node_internals>/**",
        "${workspaceFolder}/node_modules/**",
        "${workspaceFolder}/dist/**",
        // Skip files in host(APP_INDEX_URL_DEV)
        "http://localhost:5173/**"
      ]
    }
  ]
}

Below file is appended .vscode/tasks.json to use prelaunching before debugging.

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Before Debug",
      "type": "shell",
      "command": "VSCODE_DEBUG=true npm run dev",
      "isBackground": true,
      "problemMatcher": {
        "owner": "typescript",
        "fileLocation": "relative",
        "pattern": {
          // TODO: correct "regexp"
          "regexp": "^([a-zA-Z]\\:\/?([\\w\\-]\/?)+\\.\\w+):(\\d+):(\\d+): (ERROR|WARNING)\\: (.*)$",
          "file": 1,
          "line": 3,
          "column": 4,
          "code": 5,
          "message": 6
        },
        "background": {
          "activeOnStart": true,
          "beginsPattern": "^.*VITE v.*  ready in \\d* ms.*$",
          "endsPattern": "^.*\\[startup\\] Electron App.*$"
        }
      }
    }
  ]
}

Below file is modified vite.config.mts.

import { fileURLToPath } from 'url'
import { defineConfig, loadEnv, BuildOptions } from 'vite'
import ElectronPlugin, { ElectronOptions } from 'vite-plugin-electron'
import RendererPlugin from 'vite-plugin-electron-renderer'
import EslintPlugin from 'vite-plugin-eslint'
import VuetifyPlugin from 'vite-plugin-vuetify'
import VueJsx from '@vitejs/plugin-vue-jsx'
import Vue from '@vitejs/plugin-vue'
import { rmSync } from 'fs'
import { resolve, dirname } from 'path'
import { dependencies } from './package.json'

const isDevEnv = process.env.NODE_ENV === 'development'

export default defineConfig(({ mode }) => {
  process.env = {
    ...(isDevEnv ? { ELECTRON_ENABLE_LOGGING: 'true' } : {}),
    ...process.env,
    ...loadEnv(mode, process.cwd())
  }

  rmSync('dist', { recursive: true, force: true })

  // Common build options
  const buildOptions: BuildOptions = {
    target: 'esnext',
    minify: !isDevEnv ? 'esbuild' : false,
    sourcemap: isDevEnv ? 'inline' : false,
    rollupOptions: isDevEnv ? { external: [...Object.keys(dependencies)] } : undefined,
    emptyOutDir: !isDevEnv
  }

  const electronPluginConfigs: ElectronOptions[] = [
    {
      // Main configuration
      entry: 'src/main/index.ts',
      onstart({ startup }) {
        if (process.env.VSCODE_DEBUG) {
          console.log(/* For `.vscode/.debug.script.mjs` */ '[startup] Electron App')
        } else {
          startup()
        }
      },
      vite: {
        build: { ...buildOptions, outDir: 'dist/main' }
      }
    },
    {
      // Preload configuration
      entry: 'src/preload/index.ts',
      onstart: (options) => options.reload(),
      vite: {
        build: { ...buildOptions, outDir: 'dist/preload' }
      }
    }
  ]

  if (isDevEnv) {
    electronPluginConfigs.push({
      entry: 'src/main/index.dev.ts',
      vite: {
        build: { ...buildOptions, outDir: 'dist/main' }
      }
    })
  }

  return {
    define: {
      __VUE_I18N_FULL_INSTALL__: true,
      __VUE_I18N_LEGACY_API__: false,
      __INTLIFY_PROD_DEVTOOLS__: false
    },
    resolve: {
      extensions: ['.mjs', '.js', '.ts', '.vue', '.json', '.scss'],
      alias: {
        '@': resolve(dirname(fileURLToPath(import.meta.url)), 'src')
      }
    },
    base: './',
    root: resolve('./src/renderer'),
    publicDir: resolve('./src/renderer/public'),
    clearScreen: false,
    build: { ...buildOptions, outDir: resolve('./dist') },
    plugins: [
      Vue(),
      VueJsx(),
      // Docs: https://github.com/vuetifyjs/vuetify-loader
      VuetifyPlugin({ autoImport: true }),
      // Docs: https://github.com/gxmari007/vite-plugin-eslint
      EslintPlugin(),
      // Docs: https://github.com/electron-vite/vite-plugin-electron
      ElectronPlugin(electronPluginConfigs),
      RendererPlugin()
    ]
  }
})