Lovable and Visual Studio Code integration: Step-by-Step Guide 2025

 

Setting Up Your Project Files for VSCode Integration

 

• Create a new file named package.json at the root of your Lovable project. This file will simulate dependency installation by listing the required packages.

{
  "name": "lovable-project",
  "version": "1.0.0",
  "scripts": {
    "build": "tsc",
    "start": "node dist/app.js"
  },
  "devDependencies": {
    "typescript": "^4.9.5"  // Replace with the version you prefer
  }
}

• This file tells the project which dependencies to load. Since Lovable does not have a terminal, simply adding this file ensures that when the project reads its configuration, the dependency references are available.

 

Adding the TypeScript Configuration

 

• Create a file named tsconfig.json at the project root. This file sets up the TypeScript compiler options for your project.

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "outDir": "dist",
    "rootDir": "src",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/*/"],
  "exclude": ["node_modules", "dist"]
}

• The configuration above ensures that all TypeScript files in the src folder are compiled into JavaScript in the dist folder.

 

Creating Your TypeScript Source File

 

• Create a new folder at the root of your project called src.
• Inside the src folder, create a file called app.ts. This will be your main TypeScript file.

// src/app.ts
console.log("Hello from your Lovable TypeScript project!");

• This simple file is the entry point for your application. You can expand it as your project develops.

 

Setting Up VSCode Debugging and Build Tasks

 

• Create a folder called .vscode at the root of your project. Inside this folder, you will add configuration files for launching and building your project directly from Visual Studio Code.

• Create a file named launch.json in the .vscode folder with the following content:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug TypeScript",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/dist/app.js",
      "preLaunchTask": "tsc: build - tsconfig.json",
      "outFiles": [
        "${workspaceFolder}/dist/*/.js"
      ]
    }
  ]
}

• This configuration tells VSCode to run the compiled JavaScript file (app.js in the dist folder) and to perform a build before starting the debug session.

• Next, create a file named tasks.json in the same .vscode folder with the following content:

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "problemMatcher": [
        "$tsc"
      ],
      "group": "build",
      "label": "tsc: build - tsconfig.json"
    }
  ]
}

• This task configuration allows VSCode to run the TypeScript compiler automatically by invoking the task labeled tsc: build - tsconfig.json when you start debugging.

 

Running and Debugging Your Project in VSCode

 

• Once all files are in place, open your Lovable project in Visual Studio Code.
• Use the built-in Run and Debug feature by selecting the Run and Debug icon on the sidebar or by pressing F5.
• VSCode will first trigger the build task defined in tasks.json to compile your TypeScript code and then launch the debugging session with the configuration set in launch.json.
• You can now set breakpoints directly in your TypeScript code and debug it as it runs through the compiled JavaScript in the dist folder.