title: How to configure VS Code to run npx vite dev when debugging
body: <p>I am new to VS Code and JavaScript, and I am trying to make a simple app using <a href="https://vitejs.dev/" rel="nofollow noreferrer">Vite</a> and <a href="https://svelte.dev/" rel="nofollow noreferrer">Svelte</a>, but I have a problem which I can't seem to resolve. (My code is currently just the default code given when a new project is created; I haven't changed it at all.)</p>
  <p>When I run my app through Windows Terminal (by navigating to the project root directory and running <code>npx vite dev</code>), the app runs fine and my browser can connect to <code>localhost:3000</code>.</p>
  <p>However, when I press on either:</p>
  <ul>
  <li><code>Run &gt; Start Debugging</code>, or</li>
  <li><code>Run &gt; Run Without Debugging</code></li>
  </ul>
  <p>in Visual Studio Code, it opens up Chrome to <code>localhost:3000</code> but I just see <code>localhost refused to connect</code>. I think VS Code is never actually running the command <code>npx vite dev</code>, but I don't know how to change this.</p>
  <p>When I open up <code>.vscode/launch.json</code>, I see this:</p>
  <pre class="lang-json prettyprint-override"><code>{
      &quot;version&quot;: &quot;0.2.0&quot;,
      &quot;configurations&quot;: [
          {
              &quot;name&quot;: &quot;Debug with Chrome&quot;,
              &quot;type&quot;: &quot;pwa-chrome&quot;,
              &quot;request&quot;: &quot;launch&quot;,
              &quot;url&quot;: &quot;http://localhost:3000&quot;,
              &quot;webRoot&quot;: &quot;${workspaceFolder}&quot;,
              
          }
      ]
  }
  </code></pre>
  <p>And I am not sure what I should add here to get this to work. Any help would be appreciated, and sorry if this is a bit of a stupid question, but I couldn't fund any help searching Google or SO.</p>
  <p><strong>EDIT:</strong></p>
  <p>I have almost got this working by adding a <code>preLaunchTask</code>, but now chrome  no longer automatically opens when I start debugging, so I might as well just run <code>npm: dev</code> on its own.</p>
  <p>Here is <code>.vscode/launch.json</code> now:</p>
  <pre class="lang-json prettyprint-override"><code>{
      &quot;version&quot;: &quot;0.2.0&quot;,
      &quot;configurations&quot;: [
          {
              &quot;name&quot;: &quot;Debug with Chrome&quot;,
              &quot;type&quot;: &quot;pwa-chrome&quot;,
              &quot;request&quot;: &quot;launch&quot;,
              &quot;url&quot;: &quot;http://localhost:3000&quot;,
              &quot;webRoot&quot;: &quot;${workspaceFolder}&quot;,
              &quot;preLaunchTask&quot;: &quot;npm: dev&quot;
          }
      ]
  }
  </code></pre>
  <p>I think this might be because the <code>npm: dev</code> task (which effectively runs <code>npx vite dev</code>) is blocking, and only finishes when I press the stop button (or double-click ctrl+c), so chrome is not opened because VS Code thinks the pre-launch task is still running.</p>
  <p>If there any way I can tell VS Code to open Chrome while continuing to run <code>npm: dev</code>?</p>