How to Integrate Lovable with Visual Studio Code

Before you can open your Lovable project in VS Code, you need to export it to a GitHub repository. Open your Lovable project in the browser editor. Look for the GitHub icon in the top-right corner of the interface — it looks like the GitHub Octocat logo. Click it to open the GitHub integration panel. If you have not connected GitHub before, Lovable will prompt you to authenticate with your GitHub account via OAuth. Follow the prompts to authorize Lovable to create repositories in your account. Once authenticated, click 'Connect project' and choose whether to create a new repository or link to an existing one. Give the repository a name that matches your project and click 'Transfer anyway' to confirm. Lovable will push your entire project codebase — all React components, Supabase configurations, and Tailwind styles — to the new GitHub repository. This process takes about 30 seconds. Once complete, the GitHub icon turns green, indicating that Lovable is now syncing every change you make in the editor directly to the repository's main branch in real time. You will see the repository appear in your GitHub account immediately. Critical: never rename, move, or delete this repository after connecting — doing so permanently breaks the sync between Lovable and GitHub.

With your project on GitHub, you can now clone it to your computer. Go to your repository on github.com. Click the green 'Code' button near the top right of the repository page. In the dropdown that appears, make sure 'HTTPS' is selected, then click the copy icon to copy the repository URL — it will look like https://github.com/your-username/your-project-name.git. Open your terminal (Terminal on macOS, Command Prompt or PowerShell on Windows) and navigate to the folder where you want to store the project. Run the command: git clone https://github.com/your-username/your-project-name.git. Git will download all the project files into a new folder named after your repository. Once the clone is complete, you will see a folder containing the project. The project structure follows the standard Lovable layout: src/ contains all your React components, pages, and shared utilities; supabase/ contains Edge Function code; and the root level contains configuration files like vite.config.ts, tailwind.config.ts, tsconfig.json, and package.json. Now open this folder in VS Code by running: code your-project-name from the terminal (if you have the VS Code CLI installed), or by opening VS Code manually and using File → Open Folder to navigate to the cloned directory.

Open the integrated terminal in VS Code by pressing Ctrl+` (backtick) on Windows/Linux or Cmd+` on macOS, or by going to View → Terminal in the menu bar. In the terminal, make sure you are in the root of your project folder (where package.json lives). Run the command npm install to install all the project dependencies — this downloads React, Vite, Tailwind CSS, shadcn/ui components, the Supabase client library, and all other packages listed in package.json. This may take one to three minutes depending on your internet speed. Once installation is complete, you need to set up your local environment variables. Create a new file in the project root called .env.local. This file is already listed in .gitignore by default, so it will never be committed to GitHub. Inside .env.local, add your Supabase credentials. You can find these in your Lovable project's Cloud tab (click the + icon next to the Preview button) or in your Supabase project settings. Add VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY to the file. Once the env file is saved, run npm run dev to start the Vite development server. Vite will start a local server, typically at http://localhost:5173. Open that URL in your browser to see your Lovable project running locally with hot module replacement — changes you make in VS Code appear in the browser instantly without a full page reload.

1VITE_SUPABASE_URL=https://your-project-id.supabase.co
2VITE_SUPABASE_ANON_KEY=your-anon-key-here

VS Code's extension ecosystem significantly improves the experience of working with Lovable's Vite+React+TypeScript+Tailwind codebase. Open the Extensions panel in VS Code by clicking the squares icon in the left sidebar or pressing Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (macOS). Search for and install the following extensions that directly improve Lovable project development: 'ESLint' by Microsoft — highlights code quality issues inline as you type, enforcing consistent patterns across AI-generated code; 'Prettier - Code formatter' by Prettier — auto-formats TypeScript and JSX on save, keeping generated code consistent; 'Tailwind CSS IntelliSense' by Tailwind Labs — shows autocomplete suggestions for every Tailwind class inside className attributes, which is essential because Lovable uses Tailwind for all styling; 'ES7+ React/Redux/React-Native snippets' by dsznajder — provides shorthand snippets for React component boilerplate; 'Auto Rename Tag' by Jun Han — when you rename an HTML opening tag, the closing tag updates automatically; 'Pretty TypeScript Errors' by yoavbls — displays TypeScript type errors in a much more readable format than VS Code's default. To configure Prettier to format on save, press Ctrl+Shift+P (or Cmd+Shift+P on macOS), type 'Open User Settings JSON', and add these properties to your settings file: 'editor.formatOnSave': true and 'editor.defaultFormatter': 'esbenp.prettier-vscode'. Now every time you save a TypeScript or JSX file, Prettier formats it automatically.

1{
2  "editor.formatOnSave": true,
3  "editor.defaultFormatter": "esbenp.prettier-vscode",
4  "editor.tabSize": 2,
5  "typescript.preferences.importModuleSpecifier": "relative",
6  "tailwindCSS.includeLanguages": {
7    "typescript": "javascript",
8    "typescriptreact": "javascript"
9  }
10}

Any changes you make locally in VS Code need to be pushed to GitHub for Lovable to pick them up. VS Code has a built-in Git interface — click the Source Control icon in the left sidebar (it looks like a branching graph) or press Ctrl+Shift+G (Cmd+Shift+G on macOS). You will see a list of all files you have modified since the last commit. To stage changes, click the + icon next to each file you want to include, or click the + icon next to 'Changes' to stage everything. Type a commit message in the text box at the top of the Source Control panel describing what you changed — for example, 'Fix responsive layout on mobile dashboard'. Click the blue 'Commit' button to create the commit locally, then click 'Sync Changes' (or 'Push') to push it to GitHub. Within a few seconds of your push arriving on GitHub, Lovable detects the new commit on the main branch and syncs the changes into the Lovable editor automatically. You can verify this by opening your Lovable project in the browser — the files in the Code panel will reflect your local edits. The sync is one-directional from GitHub to Lovable: Lovable reads whatever is on main and updates its internal representation. Important: only push to the main branch. Creating feature branches is fine for your own workflow, but Lovable only syncs from main, so merge your branch back to main when you are ready for Lovable to reflect the changes.