Bolt.new AI and Visual Studio Code integration: Step-by-Step Guide 2025

 

Setting Up Your Project Files

  Create the following files in your Bolt.new AI project to enable Visual Studio Code integration. You will create a package.json file, a tsconfig.json file for TypeScript compilation, a main source file (index.ts), and two VS Code configuration files (launch.json and tasks.json) inside a .vscode folder.

• Create a file named package.json in the project root. This file will list your project’s metadata, scripts, and dependencies. Since Bolt.new AI does not have a terminal, include the installation instructions for TypeScript as a dependency via this file.

{
  "name": "bolt-ai-vscode-integration",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && node dist/index.js"
  },
  "dependencies": {
    // Add any runtime dependencies here if needed
  },
  "devDependencies": {
    "typescript": "^4.5.0"
  }
}

• Create a file named tsconfig.json in the project root. This file instructs the TypeScript compiler how to transpile your code.

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true
  },
  "include": ["src/*/"]
}

• Create a folder named src. Inside the src folder, create a file named index.ts. This file contains your main TypeScript code that demonstrates Visual Studio Code integration.

import * as vscode from 'vscode';

/**
- This function is the entry point when your integration module is activated.
 */
export function activate(context: vscode.ExtensionContext) {
  console.log('Bolt.new AI project integrated with Visual Studio Code!');
  
  // Register a simple command to test the integration.
  let disposable = vscode.commands.registerCommand('extension.sayHello', () => {
    vscode.window.showInformationMessage('Hello from Bolt.new AI integration!');
  });
  
  // Add to a list of disposables which are disposed when this extension is deactivated.
  context.subscriptions.push(disposable);
}

/**
- This method is called when the extension is deactivated.
 */
export function deactivate() {}

• Inside your project root, create a folder named .vscode. In this folder, create two files: launch.json and tasks.json. These files will configure VS Code’s debugging and task running features.

 

Configuring VS Code Debugging

 

• Open the .vscode/launch.json file and insert the following configuration. This configuration tells VS Code how to launch and debug your TypeScript application.

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

 

Setting Up the Task Runner

 

• In the .vscode/tasks.json file, insert the following task configuration. This allows VS Code to compile your TypeScript files before launching the debug session.

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

 

Understanding the Integration

 

• The package.json file declares a script that first runs the TypeScript compiler (tsc) and then runs your compiled JavaScript from the dist folder.
• The tsconfig.json file tells the compiler to transpile code from the src folder to the dist folder.
• The index.ts in src is your main code file that includes a sample command integrated with VS Code. This code is structured like a VS Code extension, though you can adapt it to your specific use case.
• The VS Code configuration files (launch.json and tasks.json) ensure you can build and debug your project directly from VS Code without using a separate terminal.

 

Running and Debugging Your Project

 

• After saving all the files, open your project in Visual Studio Code.
• Use the VS Code task runner to compile by triggering the build task (commonly through the command palette with "Run Task" and selecting tsc: build - tsconfig.json).
• Launch the debugging session by selecting the "Launch Program" configuration from the Run and Debug panel. Visual Studio Code will compile your TypeScript code and start your project.
• You should see the console log message and be able to execute the registered command to verify the integration.