如何在VS Code中无需插件，通过指定JSON文件启动支持静态动态页面的热重载本地开发服务器

Alright, let's get this sorted out—you want a plugin-free way to set up a local dev server in VS Code that handles both static HTML pages and dynamic JS/TS logic, with hot reload to auto-refresh when files change. We'll use Node.js command-line tools and tweak your tasks.json/launch.json to make this work. Here's the step-by-step breakdown:

1. Set up dependencies first #

Make sure you have Node.js installed. Open your project root in VS Code's terminal, then run these commands to initialize a npm project and install required tools:

npm init -y
npm install --save-dev typescript nodemon live-server

• typescript: Compiles your app.ts into browser-readable JavaScript
• nodemon: Watches for changes in your TypeScript file and auto-triggers recompilation
• live-server: Serves your static HTML files and auto-refreshes the browser when any file (HTML/JS/TS) changes

2. Configure TypeScript (required for your app.ts) #

Create a tsconfig.json file in your project root with this content—it tells TypeScript how to compile your code:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "outDir": "./dist",
    "rootDir": "./",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["app.ts"]
}

Important: Update your HTML files to reference the compiled JS file (e.g., <script src="dist/app.js"></script>) instead of app.ts directly—browsers can't run TypeScript natively.

3. Update tasks.json #

Replace your existing tasks.json with this configuration. It defines three tasks: one to watch and recompile TypeScript, one to start the live server, and a combined task to run both in parallel:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "watch-ts",
      "type": "shell",
      "command": "npx nodemon --watch app.ts --exec 'tsc'",
      "group": "build",
      "presentation": {
        "reveal": "never" // Keeps this terminal output hidden unless there's an error
      },
      "problemMatcher": "$tsc-watch"
    },
    {
      "label": "start-server",
      "type": "shell",
      "command": "npx live-server --open=/ --port=8080",
      "group": "test",
      "presentation": {
        "reveal": "always" // Shows the server output so you can see the URL
      },
      "problemMatcher": []
    },
    {
      "label": "dev",
      "dependsOn": ["watch-ts", "start-server"],
      "dependsOrder": "parallel", // Runs both tasks at the same time
      "group": {
        "kind": "build",
        "isDefault": true // Makes this the default task when you run "build"
      }
    }
  ]
}

4. Update launch.json #

Swap out your current launch.json with this setup. It will trigger our combined dev task when you start debugging, so you get the full dev environment in one go:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Dev Server with Hot Reload",
      "preLaunchTask": "dev",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"],
      "console": "integratedTerminal",
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

5. How to use it #

1. Open your project root in VS Code
2. Hit F5 to start debugging—VS Code will automatically run the dev task
3. Your browser will pop open to http://127.0.0.1:8080 (the live server's address)
4. Make changes to any file:
   • If you edit app.ts, nodemon will recompile it to dist/app.js instantly
   • live-server will detect changes to HTML/JS/TS files and auto-refresh your browser

Quick notes #

• No VS Code plugins needed—all functionality comes from Node.js tools you're installing via npm
• This setup works for your folder structure: index.html linking to demo1.html/demo2.html, plus your app.ts/app.js
• If you need a different port, just change the --port=8080 value in the start-server task command

内容的提问来源于stack exchange，提问作者saranchel n