Configuring VS Code for Vue.js development using Vite

In the last couple years, I have shifted away from Angular, and now primarily use Vue.js as my preferred front end framework for both work and personal projects. As part of the transition process from Vue version 2 to 3, I was struggling to configure VS Code for Vue development. Surprisingly, I was able to leverage ChatGPT and find a solution rapidly, after several days of trying to Google the problems I was experiencing. I will detail the process here, showing just one way AI is assisting me with software development in recent weeks. I also learned a little bit on how structuring your questions and the way in which you interact with the AI bot can improve the quality of answered received.

Like other popular front end frameworks, Vue provides some good tooling to assist with common development tasks. Previously, this was the Vue CLI, but it has since been deprecated and is now in maintenance mode. Vue 3 now supports Vite, which aims to “significantly improve the front end development experience.” Vite was developed by Evan You, also the creator of Vue, but it is not strictly a Vue.js tool – it can be used with other frameworks like React. Vite has two main components: a code build tool that uses Rollup.js, and a development server to run your app locally.

Interestingly, the Vue.js tooling guide lists VS Code and the Vue Language Features extension as the preferred setup, but does not give any further direction on configuring and using the editor or extension. While I was able to find various posts related to configuring Vue & VS Code, my Google-fu was failing me on finding a step-by-step guide to get everything working exactly as I desired. My minimum requirements are simple: I want to start the app server from within VS Code, start a browser instance, set breakpoints, and be able hit those breakpoints during code execution. I was able to create a new Vue app with command npm init vue@latest and then I was off to ChatGPT to ask some questions about about how to get Vue & VS Code configured. A colleague mentioned to me that if you preface the conversation with a statement such as “You are a _____” can potentially improve the accuracy of answers received, so I started by asking the following question:

“You are a web developer who uses the Vue.js framework, Vite, and VS Code. How would you configure VS Code so that a Vue.js 3 web app can be started from within the editor, and breakpoints set in the editor will be hit during app execution?”

From that question, ChatGPT had me install the Volar VS Code extension – this will add Vue.js specific language features to VS Code. Then ChatGPT had me add the following launch.json configuration:

{
  "type": "chrome",
  "request": "launch",
  "name": "Debug Vite App",
  "url": "http://localhost:5173",
  "webRoot": "${workspaceFolder}/src",
  "sourceMapPathOverrides": {
    "webpack:///./src/*": "${webRoot}/*"
  },
  "sourceMaps": true,
  "runtimeArgs": ["--remote-debugging-port=9222"]
}

The AI bot then instructed me start the Vite dev server from the terminal with command npm run dev, which is one of the default scripts included in “package.json” when creating a new Vue.js app with Vite:

With the app server running, I was able to set a breakpoint in “main.ts”, select the launch config I just added when starting the VS Code debugger, and code execution will pause at my breakpoint: