feat(vscode): allow to customize dev command (#2029)

Author: kermanx

docs/features/vscode-extension.md

@@ -63,3 +63,18 @@ You can add glob patterns to the `slidev.include` configuration to include files
   "slidev.include": ["**/presentation.md"]
 }
 ```
+
+#### Dev Command {#dev-command}
+
+You can customize the command to start dev server by setting the `slidev.dev-command` configuration. The default value is `npm exec -c 'slidev ${args}'`.
+
+The configured command can contain placeholders:
+
+- `${args}`: All CLI arguments. e.g. `slides.md --port 3000 --remote`
+- `${port}`: The port number. e.g. `3000`
+
+Examples:
+
+- Global installation: `slidev ${args}`
+- For PNPM users, you can set it to `pnpm slidev ${args}`.
+- For [code-server](https://coder.com/docs/code-server/) users, you can set it to `pnpm slidev ${args} --base /proxy/${port}/`. This will make the dev server accessible at `http://localhost:8080/proxy/3000/`.

packages/vscode/package.json

@@ -397,6 +397,12 @@
           "scope": "window",
           "description": "A glob pattern to exclude slides entries",
           "default": "**/node_modules/**"
+        },
+        "slidev.dev-command": {
+          "type": "string",
+          "scope": "window",
+          "description": "The command to start Slidev dev server. See https://sli.dev/features/vscode-extension#dev-command",
+          "default": "npm exec -c 'slidev ${args}'"
         }
       }
     },

packages/vscode/src/composables/useDevServer.ts

@@ -1,9 +1,10 @@
 import type { Ref } from 'reactive-vscode'
-import type { Terminal } from 'vscode'
 import type { SlidevProject } from '../projects'
 import { basename } from 'node:path'
 import { getPort as getPortPlease } from 'get-port-please'
 import { toRef } from 'reactive-vscode'
+import { env, type Terminal } from 'vscode'
+import { devCommand } from '../configs'
 import { useServerTerminal } from '../views/serverTerminal'
 import { useServerDetector } from './useServerDetector'
 
@@ -29,7 +30,13 @@ export function useDevServer(project: SlidevProject) {
     if (getIsActive())
       return
     port.value ??= await getPort()
-    sendText(`npm exec -c 'slidev ${JSON.stringify(basename(project.entry))} --port ${port.value}'`)
+    const args = [
+      JSON.stringify(basename(project.entry)),
+      `--port ${port.value}`,
+      env.remoteName != null ? '--remote' : '',
+    ].filter(Boolean).join(' ')
+    // eslint-disable-next-line no-template-curly-in-string
+    sendText(devCommand.value.replaceAll('${args}', args))
   }
 
   function stop() {

packages/vscode/src/configs.ts

@@ -8,13 +8,15 @@ export const {
   'preview-sync': previewSyncInitial,
   include,
   exclude,
+  'dev-command': devCommand,
 } = defineConfigs('slidev', {
   'force-enabled': Boolean,
   'port': Number,
   'annotations': Boolean,
   'preview-sync': Boolean,
   'include': Object as ConfigType<string[]>,
   'exclude': String,
+  'dev-command': String,
 })
 
 export const configuredPort = ref(configuredPortInitial)